自分の様に Flash 開発に慣れている場合、Flash の時間軸の概念に基づいて画面遷移やコンテンツの切り替えを行う。簡単に言えば、ログインは frame1、メインコンテンツは frame2、ログアウトは frame3 にそれぞれ gotoAndStop() しフレームを移動させることによって画面遷移を行う。
しかし、Flex の開発になった途端、結構な Flash をやる方はこの時間軸の考えが無くなり少し混乱することがあるんじゃないか。最近、自分は会社で本格的に AIR アプリ制作と、その他個人で Flex 開発をしていて、少なからずこのポイントで悩んだのでメモ。
色々と検索してみると、同様な記事が FXUG にありました。
・記事１
・記事２
全く分からなかった時は ActionScript で制御するのか、でも凄い効率悪いし Flex Framework を使っている意味無いしとか感じていましたが、ViewStack ですべてのモヤモヤが解消されました。他にも SWFLoader の方法もありますが、個人的には ViewStack が今回の用途に合っていたのでこっちを使用してみた。
ViewStack サンプル図
基本的なソースは下記の通り。
これでポジションとか細かい設定を気にせず、MouseEvent に基づいて ViewStack 内の切り替えが自由になる。
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="ViewStack サンプル" width="500" height="300" paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5">
<mx:HBox width="100%" horizontalAlign="center">
<mx:Button label="ログイン" click="myViewStack.selectedChild=login" />
<mx:Button label="メイン" click="myViewStack.selectedChild=main" />
<mx:Button label="ログアウト" click="myViewStack.selectedChild=logout" />
</mx:HBox>
<mx:ViewStack id="myViewStack" width="100%" height="100%" borderColor="#000000" borderStyle="solid" creationPolicy="auto">
<mx:Canvas id="login" width="100%" height="100%" backgroundColor="#FFFFCC">
<mx:Label text="ここはログインエリアです！" />
</mx:Canvas>
<mx:Canvas id="main" width="100%" height="100%" backgroundColor="#CCFFFF">
<mx:Label text="ここはメインエリアです！" />
</mx:Canvas>
<mx:Canvas id="logout" width="100%" height="100%" backgroundColor="#FFCCFF">
<mx:Label text="ここはログアウトエリアです！" />
</mx:Canvas>
</mx:ViewStack>
</mx:Panel>
</mx:Application>
もっと汎用性を持たせるなら、mx:Canvas 部分それぞれをクラス化して管理すると、開発効率や修正作業が断然上がりますね！
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:ns1="*">
<mx:Panel title="ViewStack サンプル" width="500" height="300" paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5">
<mx:HBox width="100%" horizontalAlign="center">
<mx:Button label="ログイン" click="myViewStack.selectedChild=login" />
<mx:Button label="メイン" click="myViewStack.selectedChild=main" />
<mx:Button label="ログアウト" click="myViewStack.selectedChild=logout" />
</mx:HBox>
<mx:ViewStack id="myViewStack" width="100%" height="100%" borderColor="#000000" borderStyle="solid" creationPolicy="auto">
<ns1:Canvas1 id="login" />
<ns1:Canvas2 id="main" />
<ns1:Canvas3 id="logout" />
</mx:ViewStack>
</mx:Panel>
</mx:Application>
