Flex 4 マスターシリーズ #03 Flex 4 ステート
作成日
28 March 2010
ページ ツール |
必要条件
ユーザーレベル
すべて
必要な製品
- Flash Builder 4 (Download trial)
Flex 4 マスターシリーズ 連載記事一覧
- #01 MXML 2009
- #02 Flash Builder 4 新機能
- #03 Flex 4 ステート
- #04 Flex 4 CSS
- #05 Spark コンポーネント
- #06 データ中心型開発（DCD） Part1
- #07 Spark Skining part 1
- #08 Spark Skining part 2
- #09 Flex 4 エフェクト
- #10 Flex 4 Spark Layouts
- #11 FlexUnit 4
- #12 データ中心型開発（DCD）Part2
はじめに
このチュートリアルでは、Flex 4 から新しく採用されたステート構文について紹介します。
新機能解説
ステート固有のコンポーネントインスタンス ( サンプルプロジェクト : StateSpecificComponentInstancesSample.fxp )
ステート専用の MXML 属性 includeIn と excludeFrom が採用されました。この属性は、MXML 上でのみ使用することが可能で、コンパイラによって予約語のキーワードとして扱われます。
<s:states>
<mx:State name="default" />
<mx:State name="aState" />
<mx:State name="bState" />
</s:states>
<mx:HBox>
<mx:Button click="currentState='default'" />
<mx:Button click="currentState='aState'" />
<mx:Button click="currentState='bState'" />
</mx:HBox>
<s:Button id="defaultButton" />
<s:Button id="aStateButton" includeIn="aState, bState" />
<s:Button id="bStateButton" excludeFrom="bState" />
サンプルコード 01. includeIn 属性と excludeFrom 属性の使用例
includeIn 属性は、コンポーネントインスタンスを表示させたい、定義済みのステート名を指定することができます。カンマ区切りで複数のステートを指定することもできます。excludeFrom 属性は、includeIn 属性とは逆に、コンポーネントインスタンスを非表示にさせたい定義済みのステート名を指定することができ、同様にカンマ区切りで複数指定することもできます。
アプリケーションのステートを切り替えるときには、アプリケーションの currentState プロパティにステート名を指定します。
サンプルコード 01. の例では、アプリケーションのステートが default のときには、defaultButton と bStateButton が表示されます。ステートを aState に切り替えると、aStateButton が表示されます。bState に切り替えると、表示されていた bStateButton が非表示になります。
サンプル 01 : StateSpecificComponentInstancesSample.swf
ステート固有の MXML プロパティ値 サンプルプロジェクト : StateSpecificPropertyValuesSample.fxp
MXML コンポーネントのプロパティに対して、ステート単位で値を定義することができるようになりました。記法は「ドット」記法を用いて以下のように定義します。
<namespace:componentName <<プロパティ名>>.<<ステート名>>="<<プロパティ値>>" />
MXML プロパティは、コンポーネントプロパティ、イベント、エフェクト、スタイルに適応できます。具体的には以下のようになります。
<s:states>
<mx:State name="default" />
<mx:State name="aState" />
<mx:State name="bState" />
</s:states>
<mx:HBox>
<mx:Button click="currentState='default'" />
<mx:Button click="currentState='aState'" />
<mx:Button click="currentState='bState'" />
</mx:HBox>
<s:Button width="300" height="100" label="Button A" />
<s:Button width="300" height="100" label="Button B" />
<s:Button
id = "targetButton"
width = "300"
height = "100"
color.aState = "#990000"
color.bState = "#000099"
label.aState = "Button C (aState)"
label.bState = "Button C (bState)"
includeIn = "aState, bState"
/>
サンプルコード 02. ステート固有の MXML プロパティに値を定義する例
サンプルコード 02. の例では、アプリケーションのステートが default のときには、defaultButton と bStateButton が表示されます。ステートを aState に切り替えると、targetButton が表示されます。同時にボタンのラベルの文言が「Button C (aState)」へと変わり、文字色も赤色 (#990000) に変わります。bState に切り替えると、targetButton が非表示の場合は表示されて、同時にボタンのラベルの文言が「Button C (bState)」へと変わり、文字色も青色 (#000099) に変わります。
サンプル 02 : StateSpecificPropertyValuesSample.swf
ステートグループ サンプルプロジェクト : StateGroupsSample.fxp
複数のステートを、ステートグループとして、まとめて定義できるようになりました。
具体的には以下のようになります。
<s:states>
<mx:State name="default" />
<mx:State name="aState" stateGroups="Group1" />
<mx:State name="bState" stateGroups="Group1" />
<mx:State name="cState" stateGroups="Group2" />
<mx:State name="dState" stateGroups="Group1" />
</s:states>
サンプルコード 03. ステートグループを定義する例
ステートグループは、State 要素の stateGroups プロパティに任意の文字列を定義することによって指定できます。サンプルコード 03. の例では、aState, bState, cState, d,State の 4 つのステートに対して、Group1, Group2 の 2 つのステートグループを定義しています。(Group1 ステートグループには、aState, bState, dState が属し、Group2 ステートグループには、cState が属します )
定義済みのステートグループは、ステート名と同じように使用することができます。前述のincludeIn 属性や excludeFrom 属性に対して指定したり、MXML コンポーネントのプロパティに対して、ステートグループ単位で値を定義したりできます。
なお、Flash Builder 4 では、これらのコードを補完することができます。
具体的なコードと結果は以下のようになります。
<s:states>
<mx:State name="default" />
<mx:State name="aState" stateGroups="Group1" />
<mx:State name="bState" stateGroups="Group1" />
<mx:State name="cState" stateGroups="Group2" />
<mx:State name="dState" stateGroups="Group1" />
</s:states>
<mx:HBox>
<mx:Button click="currentState='aState'" />
<mx:Button click="currentState='bState'" />
<mx:Button click="currentState='cState'" />
<mx:Button click="currentState='dState'" />
</mx:HBox>
<s:Button
id = "targetButton"
color.Group1 = "#990000"
color.Group2 = "#000099"
label.default = "default"
label.Group1 = "a, b, d State"
label.Group2 = "c State"
/>
<s:Button
id = "group2Button"
includeIn = "Group2"
click = "currentState='default'"
/>
サンプルコード 04. ステートグループの使用例
サンプル 03 : StateGroupsSample.swf
アイテムの生成と破棄のポリシー サンプルプロジェクト : ItemCreationAndDestructionPolicySample.fxp
ステート固有のインスタンスの生成と破棄のポリシーを定義するために、ステート専用の MXML 属性 itemCreationPolicy と itemDestructionPolicy が採用されました。これらの属性も、includeIn, excludeFrom 属性と同じく、MXML 上でのみ使用することが可能で、コンパイラによって予約語のキーワードとして扱われます。
<s:states>
<mx:State name="default" />
<mx:State name="showState" />
</s:states>
<mx:HBox>
<mx:Button click="currentState='default'" />
<mx:Button click="currentState='showState'" />
</mx:HBox>
<s:Button
id = "immediateButton"
label = "Immediate Button"
includeIn = "showState"
itemCreationPolicy = "immediate"
itemDestructionPolicy = "never"
/>
<s:Button
id = "deferredButton"
label = "Deferred Button"
includeIn = "showState"
itemCreationPolicy = "deferred"
itemDestructionPolicy = "auto"
/>
サンプルコード 05. ステート固有のインスタンスの生成と破棄のポリシーを定義する例
itemCreationPolicy 属性と itemDestructionPolicy 属性は、どちらも includeIn 属性または、excludeFrom 属性と併せて使用します。
itemCreationPolicy 属性は、アイテムの生成ポリシーを定義する属性で、指定できる値は、 “deferred” ( デフォルト値 ) または “immediate” です。“deferred” を定義した場合、定義元コンポーネントは、インスタンス化される必要が来るタイミングまで初期化を遅延します。“immediate” を定義した場合は、定義元のコンポーネントの状態を問わずに初期化します。
itemDestructionPolicy 属性は、アイテムの破棄ポリシーを定義する属性で、指定できる値は、 “never” ( デフォルト値 ) または “auto” です。“never” を定義した場合、ステート固有のインスタンスは、状態を問わずに無期限にキャッシュされます。 “auto” を定義した場合は、ステートが切り替わり、対象ステート固有のインスタンスが非表示になったときに、DOM、すべてのドキュメントおよび、フレームワークから参照を消去され、インスタンスが破棄されます。
サンプルプロジェクトの画面について説明します。
アプリケーションを起動したとき、immediateButton と deferredButton は、どちらも非表示状態ですが、immediateButton はitemCreationPolicy の値を "immediate" に指定しているため、初期化されます。( 図 14.)
アプリケーションのステートを showState に切り替えたとき、itemCreationPolicy の値を " deferred" に指定していた deferredButton は、このタイミングで初期化されます。( 図 15.)
アプリケーションのステートを default に戻し、 immediateButton と deferredButton を非表示状態に戻します。( 図 16.)
再度、ステートを showState に切り替えます。このとき、 itemDestructionPolicy の値を " auto" に指定していた deferredButton が、初期化されたことが確認できます。これは、さきほどアプリケーションのステートを default に戻したとき、deferredButton の参照とインスタンスが破棄されたことを意味します。なお、itemDestructionPolicy の値を " never" に指定していた immediateButton は、キャッシュされているため、deferredButton のように初期化はされません。
サンプル 04 : ItemCreationAndDestructionPolicySample.swf
おわりに
以上が Flex 4 から採用された新しいステート構文でした。
Flex 3 以前は、MXML 上にハードコーディングしなければならなかったステートの設定が、大幅に改良されシンプルになったことに気付いていただけたかと思います。
これらのチュートリアル、サンプルコードを試すことによって、Flex 4 アプリケーションの表現の幅を、より広げることができるでしょう。
