1

「middleButton」要件のカスタム スキンを定義するカスタム スキンを持つ Spark ButtonBar があります。CustomButtonBarSkinには、最小化されたカスタム状態があり、これをmiddleButtonスキンに渡して、デザインを変更できるようにします。

これを行うことは可能ですか？私のボタンスキンはparentDocument.currentStateを使用して最小化された状態を取得できることがわかりますが、それは本当に醜いです. バーから子ボタンにスキンを渡す方法はありますか?

4

4 に答える 4

2

default を拡張する必要があると思いますButtonBar。このようなもの：

package
{
import mx.core.IFactory;

import spark.components.ButtonBar;

[SkinState("minimized")]
[SkinState("minimizedDisabled")]
public class MinimizableButtonBar extends ButtonBar
{
    public function MinimizableButtonBar()
    {
        super();

        itemRendererFunction = defaultButtonBarItemRendererFunction;
    }

    [SkinPart(required="true", type="mx.core.IVisualElement")]
    public var middleButtonMinimized:IFactory;

    private var _minimized:Boolean;

    [Bindable]
    public function get minimized():Boolean
    {
        return _minimized;
    }

    public function set minimized(value:Boolean):void
    {
        if (_minimized == value)
            return;

        _minimized = value;
        invalidateSkinState();
        itemRendererFunction = defaultButtonBarItemRendererFunction;
    }

    override protected function getCurrentSkinState():String
    {
        if (_minimized)
            return enabled ? "minimized" : "minimizedDisabled";
        return super.getCurrentSkinState();
    }

    private function defaultButtonBarItemRendererFunction(data:Object):IFactory
    {
        var i:int = dataProvider.getItemIndex(data);
        if (i == 0)
            return firstButton ? firstButton : (_minimized ? middleButtonMinimized : middleButton);

        var n:int = dataProvider.length - 1;
        if (i == n)
            return lastButton ? lastButton : (_minimized ? middleButtonMinimized : middleButton);

        return (_minimized ? middleButtonMinimized : middleButton);
    }
}
}

したがって、このコードを使用すると、次の方法でカスタム スキンを宣言できます。

<?xml version="1.0" encoding="utf-8"?>
<s:Skin alpha.disabledGroup="0.5" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Metadata>[HostComponent("MinimizableButtonBar")]</fx:Metadata>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" stateGroups="disabledGroup" />
        <s:State name="minimized" stateGroups="minimizedGroup" />
        <s:State name="minimizedDisabled" stateGroups="disabledGroup,minimizedGroup" />
    </s:states>

    <fx:Declarations>
        <fx:Component id="firstButton">
            <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarFirstButtonSkin" />
        </fx:Component>
        <fx:Component id="middleButton">
            <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarMiddleButtonSkin" />
        </fx:Component>
        <fx:Component id="middleButtonMinimized">
            <s:ButtonBarButton skinClass="MinimazedButtonBarMiddleButtonSkin" />
        </fx:Component>
        <fx:Component id="lastButton">
            <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarLastButtonSkin" />
        </fx:Component>
    </fx:Declarations>

    <s:DataGroup height="100%" id="dataGroup" width="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1" />
        </s:layout>
        <s:layout.minimizedGroup>
            <s:VerticalLayout />
        </s:layout.minimizedGroup>
    </s:DataGroup>
</s:Skin>

これで問題が解決することを願っています。

また、最小化された状態が中央ボタンのスキンの変更のみに関するものである場合は、カスタム コンポーネントとスキンの両方からすべての状態関連コードを削除できます。

于 2011-04-16T14:45:54.937 に答える
0

最近、ボタン バーのスキニングに取り組んでいて、デフォルトの動作の一部を拡張/削除したいと考えていました。ButtonBar コードを拡張して上書きするか、コピーして貼り付けるのではなく、独自の最小限のコンポーネントを作成しました。

public class HButtonBarGroup extends HGroup {

    public function HButtonBarGroup() {
        addEventListener(ElementExistenceEvent.ELEMENT_ADD, refreshSkins);
        super();
        gap = -1;
    }

    private function refreshSkins(event : * = null) : void {
        var buttonCount : int = numElements;

        for (var i : int = 0; i < buttonCount; i++) {
            var button : Button = getElementAt(i) as Button;
            var skinClass : Class

            if ((buttonCount == 0) || (buttonCount > 2 && (i != 0 && i != buttonCount)))
                skinClass = GreyButtonBarMiddleButtonSkin;
            else if (i == 0)
                skinClass = GreyButtonBarFirstButtonSkin;
            else
                skinClass = GreyButtonBarLastButtonSkin;

            Button(getElementAt(i)).setStyle("skinClass", skinClass);
        }
    }
}

これにより、ButtonBar、ButtonBarBase、および ButtonBarSkin をつま先立ちすることなく、ほとんどのことを行うことができます。togglebutton/selectedIndex が必要でない限り、これらはすべて不要です。IMO では、MXML でボタンを宣言してハンドラーやその他のプロパティを割り当てるだけでなく、dataProvider に基づいてボタンを作成するのは面倒です。

于 2011-04-16T06:10:51.350 に答える
0

あなたがやろうとしていることを正確に理解していないかもしれませんが、私にはかなり明白で簡単に思えます. 最小化された状態がアクティブなときに、カスタム ボタン バー スキンで中央ボタンの状態を設定するだけです。

<s:Skin>

<s:states>
<s:State name="minimized" />
</s:states>

<s:ButtonBarButton currentState.minimized="someState" />

</s:Skin>

それを得る？

于 2011-04-16T19:44:28.757 に答える
0

最近、親の状態に基づいてコンポーネントのスキンを変更する必要がありました。CSS を使用して、HTML で使用したのと同じソリューションを使用しました。あなたの場合、次のようなものです：

s|ButtonBar:minimized s|ButtonBarButton {
    skinClass: ClassReference("CustomButtonBarSkin");
}
s|ButtonBarButton {
    skinClass: ClassReference("spark.skins.spark.ButtonBarMiddleButtonSkin");
}

:minimizedは疑似セレクター(状態用) です。

残念ながら、状態の変更時に親要素の styleName を変更しない限り、これは子 (バグ?) によって検出されないようです:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
    styleName.normal="foo" styleName.minimized="foo"
    >

たぶん、子に変更を反映させるために親の状態変更を呼び出す必要がある無効化メソッドがあるかもしれませんが、styleName を偽の何かに変更するだけでうまくいきました。

Flex 3 では基本的な CSS セレクターしかサポートされていなかったため、これは Flex で広く使用されている手法ではない可能性があります。

于 2011-04-16T18:07:42.453 に答える