ページ遷移 - ひがやすを技術ブログ

Flexでページ遷移を実現するにはどうしたらよいのでしょうか。ViewStackを使うのがいちばん簡単です。
ViewStackとは、コンポーネントを格納するためのコンテナで、複数コンポーネントを登録できますが、表示するのは現在選択中のものだけです。その性質を利用して、ViewStackに複数のページを登録しておいて、選択するページを変えることでページ遷移を実現します。
最初のページのコンポーネントを作成します。

Page1.mxml



<mx:Panel xmlns:mx="http://www.macromedia.com/2003/mxml"

  width="400" height="400" title="Page1">

  <mx:ControlBar>

    <mx:Button label="Goto Page2"/>

  </mx:ControlBar>

</mx:Panel>

まだ、ページ遷移のロジックは組み込みません。同様にして、次のページを作成します。

Page2.mxml



<mx:Panel xmlns:mx="http://www.macromedia.com/2003/mxml"

  width="400" height="400" title="Page2">

  <mx:ControlBar>

    <mx:Button label="Goto Page1"/>

  </mx:ControlBar>

</mx:Panel>

これらのページを格納するViewStackを持つ、メインのアプリケーションを作成します。

MyApp.mxml



<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

  <mx:ViewStack id="viewStack" changeEffect="Fade">

    <Page1 id="page1" xmlns="*"/>

    <Page2 id="page2" xmlns="*"/>

  </mx:ViewStack>

</mx:Application>

他のコンポーネント(ページ)を組み込むのは簡単です。MXMLのファイル名をタグ名にするだけです。同一のディレクトリのコンポーネントを参照するには、xmlns属性に*を設定します。
これで雛型ができました。
Page1のボタンのclick属性に次のスクリプトを記述します。

parentDocument.viewStack.selectedChild = parentDocument.page2

Page1.mxmlのparentDocumentは、MyApp.mxmlです。このようにして、親のドキュメントを参照します。あとは、ViewStack.selectedChildプロパティを書き換えるだけです。
同様にして、Page2のボタンに処理を追加すると、ページ遷移ができるようになります。