2

Flex 4 アプリ (Spark コンポーネントを使用) には、ViewStackさまざまな画面があり、TabBarそれらの間を移動するための があります。画面で何かが発生したときにタブを「点滅」できるようにしたいと思います（Windowsのタスクバーボタンなど）。

これどうやってするの？私の考えは、点滅時に*labelを入れて画面 (NavigatorContent から継承)に点滅状態をハックし、カスタム タブ バー スキンでそれを読み取ることです。

もっと簡単な方法はありますか？今なら、どのように正確に実装できますか?

4

1 に答える 1

3

これは簡単なことではないので、説明するのは少し難しいですが、最善を尽くします。ビュースタック内のすべてのビューの配列の dataProvider を使用して作成<s:TabBar />し、TabBar のカスタム アイテム レンダラーを作成します。これには、双方向バインドされた点滅プロパティとカスタム スキンを持つ ButtonBarButton を拡張するカスタム コンポーネントが含まれます。次のように点滅させます: (一口でした男)

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:local="*">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
        ]]>
    </fx:Script>
    <s:TabBar dataProvider="{new ArrayList([view1,view2])}">
        <s:itemRenderer>
            <fx:Component>
                <local:BlinkingTab label="{data.label}" blink="@{data.isBlinking}" skinClass="BlinkingTabSkin" />
            </fx:Component>
        </s:itemRenderer>
    </s:TabBar>
    <mx:ViewStack>
        <local:Foo id="view1" label="View 1" />
        <local:Foo id="view2" label="View 2" />
    </mx:ViewStack>
</s:Application>

この場合、私のビューは 'NavigatorContent' を拡張しますが、次のように、タブを点滅させる必要があることを示すブール値フラグを表現できる必要があります。

<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         implements="ITabView">
    <fx:Script>
        <![CDATA[
            private var _blink:Boolean = false;

            [Bindable]
            public function get isBlinking():Boolean
            {
                return this._blink;
            }

            public function set isBlinking(value:Boolean):void
            {
                this._blink = value;
            }
        ]]>
    </fx:Script>
</s:NavigatorContent>

ビューが ITabView を実装していることに気付くでしょう。これは「isBlinking」プロパティを型指定するためだけのものですが、オプションです。タブを点滅させたい場合は、これを「true」に設定するだけです。しかし今、タブを実際に点滅させる必要があります。TabBar 用に作成したカスタム コンポーネント 'BlinkingTab' では、blink プロパティを取り込んで、スキンの状態を次のように適切に変更する必要があります。

<s:ButtonBarButton xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            private var _blink:Boolean;

            [Bindable]
            public function get blink():Boolean
            {
                return this._blink;
            }

            public function set blink(value:Boolean):void
            {
                this._blink = value;
            }

            override protected function getCurrentSkinState():String
            {
                if(!selected && enabled && this._blink)
                {
                    return super.getCurrentSkinState()+'Blinking';
                }else{
                    return super.getCurrentSkinState();
                }
            }

            override protected function mouseEventHandler(event:Event):void
            {
                super.mouseEventHandler(event);
                if(event.type == MouseEvent.CLICK)
                {
                    blink = false;
                }
            }
        ]]>
    </fx:Script>
</s:ButtonBarButton>

有効になっていて選択されていない場合、スキンの状態には「点滅」文字列のみが表示されることに気付くでしょう。選択されている場合、点滅しません。ユーザーがタブをクリックすると、ビューに反映される点滅フラグが削除されます（この部分についてはよくわかりませんが、常に「選択された」プロパティなどをオーバーライドする可能性があります）。そして最後の部分は皮膚です。タブに点滅アニメーションを追加できるように、カスタム スキンを作成する必要があります。TabBarButtonSkin を使用する ButtonBarButton ホスト コンポーネントで新しいスキンを作成し、次の新しい状態を追加するだけです。

<s:State name="upBlinking" basedOn="up" stateGroups="blinking" />
<s:State name="overBlinking" basedOn="over" stateGroups="blinking" />
<s:State name="downBlinking" basedOn="down" stateGroups="blinking" />

ここから、独自の状態ベースの点滅を作成する必要があります。これは完全にテストされたわけではありませんが、私はあなたが 95% の道のりを歩むのを助けたと思います. お役に立てれば。

ところで、この方法は 100% 合法です。ハッキングは不要で、コードのすべての部分を別の場所で再利用できます:)

于 2011-03-23T17:56:13.827 に答える