上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




Flex3のViewStackを使ってアプリケーションでよくある会員登録の画面遷移部分を試してみたいと思います。
本サンプルはただ画面遷移するだけで、処理は何も入れてません。今後徐々に入れていこうかなと。


ViewStackを使った画面遷移


相互に積み重ねられたコンテナを相互に切り替えながら表示する際に使用します。
一度に1つのコンテナだけが表示され、切り替え方法は、ボタンなどのクリックイベントやActionScriptでロジックを生成します。

ViewStackタグ



<mx:ViewStack id="viewstack" width="288" height="119" selectedIndex="0">
</mx:ViewStack>


ViewStackの切り替え


ボタンなどのクリックイベントで下記コードを記載します。

<mx:Button label="入力確認" click="viewstack.selectedChild=view2;"/>


ViewStackを使った画面遷移サンプルソース



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="198" width="364">

<mx:ViewStack id="viewstack" width="288" height="119" selectedIndex="0">
<mx:Canvas id="view1" showEffect="WipeDown" hideEffect="WipeUp">
<!-- 入力項目 -->
<mx:Form width="100%" height="100%">
<mx:FormItem label="会員名" required="true">
<mx:TextInput id="txtName" width="150" maxChars="20" />
</mx:FormItem>
<mx:FormItem label="会員名(カナ)" required="true">
<mx:TextInput id="txtKana" width="150" maxChars="20" />
</mx:FormItem>

<mx:HBox>
<mx:Button label="入力確認" click="viewstack.selectedChild=view2;"/>
<mx:Button label="クリア" />
</mx:HBox>
</mx:Form>
</mx:Canvas>
<mx:Canvas id="view2" showEffect="WipeDown" hideEffect="WipeUp">
<!-- 入力項目 -->
<mx:Form width="100%" height="100%">
<mx:FormItem label="会員名">
<mx:Label id="lblName" width="150"/>
</mx:FormItem>
<mx:FormItem label="会員名(カナ)">
<mx:Label id="lblKana" width="150"/>
</mx:FormItem>

<mx:HBox>
<mx:Button label="登録" click="viewstack.selectedChild=view3;"/>
<mx:Button label="戻る" click="viewstack.selectedChild=view1;" />
</mx:HBox>
</mx:Form>
</mx:Canvas>

<mx:Canvas id="view3" showEffect="WipeDown" hideEffect="WipeUp">
<mx:Label text="会員登録が完了しました。" />
</mx:Canvas>
</mx:ViewStack>

</mx:Application>

ViewStackを使った画面遷移 動作サンプル




少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。