
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がどのように実装されているかを確認しよう | ||
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 (2017/7/12)
 資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する
- GET/POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 (2017/7/10)
 HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】
- PHPのfor文&ループ脱出のbreak/スキップのcontinue【更新】 (2017/6/26)
 素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】
- Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート (2017/6/12)
 Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|  | |
| 
 | |
|  | 

 







