Flex入門～ビューステート編～だじぇ

もう4月なのに、この寒さ((((；ﾟДﾟ)))

さて、今回は「ビューステート（ViewState）」のセクションでした。

ビューステートは動的に見た目を変えるための機能だそうです。

操作中に画面の表示状態を切り替えることはよくあります。

そこで、あらかじめいくつかの「状態」を用意して置き、マウスの操作やキー操作、

ボタンのクリックのイベントで切り替えるようにしておきます。

そのあらかじめ用意しておく状態が「ビューステート」です。

と、ここまでは「ふーん」といった感じで流し読み。

ただ、ここでふと「別にvisible属性とか使えば、ビューステートとか用意しなくてもいいんでないの？これを使うと何かいいことあるのかな？」と思い、とりあえずサンプルを参考にしてソースをカキカキ。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:states>
    <!-- 登録用ビューステート -->
    <mx:State name="Regitster">
      <!-- タイトルを「ユーザ情報」に変更 -->
      <mx:SetProperty target="{loginPanel}" name="title" value="ユーザ登録" />
      
      <!-- 「パスワード確認」テキストボックスを追加 -->
      <mx:AddChild relativeTo="{loginForm}" position="lastChild">
        <mx:FormItem label="パスワード確認">
          <mx:TextInput displayAsPassword="true" width="300" />
        </mx:FormItem>
      </mx:AddChild>
      
      <!-- コントロールバーのリンクとボタンを削除 -->
      <mx:RemoveChild target="{registerLink}" />
      <mx:RemoveChild target="{loginBtn}" />
      
      <!-- コントロールバーに「登録」「キャンセル」ボタンを追加 -->
      <mx:AddChild relativeTo="{ctrlBar}" position="lastChild">
        <mx:HBox>
          <mx:Button id="regBtn" label="登録" width="120" />
          <mx:Button id="cancelBtn" label="キャンセル" click="currentState=''" width="120" />
        </mx:HBox>
      </mx:AddChild>
    </mx:State>
  </mx:states>
  
  <mx:Panel title="ログインフォーム" id="loginPanel">
    <mx:Form id="loginForm">
      <mx:FormItem label="ユーザID">
        <mx:TextInput width="300" />
      </mx:FormItem>
      <mx:FormItem label="パスワード">
        <mx:TextInput displayAsPassword="true" width="300" />
      </mx:FormItem>
    </mx:Form>
    <mx:ControlBar id="ctrlBar">
      <mx:LinkButton id="registerLink" label="ユーザ登録" textDecoration="underline" click="currentState='Regitster'" />
      <mx:Spacer width="100%" />
      <mx:Button id="loginBtn" label="ログイン" width="120" />
    </mx:ControlBar>
  </mx:Panel>
</mx:Application>

currentStateプロパティにビューステート名（Stateタグのnameプロパティ値）を指定することで全体が変更。

元に戻すときは、空文字列を指定すればデフォルトのビューステートに戻る。

なるほど。「元に戻す」部分のコード書かなくていいのね。

それだけでも楽になることはありそう。

切り替え時にコンポーネントを追加する場合は、切り替えるタイミングでコンポーネント作成しようとするみたいなので、切り替え前に作成しておいて差し替えるような書き方をしたほうが良さげ。

まあ、場合によりけりだと思うけど。

結論：これは使い勝手がありそうな機能。