Flex 4 マスターシリーズ #01 MXML 2009
必要条件
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 の新機能であるMXML 2009をMXML 2006と比較しながら、追加された言語タグ、ビルドインタグとそれらの属性を紹介します。
MXML 2009
今までのFlexでは、MXML 2006が使われていました。Flex 4からは、MXML 2009を使用します。MXML 2009は、MXML 2006の基本的な文法と言語タグとビルドインクラスタグを引き継いでいます。しかしながら、MXML 2009において変更点があります。まずは、その変更点の一つであるネームスペースから紹介していきます。
このチュートリアルにおいて、「Haloコンポーネント」という用語は、今までのFlexに含まれていたFlexフレームワークコンポーネントを指します。「Sparkコンポーネント」という用語は、Flex 4における新しいコンポーネントを指します。
ネームスペース
今までのFlexに使われているMXML 2006のネームスペースは、言語タグ、ビルドインクラスタグとHaloコンポーネントタグが、混在して定義されています。しかしながら、新しいMXML 2009のネームスペースでは、言語タグとビルドインクラスタグのみが定義されています。Flex4で使用できるコンポーネントは、HaloコンポーネントとSparkコンポーネントです。これらコンポーネントは、MXML 2009のネームスペースとは別に定義されています。下記にFlex4で使用する基本的なネームスペースを示します。
Flex 4で基本的に使用するネームスペース
| MXML 2009 (言語タグとビルドインクラスタグを含む) | http://ns.adobe.com/mxml/2009 |
| Haloコンポーネント | library://ns.adobe.com/flex/mx |
| Sparkコンポーネント | library://ns.adobe.com/flex/spark |
次に、MXML 2006とMXML 2009の変更点を見ていきましょう。言語タグについては、ネームスペースの変更のみで、基本的な仕様に変更はありません。ビルドインクラスタグも同様で既存からの変更は、ネームスペースの変更だけです。
MXML 2006とMXML 2009の言語タグの対応表
| MXML 2006 (Flex 3) | MXML 2009 (Flex 4) |
|---|---|
| xmlns:mx= "http://www.adobe.com/2006/mxml" |
xmlns:fx= "http://ns.adobe.com/mxml/2009" |
| <mx:Binding> | <fx:Binding> |
| <mx:Component> | <fx:Component> |
| <mx:Metadata> | <fx:Metadata> |
| <mx:Model> | <fx:Model> |
| <mx:Repeater> | <fx:Repeater> |
| <mx:Script> | <fx:Script> |
| <mx:Style> | <fx:Style> |
ActionScriptのビルドインクラスのタグの対応表
| MXML 2006 (Flex 3) | MXML 2009 (Flex 4) |
|---|---|
| <mx:Array> | <fx:Array> |
| <mx:Boolean> | <fx:Boolean> |
| <mx:Class> | <fx:Class> |
| <mx:Date> | <fx:Date> |
| <mx:Function> | <fx:Function> |
| <mx:int> | <fx:int> |
| <mx:Number> | <fx:Number> |
| <mx:Object> | <fx:Object> |
| <mx:RegExp> | <fx:RegExp> |
| <mx:String> | <fx:String> |
| <mx:uint> | <fx:uint> |
| <mx:XML> | <fx:XML> |
| <mx:XMLList> | <fx:XMLList> |
次に、MXML 2009で追加された言語タグとビルドインクラスタグを紹介していきます。
MXML 2009で追加されたタグ
| <fx:Declarations> |
| <fx:Definition> |
| <fx:DesignLayer> |
| <fx:Library> |
| <fx:Private> |
| <fx:Reparent> |
| <fx:Vector> |
<fx:Declarations>
MXML 2006では、基になるコンテナに子エレメントが定義されている場合、ビジュアルエレメントはそのコンテナに追加され、非ビジュアルエレメントはそのコンテナのプロパティとして定義されます。
MXML 2009において、ビジュアルエレメントは今までのMXMLと同様に定義できますが、非ビジュアルエレメントを定義するためには、基本的に<fx:Declarations>を使います。しかしながら、基になるコンテナによってその方法が変わります。
コンテナに[DefaultProperty]が定義されている場合
子エレメントは、 [DefaultProperty]が示すプロパティに配列として保持されます。また、新しいプロパティを定義したい場合には、<fx:Declarations>の中で定義します。
例)
GroupWithDefaultPropertyの様に[DefaultProperty]が設定されているコンテナの場合、非ビジュアルエレメントを定義するために、<fx:Declarations>を使う必要はありません。MXML 2006同様に定義することができます。
src/GroupWithDefaultProperty.as
[DefaultProperty("values")]
public class GroupWithDefaultProperty extends Group
{
protected var _values:Array;
public function get values():Array{
return _values;
}
public function set values( value:Array ):void{
_values = value;
}
…
}
src/DeclarationsTagWithDefaultProperty.mxml
<tutorial:GroupWithDefaultProperty width="100%" height="100%">
<tutorial:NonVisualElement id="data">
<tutorial:text>
<fx:String>HelloWorld</fx:String>
</tutorial:text>
</tutorial:NonVisualElement>
<s:Button label="{data.text}"/>
</tutorial:GroupWithDefaultProperty>
コンテナに[DefaultProperty]が定義されていない場合
子エレメントが、ビジュアルエレメントの場合、全てコンテナに追加されます。しかしながら、非ビジュアルエレメントの場合、コンパイルエラーになります。非ビジュアルエレメントは、全て<fx:Declarations>の中に定義します。定義場所が変わるだけで、今までどおりにバインディングを定義することも可能です。
例
DeclarationsTagの様に[DefaultProperty]が定義されていないコンテナでは、非ビジュアルエレメントを<fx:Declarations>を使って定義します。非ビジュアルエレメントとビジュアルエレメントのバインディングも定義しています。
src/DeclarationsTag.mxml
<fx:Declarations>
<tutorial:NonVisualElement id="data">
<tutorial:text>
<fx:String>HelloWorld</fx:String>
</tutorial:text>
</tutorial:NonVisualElement>
</fx:Declarations>
<mx:Button label="{data.text}"/>
<fx:DesignLayer>
このタグは、一般的なデザインツールのレイヤーと同じようにMXMLでもレイヤーを定義することができます。レイヤーには、複数の子エレメントと複数のレイヤーが定義でき、表示非表示や透明度を指定できます。
| プロパティ | 説明 |
|---|---|
| id | レイヤーのidを指定します。ドキュメントのプロパティとして定義されます。 |
| visible | レイヤーの表示非表示を切り替えます。 |
| alpha | レイヤーの透明度を指定します。 |
例)
DesignLayerTagsでは、3つのレイヤーを定義しています。
- RootLayer は、複数の子エレメントと複数のレイヤーを混在して定義しています。
- layer1は、レイヤーに透明度を指定しています。
- layer2の初期表示は、非表示です。layer2visibleボタンでlayer2の表示切り替えが出来きます。
src/ DesignLayerTags.mxml
<fx:DesignLayer id="RootLayer">
<s:VGroup>
<s:HGroup>
<s:Button label="親レイヤー ボタン"/>
<s:ToggleButton id="layer2visible" label="子レイヤー2 表示切り替え"/>
</s:HGroup>
<s:HGroup>
<fx:DesignLayer id="layer1" visible="true" alpha="0.5">
<s:Label text="子レイヤー1 ラベル"/>
<s:Button y="30" label="子レイヤー1 ボタン1" x="131"/>
</fx:DesignLayer>
<fx:DesignLayer id="layer2" visible="{layer2visible.selected}">
<s:Label text="子レイヤー2 ラベル"/>
<s:Button y="60" label="子レイヤー2 ボタン2"/>
</fx:DesignLayer>
</s:HGroup>
</s:VGroup>
</fx:DesignLayer>
<fx:Library> と <fx:Definition>
このタグを使うとコンポーネントやグラフィックなどのエレメントに名前を付けて、再利用することができます。定義済みエレメントは、MXML 2009ネームスペースを使って同一MXML内で利用できるようになります。
定義方法
- <fx:Library>で、ライブラリを定義します。
- <fx:Definition name=”Xxx”>のnameで、名前を付けます。
- <fx:Definition>の中にルートとなる1つのエレメントを記述します。
- <fx:Xxx>として利用できます。
<fx:Definition>で定義されたエレメントは、<fx:Definition>のルートエレメントを継承したクラスが自動生成されます。よって、プロパティやスタイルなどを指定することができます。
例）
四角の塗りをBlueRectという名前で定義しています。BlueRectは、Rectを継承したクラスとして振る舞います。Rectのプロパティを上書きして位置と幅と高さを変更しています。
src/ LayoutDefinitionsTag.mxml
<fx:Library>
<fx:Definition name="BlueRect">
<s:Rect>
<s:fill>
<s:SolidColor color="#0000FF" />
</s:fill>
</s:Rect>
</fx:Definition>
</fx:Library>
<s:Graphic>
<fx:BlueRect y="0" width="100" height="50"/>
<fx:BlueRect y="100" width="200" height="50"/>
<fx:BlueRect y="200" width="300" height="50"/>
</s:Graphic>
例）
ButtonをHelloWorldButton という名前で定義しています。HelloWorldButtonは、spark.components.Buttonを継承したクラスとして振る舞います。Buttonのプロパティを上書きしてラベルと文字色のスタイルを変更しています。
src/ LayoutDefinitionsTag2.mxml
<fx:Library>
<fx:Definition name="HelloWorldButton">
<s:Button label="HelloWorld" color="#0000FF"/>
</fx:Definition>
</fx:Library>
<s:VGroup>
<fx:HelloWorldButton />
<fx:HelloWorldButton label="HelloWorld2"/>
<fx:HelloWorldButton color="#000000" />
</s:VGroup>
<fx:Private>
このタグは、コンパイルや実行時には無視されます。デザインツールがメタデータなどを記述するために利用されます。
src/PrivateTag.mxml
<fx:Private>
<Author>John Smith</Author>
<Revision>1.3.1</Revision>
</fx:Private>
<fx:Reparent>
このタグは、コンポーネントの親コンテナを指定されたステート時に変更することができます。
MXML 2006では、コンポーネントの追加と削除を行うステートアクションを記述する必要がありましたが、このタグを使えば簡潔に記述することができます。
| プロパティ | 説明 |
|---|---|
| target | ドキュメント内にあるコンポーネントの名前 |
| includeIn | ドキュメントのステート名 |
例)
<fx:Reparent target="button" includeIn="RightParent"/>をrightコンテナに定義することによってRightParentステート時には、buttonの親コンテナが、rightに変更されます。LeftParentステート時には、buttonの親コンテナが、leftに変更されます。
src/ ReparentTag.mxml
<s:states>
<s:State name="LeftParent"/>
<s:State name="RightParent"/>
</s:states>
<s:HGroup height="100%" width="100%">
<s:VGroup height="100%" width="100%">
<s:Button label="左のグループへ"
click="currentState='LeftParent'"
enabled.LeftParent="false"/>
<s:BorderContainer id="left" height="100%" width="100%"
borderColor="0" borderWeight="2">
<s:Label text="左グループ"/>
<s:Button id="button" label="ボタン" y="50"
includeIn="LeftParent"
/>
</s:BorderContainer>
</s:VGroup>
<s:VGroup height="100%" width="100%">
<s:Button label="右のグループへ"
click="currentState='RightParent'"
enabled.RightParent="false"/>
<s:BorderContainer id="right" height="100%" width="100%"
borderColor="0" borderWeight="2">
<s:Label text="右のグループ"/>
<fx:Reparent target="button"
includeIn="RightParent"/>
</s:BorderContainer>
</s:VGroup>
</s:HGroup>
<fx:Vector>
このタグは、ビルドインクラスであるVectorをタグで、定義できます。ネストしたVectorデータも定義可能です。
| プロパティ | 説明 |
|---|---|
| type | ベース型と呼ばれるVectorのベースとなる型を指定します。ビルトインクラスとカスタムクラスを含む任意のクラスを文字列で指定します。 |
| fixed | ベクターの length プロパティを変更できるかどうかを指定します。 |
例
stringやButtonのVectorデータとネストしたVectorデータを定義しています。
ネストしたVectorのベース型は、Vector.<String>ですが、MXMLでは、Vector.<String>と記述します。
src/VectorTag.mxml
<fx:Declarations>
<fx:Vector id="stringVector" type="String" fixed="true">
<fx:String>A</fx:String>
<fx:String>B</fx:String>
</fx:Vector>
<fx:Vector id="buttonVector" type="spark.components.Button" fixed="true">
<s:Button />
<s:Button />
</fx:Vector>
<fx:Vector id="nestVector" type="Vector.<String>" fixed="true">
<fx:Vector type="String">
<fx:String>AB</fx:String>
<fx:String>CD</fx:String>
</fx:Vector>
<fx:Vector type="String">
<fx:String>EF</fx:String>
<fx:String>GH</fx:String>
</fx:Vector>
</fx:Vector>
</fx:Declarations>
Vectorについては、下記URLを参照して下さい。
http://help.adobe.com/en_US/Flex/4.0/langref/Vector.html
おわりに
今回のチュートリアルでは、Flex4の基礎となるMXML 2009を、ネームスペースの変更や開発やデザインで有用なタグが追加されていることを中心に紹介しました。
ここでは紹介しきれなかったMXML 2009の機能がありますので、詳しくはオンラインドキュメントにアクセスして下さい。
http://livedocs.adobe.com/flex/gumbo/html/
