1

私はスパークタブバーを使用しており、データプロバイダーとしてビュースタックを与えました...ビュースタックにはn個の要素があります...そして各要素にはパネルがあります....

私のコードは次のようなものになります....

<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にいる場合、タイトルはタイトル-1である必要があります...しかし、ロールオーバーするとマウスがタブ 2 にある場合、タブ 1 のパネルのタイトルはタイトル 2 に変更する必要があります。マウスがタブ 3 にある場合は、タブ 1 のパネルのタイトルをタイトル 3 に変更し、ロールアウト時に変更する必要があります。選択したタブのパネルのタイトル、つまり title-1 に変更されます....同様に、すべてのタブで機能するはずです.....

タブのrollOverIndexを取得する方法はありますか、または誰かが私に解決策を提供してください。

-- サンクス・レッド

4

2 に答える 2

0

私の考えは、ItemRendererサブクラスを使用してroll_overイベントを処理し、アイテムインデックスを取得することです。デフォルトでは、TabBarアイテムレンダラーはTabBarButtonSkinスキンを持つButtonBarButtonクラスです。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プロパティでカスタムイベントを使用しています。

--->「events」パッケージに配置されたMyTabBarEvent.asのコード

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>
于 2011-03-14T08:33:10.733 に答える