| Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コンテナについて > コンテナの使用 | |||
|
|||
|
|||
|
|||
コンテナの矩形領域内には、子コンポーネントを保持する領域として、"コンテンツ領域" が存在します。コンテンツ領域の周囲にある領域のサイズは、コンテナのパディングと境界線の幅によって定義されます。コンテナの上下左右にはパディングがあり、その幅はピクセル数で設定できます。コンテナにはまた、境界線の種類とピクセル幅を指定できるプロパティもあります。次の図は、コンテナとそのコンテンツ領域、パディング、および境界線を示します。
Flex アプリケーション全体を 1 つのコンテナで作成することもできますが、複数のコンテナを使用するのが一般的です。次の図は、3 つのレイアウトコンテナが使用されたアプリケーションの例です。
この例では、2 つの VBox (Vertical Box) レイアウトコンテナが、HBox (Horizontal Box) レイアウトコンテナ内に HBox コンテナの子としてネストされています。
HBox コンテナは単一の行 (横方向) に子を配置し、VBox コンテナのサイズと位置の属性を管理します。たとえば、コンテナに存在する子と子の距離 (間隔) は、horizontalGap プロパティと verticalGap プロパティを使って制御できます。
VBox レイアウトコンテナは、単一の列 (縦方向) に子を配置し、自分の子のレイアウトを管理します。上の例で一番外側のコンテナを VBox レイアウトコンテナに変更すると、次の図のようになります。
この例では、外側のコンテナが VBox コンテナであるため、子は縦方向の列として配置されます。
レイアウトコンテナは、主に子 (コントロールまたはその他のコンテナ) を整然と配置する目的で使用されます。次の図は、3 つの子コンポーネントを持つ、シンプルな VBox コンテナを示します。
この例では、ユーザーが TextInput コントロールに郵便番号を入力し、Button コントロールをクリックすると、指定した郵便番号に該当する地域の現在の気温が表示されます。
Flex は Form レイアウトコンテナを使ったフォームベースのアプリケーションをサポートします。Form コンテナでは、ラベル位置を自動的に整列できるほか、TextInput コントロールのサイズを均等に設定したり、入力エラーを表示することもできます。次の図は Form コンテナを示します。
Form コンテナでは、Flex の検証メカニズムを利用して、ユーザーがフォームを送信する前に入力エラーを検出できます。入力エラーを検出し、フォームがサーバーに送信される前にユーザーにミスを修正させることによって、不要なサーバー接続を減らすことが可能です。Flex の検証メカニズムを使用したからといって、サーバー上で他の検証が実行できなくなることはありません。Form コンテナの詳細については、Form、FormHeading、および FormItem レイアウトコンテナを参照してください。バリデータの詳細については、データ検証を参照してください。
TabNavigator や Accordion などのナビゲータコンテナはビルトインのナビゲーションコントロールを備えています。ナビゲータコンテナを使用して複数の子コンテナからの情報を体系化すると、ユーザーがその中を容易に移動できるようになります。次の図は Accordion コンテナを示します。
複数の子コンテナ間を移動するには、Accordion ボタンを使用します。Accordion コンテナでは子パネルを定義しますが、一度に表示されるパネルは 1 つだけです。コンテナを移動する場合、ユーザーはアクセスする子パネルに対応するナビゲーションボタンをクリックします。
Accordion コンテナを使用すると、段階的な手順を作成できます。上の図は、4 つのパネルから成る複合フォームを定義した Accordion コンテナです。フォームのすべての項目に記入するには、ユーザーは 4 つのパネルすべてにデータを入力しなければなりません。最初のパネルに情報を入力した後、Accordion ボタンをクリックして 2 番目のパネルに移動し、入力した情報を変更したい場合は再び最初のパネルに戻る、というような手順も Accordion であれば可能です。詳細については、Accordion ナビゲータコンテナを参照してください。
Flex 2.01