Сделать вкладку мигать в Spark (Flex)

Question

В приложении Flex 4 (с компонентами Spark) у меня есть ViewStack с различными экранами и TabBar перемещаться между ними. Мне бы хотелось, чтобы экраны могли "мигать" своей вкладкой, когда в них что-то происходит (например, кнопки панели задач Windows).

Как я могу это сделать? Моя идея взломать мигающее состояние на экране label (унаследовано от NavigatorContent), поместив в него *, когда моргает, и каким-то образом считав это в пользовательской оболочке панели вкладок.

Есть ли более простой способ? Если сейчас, как именно я могу реализовать мой?

Answer 1

Это немного сложно объяснить, поскольку это не самая легкая вещь, но я сделаю все возможное. Я бы создал <s:TabBar /> с помощью dataProvider массива всех представлений в вашем стековом представлении и создания настраиваемого средства визуализации элементов для вашего 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". Но теперь нам нужно заставить вкладку на самом деле мигать. В пользовательском компоненте BlinkingTab, который мы создали для TabBar, нам нужно взять свойство 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>

Вы заметите, что состояние скина будет иметь "мигающую" строку, если оно включено и не выбрано. Если он выбран, он не будет мигать; и если пользователь нажимает на вкладку, он удаляет мигающий флаг, который должен распространяться обратно к представлению (я не уверен насчет этой части, всегда может переопределить свойство selected) или что-то в этом роде). И последняя часть - кожа; вам нужно создать собственный скин, чтобы вы могли добавить мигающую анимацию на вашу вкладку. Просто создайте новый скин с хост-компонентом ButtonBarButton, который использует TabBarButtonSkin, и добавьте эти новые состояния:

<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% законным. Нет взлома, и вы можете использовать каждую часть кода где-то еще:)