Flex3でTabNavigatorを使ってみる

Adobe® Flex™ 3.2 リファレンスガイドAdobe Flex 3 Component Explorerなどを参考に,flex3で,TabNavigatorを使ってみた.

やりたかったこと
ディレクトリ構成
  • MyFlex ディレクトリ
    • MyTabNavi.mxml mxmlファイル
    • TabNaviAS.as asファイル
つまづいたこと
  • mxmlファイルの先頭の文の意味を理解していないので,いろいろ苦労した.
    • xmlnsに気をつける
    • Packageに気をつける
  • mxmlファイルのinitApp()関数を,下記のようにしたら,実行時エラーだった.
private function initApp():void {
    initTabA();
    initTabB();
    initTabC();
}
    • なんで,実行時エラーなのかが,未だに分からない.
    • 作成したコードでは,最初に全部のインスタンスを作るのではなく,IndexChangedEventを拾うようにして,タブが選択されたら,そこで使用するインスタンスを作成するようにした.
ソースコード

以下に作成したソースコードを記す.

  • MyTabNavi.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:myTab="MyFlex.*" creationComplete="initApp()">
    <mx:TabNavigator id="tab" width="100%" height="100%">
        <mx:Script>
            <![CDATA[
            import mx.events.IndexChangedEvent;
            import MyFlex.TabBarAS;
			
            private var a:TabBarAS;
            private var b:TabBarAS;
            private var c:TabBarAS;

            private function initApp():void {
                initTabA();
                tab.addEventListener(IndexChangedEvent.CHANGE, function(evt:IndexChangedEvent):void {
                    switch(tab.selectedIndex) {
                    case 0:
                        if(a==null) initTabA();
                        break;

                    case 1:
                        if(b==null) initTabB();
                        break;

                    case 2:
                        if(c==null) initTabC();
                        break;
                    }
                    trace(tab.selectedIndex);
                    trace(evt);
                });
            }
            ]]>
        </mx:Script>
        <mx:VBox label="A" width="100%" height="100%">
            <mx:UIComponent id="tabA" width="100%" height="100%">
                <mx:Script>
                    <![CDATA[
                    private function initTabA():void {
                        a = new TabBarAS(0xff0000);
                        tabA.addChild(a);
                    }
                    ]]>
                </mx:Script>
            </mx:UIComponent>
        </mx:VBox>
        <mx:VBox label="B" width="100%" height="100%">
            <mx:UIComponent id="tabB" width="100%" height="100%">
                <mx:Script>
                    <![CDATA[
                    private function initTabB():void {
                        b = new TabBarAS(0x00ff00);
                        tabB.addChild(b);
                    }
                    ]]>
                </mx:Script>
            </mx:UIComponent>
        </mx:VBox>
        <mx:VBox label="C" width="100%" height="100%">
            <mx:UIComponent id="tabC" width="100%" height="100%">
                <mx:Script>
                    <![CDATA[
                    private function initTabC():void {
                        c = new TabBarAS(0x0000ff);
                        tabC.addChild(c);
                    }
                    ]]>
                </mx:Script>
            </mx:UIComponent>
        </mx:VBox>
    </mx:TabNavigator>
</mx:Application>
  • TabNaviAS.as
package MyFlex
{
	import flash.events.MouseEvent;
	import flash.display.Sprite;
	
	public class TabNaviAS extends Sprite {
		public function TabNaviAS(color:uint) {
			graphics.beginFill(color);
			graphics.lineStyle(1, color);
			graphics.drawCircle(10, 10, 10);
			graphics.endFill();
			addEventListener(MouseEvent.MOUSE_DOWN, function(evt:MouseEvent):void {
				startDrag();
			});
			addEventListener(MouseEvent.MOUSE_UP, function(evt:MouseEvent):void {
				stopDrag();
			});
		}
	}
}