Сделать вкладку мигать в Spark (Flex) - PullRequest
Новая
       41

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

2 голосов
/ 22 марта 2011

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

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

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

1 Ответ

3 голосов
/ 23 марта 2011

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

...