Flex2でWebアプリ開発(2)
 1/2

MXMLを理解してFlex 2のUIを定義しよう



クラスメソッド
成瀬 勉
2006/12/14

 連載第1回目「モックを3日で仕上げるFlex 2とは?」は、Flex Builder 2のインストールから簡単なアプリケーションの実行までを解説しました。連載第2回となる今回は、Flex 2のユーザーインターフェイスを構成するXML言語である「MXML(Macromedia Flex Markup Language)」について説明したいと思います。

編集部注:Flex Builderは、2010年3月の新版から「Flash Builder 4」に名称変更しています。期間限定の無料版を ダウンロード して使えます

MXMLとは

 前回MXMLはXMLで書かれていると説明しました。Flex 2を理解するうえで、重要となるMXMLについてもう少し詳しく見ていきたいと思います。

 Flex 2はユーザーインターフェイスを構成するMXMLと、プログラムのロジックを記述するActionScript 3.0によって構成されます。

コンポーネント

 HTMLと同様にMXMLにはユーザーインターフェイスを定義するためのタグが用意されています。MXML上で記述されるタグはコンポーネントと呼ばれます。コンポーネントはある機能を持つ単位です。

 また、タグの属性は各コンポーネントのプロパティとして定義されます。コンポーネントはボタンやテキスト入力フォームなどの比較的単純なものから、データグリッドやツリーなどの複雑なビジュアルコンポーネントまで提供されています。さらには、Webサービス通信やアニメーションエフェクトなどの非ビジュアルコンポーネントも存在します。

ビジュアルコンポーネント

 ビジュアルコンポーネントでは、各コンポーネントが提供する機能によってコントロールとコンテナに分類することができます。

・コントロール

 ユーザーインターフェイスコンポーネントです。データを表示・編集することができます。

・コントロールの例

・Button
・TextInput
・CheckBox

・コンテナ

 子のコンポーネントのレイアウトを制御するコンポーネントです。単にレイアウトを制御するコンポーネントであるレイアウトコンテナのほかに、複数のコンテナを子に定義することでそれぞれの子の間での画面遷移を制御することのできるナビゲータコンテナがあります。

・レイアウトコンテナの例

・Canvas
・HBox,VBox
・Grid

ナビゲータコンテナの例

・ViewStack
・TabNavigator
・Accordion

1/2

 INDEX

Flex2でWebアプリ開発(2)
MXMLを理解してFlex 2のUIを定義しよう
Page1
MXMLとは/コンポーネント/ビジュアルコンポーネント
  Page2
MXMLを作成してカスタムコンポーネントを定義してみよう/MXMLがどのように実装されているかを確認しよう




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間