указатель ролика - PullRequest
Новая
       8

указатель ролика

1 голос
/ 13 марта 2011

Я использую панель вкладок spark и предоставил стек представлений в качестве поставщика данных ..... в стеке представлений есть n элементов ... и каждый элемент имеет панель ....

myкод будет что-то вроде этого .... 

<s:tabbar dataprovider = {viewstck-id}  height="100%" width="100%"/>
<viewstack id="viewstck-id">
<navigatorContent >
     <s:panel title="title - 1"/>
 </navigatorContent >
 <navigatorContent >
     <s:panel title="title - 2"/>
 </navigatorContent >\ 
 <navigatorContent >
     <s:panel title="title - 3"/>
 </navigatorContent >

Мое требование примерно так ... изначально панель вкладки выбора должна отображать свой собственный заголовок... предположим, что если мы находимся на вкладке-1, заголовок должен быть title-1 ... но когда мы наведем курсор мыши на tab-2, заголовок панели в tab-1 должен быть изменен на tittle-2, и еслиуказатель мыши находится на tab3, заголовок панели в tab-1 должен быть изменен на tittle-3, а при развертывании он должен быть заменен на заголовок панели выбранной вкладки, т.е. title-1 .... и таким же образом он должен работать длявсе вкладки .....

Так есть ли способ получить rollOverIndex для вкладки Или кто-нибудь, пожалуйста, предоставьте мне решение.

- Спасибо, Red

Ответы [ 2 ]

0 голосов
/ 02 декабря 2014

С помощью Spark TabBar вы можете попробовать добавить прослушиватель событий на MouseEvent.MOUSE_OVER и затем проверить event.target.label , чтобы получить имя вкладки и событие. target.itemIndex для индекса вкладки, над которой наведена мышь.

0 голосов
/ 14 марта 2011

Что ж, моя идея - использовать подкласс ItemRenderer для обработки события roll_over и получения индекса элемента.По умолчанию средство визуализации элементов TabBar представляет собой класс ButtonBarButton со скином TabBarButtonSkin.и класс ButtonBarButton имеет свойство itemIndex.Давайте сделаем это:

---> код для MyButtonBarItemRenderer.mxml 

<?xml version="1.0" encoding="utf-8"?>
<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"
                creationComplete="creationCompleteHandler(event)"
                skinClass="spark.skins.spark.TabBarButtonSkin"
                >
    <fx:Script>
        <![CDATA[
            import events.MyTabBarEvent;

            import mx.events.FlexEvent;

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                this.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
            }

            private function rollOverHandler(e:MouseEvent) : void
            {
                var tbe:MyTabBarEvent = new MyTabBarEvent(MyTabBarEvent.ITEM_ROLL_OVER, true);
                tbe.itemIndex = this.itemIndex;
                dispatchEvent(tbe);
            }
        ]]>
    </fx:Script>
</s:ButtonBarButton>

Здесь мы используем пользовательское событие со свойством itemIndex:

---> код дляMyTabBarEvent.as помещен в пакет 'events' 

package events
{
    import flash.events.Event;

    public class MyTabBarEvent extends Event
    {
        public static const ITEM_ROLL_OVER:String = "MyTabBarEvent.ItemRollOver";

        public var itemIndex:int;

        public function MyTabBarEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
    }
}

Все, что нам теперь нужно сделать, это обработать наше пользовательское событие в нашем приложении:

---> код для приложения 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="creationCompleteHandler(event)"
               >

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import events.MyTabBarEvent;

            import mx.events.FlexEvent;

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                tabBar.addEventListener(MyTabBarEvent.ITEM_ROLL_OVER, itemRollOverHandler);
            }

            protected function itemRollOverHandler(e:MyTabBarEvent) : void
            {
                trace ("Item " + e.itemIndex + " roll over event handled");
                tabBar.selectedIndex = e.itemIndex;
            }

        ]]>
    </fx:Script>


    <s:VGroup>
        <s:TabBar id="tabBar" dataProvider="{viewstckId}" width="100%" itemRenderer="MyButtonBarItemRenderer"/>
        <mx:ViewStack id="viewstckId">
            <s:NavigatorContent label="Title 1">
                <s:Panel title="title - 1"/>
            </s:NavigatorContent >
            <s:NavigatorContent label="Title 2">
                <s:Panel title="title - 2"/>
            </s:NavigatorContent> 
            <s:NavigatorContent label="Title 3">
                <s:Panel title="title - 3"/>
            </s:NavigatorContent>
        </mx:ViewStack>
    </s:VGroup>
</s:Application>
...