做一个标签闪烁的火花（Flex的） [英] Make a tab blink in Spark (Flex)

问题描述

在一个Flex 4应用程序（与Spark组件）我有一个 ViewStack的与各种屏幕和的TabBar 它们之间进行导航。我想的屏幕，能够眨眼的标签，当事情发生在他们（如Windows任务栏按钮）。

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

我怎样才能做到这一点？我的想法是把一个 * 在它闪烁时，并以某种方式读取该破解闪烁状态到屏幕的标签（从NavigatorContent继承）在自定义标签栏的皮肤。

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 blinking, and somehow reading that in a custom tab bar skin.

有没有更简单的方法？如果现在，究竟我可以实现我的吗？

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

推荐答案

这是一个有点难以解释，因为它不是最容易做的事情，但我会给我最好的。我想创建一个＆LT; S：的TabBar /＆GT; 与您的ViewStack的所有意见的数组的dataProvider，并将创建一个自定义项目渲染你的TabBar然后包含自定义组件扩展ButtonBarButton，有一个闪烁的属性是2路绑定和一个自定义皮肤，以实际显示它闪烁，就像这样： （男人，这是一个拗口）

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>

在这种情况下，我的观点扩展了NavigatorContent，但是，我们需要能够EX preSS一个布尔标志说，标签需要闪烁，像这样：

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>

您会发现，认为正在实施ITabView。这只是那里typesafing的isBlinking属性，但它是可选的。如果你希望你的标签闪烁，你只需要设置为真。但现在我们需要得到的标签，以实际闪烁。在自定义组件BlinkingTab我们为的TabBar创建，我们需要采取眨眼财产，并适当改变皮肤状态，像这样：

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>

您会发现，皮肤状态将只在其上的闪烁的字符串，如果它的启用，而不是选择。如果它被选中，也不会闪烁;如果用户点击选项卡上，它会删除闪烁的标志，应该传播回视图（我不能确定这部分，总是可以覆盖'选择'属性或某事）。和最后部分是皮肤;你需要创建一个自定义皮肤，使您可以添加一个闪烁的动画到你的标签。只需创建一个新的皮肤与使用TabBarButtonSkin一个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" />

在这里，你需要创建一个基于闪烁自己的状态。这不完全测试，但我想我帮你获得95％的样子。希望这有助于。

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.

顺便说一句，这种方法是100％合法。没有黑客，你可以重复使用的code的每一个部分，用于其他地方：）

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

这篇关于做一个标签闪烁的火花（Flex的）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！