Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コンテナについて > コンテナの使用 > コンテナの例

コンテナの例

次の図は、3 つの子コントロールを含む Panel コンテナを使用した Flex アプリケーションを示します。ここでは、Panel コンテナの子は垂直にレイアウトされています。

3 つの子を持つ VBox コンテナ

この例を作成する MXML コードは次のとおりです。

<?xml version="1.0"?>
<!-- containers\intro\Panel3Children.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Panel title="My Application" 
        layout="vertical" horizontalAlign="center"
        paddingLeft="10" paddingRight="10" 
        paddingTop="10" paddingBottom="10">
            <mx:TextInput id="myinput" text="enter zip code"/>
            <mx:Button id="mybutton" label="GetWeather"/>
            <mx:TextArea id="mytext" height="20"/>
    </mx:Panel>
</mx:Application>

次の図は、上の例の Panel コンテナを水平レイアウトに変更した場合を示します。

3 つの子を持つ HBox コンテナ

この例のコードは次のとおりです。2 つの例の違いはコンテナの種類だけであり、水平方向のレイアウトに変更したことによって上の例よりも Application コンテナの幅が広くなっています。

<?xml version="1.0"?>
<!-- containers\intro\Panel3ChildrenHoriz.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Panel title="My Application" 
        layout="horizontal"
        paddingLeft="10" paddingRight="10" 
        paddingTop="10" paddingBottom="10">
            <mx:TextInput id="myinput" text="enter zip code"/>
            <mx:Button id="mybutton" label="GetWeather"/>
            <mx:TextArea id="mytext" height="20"/>
    </mx:Panel>
</mx:Application>

実際に気象情報を取得するには、Web サービスを設定し、そのサービスに click イベントから入力された ZIP コードを渡します。そして、返された情報を TextArea コントロールに格納します。

Flex 2.01