Flex クイックスタート： 簡単なユーザインタフェースの作成
目次
コンテナの使用
コンテナは Adobe® Flash® Player の描画面に四角形の領域を定義します。 コンテナ内にコントロールやコンテナといったコンポーネントを定義して、コンテナの内部に表示します。 コンテナ内で定義したコンポーネントをコンテナの子と呼びます。 Adobe Flex にはさまざまなコンテナが用意されています。たとえば、簡単なボックス、パネル、フォーム、さらにアコーディオンなどのエレメントや子コンテナを切り替えることができるタブ付きのナビゲータなどがあります。
Container クラスはすべての Flex コンテナクラスのベースクラスです。 Container クラスを拡張するコンテナは、子コンポーネントを配置するというコンテナ自身の機能を追加します。
Flex アプリケーションのルートには Application コンテナと呼ばれる 1 つのコンテナがあり、これが Flash Player 全体の描画面となります。 この Application コンテナに、他のすべてのコンテナとコンポーネントが格納されます。
ヒント：各コンテナに応じて、自動および絶対位置指定など異なるレイアウトルールが適用されます。 詳しくは、「Flex コンポーネントの位置指定と配置」を参照してください。
レイアウトコンテナの使用
レイアウトコンテナを使用してユーザインタフェースを配置します。 次の表は、後述の例で使用するレイアウトコンテナの説明です。
| 名前 | 概要 | |
|---|---|---|
 |
Panel | Panel コンテナはタイトルバー、キャプション、ボーダーおよびその子を表示します。 デフォルトでは、Panel コンテナによって子コンポーネントが縦に配置されます。これを変更するには、レイアウトプロパティを "absolute" または "horizontal" に設定します。■タグのみの部分を開けません■ "absolute" または "horizontal". |
 |
HDividedBox | HDividedBox コンテナによって子コンポーネントが横に配置されます。HBox コンテナと似ていますが、子の間に調整可能なデバイダが挿入される点が異なります。 VDividedBox コンテナによって子コンポーネントが垂直に配置され、子の間に調整可能なデバイダが挿入されます。 |
 |
Tile | Tile コンテナによって子が複数行または複数列に配置されます。 |
 |
Form | Form コンテナによって子が標準フォーム形式に配置されます。 |
 |
ApplicationControlBar | ApplicationControlBar コンテナには、グローバルナビゲーションとアプリケーションコマンドを実現するコンポーネントが格納されます。これを Application コンテナの上端に連結することができます。 |
 |
ControlBar | ControlBar コンテナによって、コントロールが Panel または TitleWindow コンテナの最下部に配置されます。 |
これ以外に、この例ではインタフェースのレイアウトを補助するために Spacer コントロールも使用します。これはコンテナではありません。
ヒント：Spacer コントロールは非表示のコントロールで、自動位置指定のコンテナの正確な位置にエレメントを配置するために使用します。 この例では、ApplicationControlBar コンテナの中のコンポーネントのうち Spacer コントロールだけがパーセントを使用します。 Flex では、他のコンポーネントが必要としないコンテナの空きスペースすべてに合うように Spacer コントロールのサイズが調整されます。 Spacer コントロールを拡張すると、Button コントロールがコンテナの右端に移動します。
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="525" height="400" viewSourceURL="src/LayoutContainers/index.html" > <mx:ApplicationControlBar dock="true"> <mx:Label text="ApplicationControlBar" fontFamily="Verdana" fontWeight="bold" fontSize="12" /> <mx:Spacer width="100%"/> <mx:Button label="Log out"/> </mx:ApplicationControlBar> <mx:Panel layout="horizontal" title="Panel" width="100%" height="100%" > <mx:HDividedBox width="100%" height="100%"> <mx:Panel width="100%" height="100%" headerHeight="0" borderStyle="solid" shadowDistance="0" > <mx:Label text="Panel (without header)" fontWeight="bold" /> <mx:Form> <mx:FormHeading label="First form" /> <mx:FormItem label="Name:"> <mx:TextInput width="100"/> </mx:FormItem> <mx:FormItem label="Email:"> <mx:TextInput width="100"/> </mx:FormItem> </mx:Form> </mx:Panel> <mx:Panel width="100%" height="100%" headerHeight="0" borderStyle="solid" shadowDistance="0" > <mx:Label text="Panel (without header)" fontWeight="bold" /> <mx:Form> <mx:FormHeading label="Second form" /> <mx:FormItem label="Name:"> <mx:TextInput width="100"/> </mx:FormItem> <mx:FormItem label="Email:"> <mx:TextInput width="100"/> </mx:FormItem> </mx:Form> </mx:Panel> </mx:HDividedBox> <mx:ControlBar horizontalAlign="center"> <mx:Label text="ControlBar in Panel" fontWeight="bold"/> <mx:Spacer width="100%"/> <mx:Button label="Prev"/> <mx:Button label="Finish"/> </mx:ControlBar> </mx:Panel> </mx:Application>
結果
このコンテンツを視聴するには Flash が必要です
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
ナビゲーションコンテナの使用
ナビゲータコンテナは、子が他のコンテナである複数の子の中におけるユーザの移動（ナビゲーション）を制御します。
ナビゲータコンテナの直接の子は、コンテナ（レイアウトコンテナまたはナビゲーションコンテナ）でなければなりません。 ナビゲータ内にコントロールを直接ネストすることはできません。コントロールは、ナビゲータコンテナの子コンテナの子にする必要があります。
次の表は、後述の例で使用するナビゲータコンテナの説明です。
| 名前 | 概要 | |
|---|---|---|
 |
Accordion | Accordion コンテナによって、子パネルの順序を定義します。パネルは一度に 1 つだけ表示されます。 コンテナをナビゲートするには、ユーザが表示したい子パネルに対応するナビゲーションボタンをクリックします。 Accordion コンテナを使用すれば、ユーザが任意の順序で子パネルを表示して、フォームの前に戻ったり先に進んだりすることができます。 |
 |
TabNavigator | TabNavigator コンテナによって、子をナビゲートするために使用する複数のタブを作成して管理します。 TabNavigator コンテナの子は他のコンテナです。 TabNavigator コンテナは、1 つの子に 1 つのタブを作成します。 ユーザがタブを選択すると、TabNavigator コンテナによって関連する子が表示されます。 |
 |
ViewStack | ViewStack ナビゲータコンテナは、積み重なった子コンテナの集まりから成り立っています。一度に表示またはアクティブにできるのは 1 つの子コンテナのみです。 ViewStack コンテナは、ユーザが現在アクティブなコンテナを切り替えるための内蔵メカニズムを定義するのではありません。ユーザが現在アクティブな子を切り替えられるようにするには、LinkBar、TabBar、ButtonBar または ToggleButtonBar コントロールを使用するか、ActionScript でロジックを作成する必要があります。 |
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="550" height="550" viewSourceURL="src/NavigationContainers/index.html" > <mx:Panel layout="absolute" left="10" top="10" right="10" bottom="10" title="Navigators" > <mx:Accordion width="47.5%" height="200" top="36" left="10"> <mx:Canvas label="Navigation button 1" width="100%" height="100%"> <mx:Label x="10" y="10" text="Contents 1"/> </mx:Canvas> <mx:Canvas label="Navigation button 2" width="100%" height="100%"> <mx:Label x="10" y="10" text="Contents 2"/> </mx:Canvas> <mx:Canvas label="Navigation button 3" width="100%" height="100%"> <mx:Label x="10" y="10" text="Contents 3"/> </mx:Canvas> </mx:Accordion> <mx:TabNavigator right="10" width="47.5%" height="200" y="36"> <mx:Canvas label="Tab 1" width="100%" height="100%"> <mx:Label x="10" y="10" text="Contents 1"/> </mx:Canvas> <mx:Canvas label="Tab 2" width="100%" height="100%"> <mx:Label x="10" y="10" text="Contents 2"/> </mx:Canvas> <mx:Canvas label="Tab 3" width="100%" height="100%"> <mx:Label x="10" y="10" text="Contents 3"/> </mx:Canvas> </mx:TabNavigator> <mx:ViewStack id="myViewStack" width="47.5%" height="200" right="10" bottom="10" borderColor="#000000" borderStyle="solid" > <mx:Canvas label="View 1" width="100%" height="100%"> <mx:Label x="10" y="10" text="Contents 1"/> </mx:Canvas> <mx:Canvas label="View 2" width="100%" height="100%"> <mx:Label x="10" y="10" text="Contents 2"/> </mx:Canvas> <mx:Canvas label="View 3" width="100%" height="100%"> <mx:Label x="10" y="10" text="Contents 3"/> </mx:Canvas> </mx:ViewStack> <!-- Labels for the various controls --> <mx:Label x="10" y="252" text="ButtonBar"/> <mx:Label x="10" y="10" text="Accordion"/> <mx:Label x="262.5" y="10" text="TabNavigator"/> <mx:Label x="262.5" y="252" text="ViewStack"/> <mx:Label x="10" y="308" text="ToggleButtonBar"/> <mx:Label x="10" y="364" text="LinkBar"/> <mx:Label x="10" y="424" text="TabBar"/> <!-- All these navigators use the same dataProvider, namely, the myViewStack ViewStack instance. Changing the selected view in one will affect all the others also. --> <mx:ButtonBar x="10" y="278" dataProvider="{myViewStack}" /> <mx:ToggleButtonBar x="10" y="334" dataProvider="{myViewStack}" /> <mx:LinkBar x="10" y="390" dataProvider="{myViewStack}" /> <mx:TabBar x="10" y="444" dataProvider="{myViewStack}" /> </mx:Panel> </mx:Application>
結果
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
詳細情報
レイアウトコンテナの使用について詳しくは『Flex 2 Developer's Guide』の「Introducing Containers」、「Using the Application Container」、「Using Layout Containers」および「Using Navigator Containers」を参照してください。
著者について
Aral Balkan 氏は開発チームの指揮、ユーザインタフェースの設計、リッチインターネットアプリケーションの構築、ロンドンの Macromedia ユーザグループ OSFlash.org* の運営、自らの会社 Ariaware* の経営に加えて、演技と歌も得意とする。 設計について積極的に語り、著書や記事も多数。 Flash プラットフォーム用オープンソース RIA フレームワーク Arp* の作者でもある。 常に強固な意見を持ち、活気にあふれ情熱的。 いつも笑顔を絶やさず、ガムをかみながら歩くこともある。
