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(); }
ソースコード
以下に作成したソースコードを記す.
- 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(); }); } } }