Make a tab blink in Spark (Flex)

In a Flex 4 app (with Spark components) I have a ViewStack with various screens, and a TabBar to navigate between them. I'd like the screens to be able to "blink" their tab when something happens in them (like Windows task bar buttons).

How can I do this? My idea is to hack the blinking state into the screen's label (inherited from NavigatorContent) by putting a * in it when blin开发者_JS百科king, and somehow reading that in a custom tab bar skin.

Is there an easier way? If now, how exactly can I implement mine?

This is a bit hard to explain since it isn't the easiest thing to do, but I'll give it my best. I would create a <s:TabBar /> with a dataProvider of an array of all views in your viewstack and create a custom item renderer for your TabBar which then contains a custom component that extends ButtonBarButton that has a blinking property that's 2-way binded and a custom skin to actually show it blinking, like this: (man that was a mouthful)

<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>

In this case, my views extends 'NavigatorContent', however, we need to be able to express a boolean flag to say that the tab needs to blink, like so:

<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>

You'll notice that the view is implementing ITabView. That's only there for typesafing the 'isBlinking' property, but it's optional. When you want your tab to blink, you just need to set this to 'true'. But now we need to get the tab to actually blink. In the custom component 'BlinkingTab' we created for the TabBar, we need to take in the blink property and change the skin state appropriately like so:

<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>

You'll notice that the skin state will only have the 'blinking' string on it if it's enabled and not selected. If it is selected, it won't blink; and if the user clicks on the tab, it will remove the blinking flag which should propagate back to the view (I'm not certain about this part, could always override the 'selected' property or something). And the last part is the skin; you need to create a custom skin so that you can add a blinking animation to your tab. Just create a new skin with a ButtonBarButton host component that uses the TabBarButtonSkin and add these new states:

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

From here, you need to create your own state based blinking. This is not fully tested, but I think I helped you get 95% of the way. Hope this helps.

BTW, this method is 100% legit. No hacking and you can reuse every single part of the code for somewhere else :)