Flex では、アプリケーションに追加したすべての内容を格納するデフォルトコンテナとして、Application コンテナが定義されています。Application コンテナは <mx:Application> タグから作成されます。このタグは MXML アプリケーションファイルの最初のタグである必要があります。Application オブジェクトはファイル内のすべての ActionScript コードのデフォルトスコープであり、<mx:Application> タグはアプリケーションの初期サイズを定義します。

Application コンテナを、アプリケーション内で使用する唯一のコンテナにした方が好都合のようにも思われますが、通常は、アプリケーションにコントロールを追加する前に、少なくとももう 1 つのコンテナを明示的に定義することになります。<mx:Application> タグに続く最初のコンテナとしては、Panel コンテナがよく使用されます。

Application コンテナには、次のデフォルトレイアウト属性があります。

Application コンテナとその子のサイズ設定

Application コンテナでは子が縦 1 列に配置されます。Application コンテナの height と width は、ピクセル値で明示的に設定する方法の他に、ブラウザウィンドウのサイズに対する相対的なパーセント値を使用する方法もあります。デフォルトでは、Application コンテナの高さと幅は 100 ％、つまり、ブラウザのウィンドウ全体を占めるように設定されます。

次の例は、Application コンテナのサイズを、ブラウザウィンドウの幅と高さの 1/2 に設定します。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="50%" width="50%">
    ...
</mx:Application>

サイズをパーセント値で指定することの利点は、ユーザーがブラウザウィンドウのサイズを変更したときに、それに応じてアプリケーションのサイズが自動的に調整される点です。ブラウザウィンドウのサイズが変更されたとしても、そのサイズに対する比率として Application コンテナのサイズを維持できます。

MXML タグで子コンポーネントの width プロパティと height プロパティをパーセント値に設定した場合、コンポーネントのサイズがアプリケーションのサイズ変更に合わせて拡大 / 縮小されます。次にその例を示します。

<?xml version="1.0"?>
<!-- containers\application\AppSizePercent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100%" height="100%">

    <mx:Panel title="Main Application" width="100%" height="100%">
        <mx:HDividedBox width="100%" height="100%">
            <mx:TextArea width="50%" height="100%"/>
            <mx:VDividedBox width="50%" height="100%">
                <mx:DataGrid width="100%" height="25%"/>
                <mx:TextArea width="100%" height="75%"/>
            </mx:VDividedBox>
        </mx:HDividedBox>
    </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

次のコードは、Application コンテナのサイズに明示的にピクセル値を設定した例です。

<?xml version="1.0"?>
<!-- containers\application\AppSizePixel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="100" width="150">

    <mx:Panel title="Main Application">
        <mx:TextInput id="mytext" text="Hello"/>
        <mx:Button id="mybutton" label="Get Weather"/>
    </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

前の例のように、一部またはすべてのコンポーネントが Application コンテナの可視領域の外側に位置するように Application コンテナの子のサイズと位置が設定された場合は、Application コンテナにスクロールバーが追加されます。

子コンテナが Application コンテナ全体を占めるようにする場合、最も簡単な方法は、MXML タグで子の width プロパティと height プロパティを 100 ％に設定し（ActionScript を使用する場合は、percentWidth プロパティと percentHeight プロパティを 100 に設定します）、Application コンテナのパディングを 0 に設定することです。Application コンテナの幅と高さに基づいて子コンテナの width プロパティと height プロパティを設定する場合は、Application コンテナのパディングを差し引かないと、子コンテナのサイズが使用可能な領域よりも大きくなり、アプリケーションにスクロールバーが表示されてしまいます。

次の例では、Application コンテナのパディングで定義されている領域を除く使用可能な領域全体に VBox コンテナが拡張されます。

<?xml version="1.0"?>
<!-- containers\application\AppVBoxSize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100" height="100">
    
    <mx:VBox width="100%" height="100%" backgroundColor="#A9C0E7">
        <!-- ... -->
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

次の例では、VBox コンテナが Application コンテナの使用可能領域より大きいため、スクロールバーが表示されます。

<?xml version="1.0"?>
<!-- containers\application\AppVBoxSizeScroll.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100" height="100">

    <mx:VBox width="200" height="200" backgroundColor="#A9C0E7">
        <!-- ... -->
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

次の例では、Application コンテナのパディングがすべて 0 に設定されているため、その子である VBox コンテナがウィンドウ全体を占めます。

<?xml version="1.0"?>
<!-- containers\application\AppNoPadding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100" height="100" 
    paddingTop="0" paddingBottom="0" 
    paddingLeft="0" paddingRight="0">
    
    <mx:VBox width="100" height="100" backgroundColor="#A9C0E7">
        <!-- ... -->
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

Application コンテナのデフォルトスタイルのオーバーライド

デフォルトで、Application コンテナには、Flex アプリケーションの次の視覚的要素を定義したデフォルトスタイルプロパティがあります。これらのプロパティはコンテナのデフォルト値とは異なります。

これらのデフォルト値をオーバーライドして、独自のデフォルトスタイルプロパティを定義することもできます。

Application コンテナの背景の変更

Application コンテナの背景は、コンテナの backgroundGradientAlphas、backgroundGradientColors および backgroundImage の各スタイルによって制御されます。デフォルトでは、これらのプロパティは不透明なグレーのグラデーション背景を定義します。

アプリケーションの背景としてイメージを指定するには、backgroundImage プロパティを使用します。backgroundImage プロパティと backgroundGradientColors プロパティを両方とも設定すると、backgroundGradientColors が無視されます。

アプリケーションにグラデーション背景を指定する方法は 2 とおりあります。

1. backgroundGradientColors プロパティに 2 つの値を設定します。次に例を示します。

   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"backgroundGradientColors="[0x0000FF, 0xCCCCCC]">
   
   

   指定した 2 つの値の間のグラデーションパターンが自動的に計算されます。

2. backgroundColor プロパティを目的の値に設定します。次に例を示します。

   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"backgroundColor="red">
   
   

   赤より少し暗い色と少し明るい色との間のグラデーションパターンが自動的に計算されます。

単色の背景をアプリケーションに設定するには、backgroundGradientColors プロパティに同じ値を 2 つ指定します。次に例を示します。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"backgroundGradientColors="[#FFFFFF, #FFFFFF]">

この例では、単色の白の背景を定義しています。

backgroundColor プロパティは、アプリケーションのロード中および初期化中に表示される、Flash Player のステージ領域の背景色と、アプリケーション実行時の背景のグラデーションを指定します。デフォルトでは、backgroundColor プロパティは 0x869CA7（ダークブルーグレー）に設定されます。

backgroundGradientColors プロパティを使用してアプリケーションの背景を設定する場合は、backgroundColor プロパティも一緒に設定して backgroundGradientColors プロパティを補完してください。次に例を示します。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundGradientColors="[0x0000FF, 0xCCCCCC]" 
    backgroundColor="0x0000FF">

この例では、backgroundGradientColors プロパティを使用してダークブルーからグレーへのグラデーションパターンを設定し、backgroundColor プロパティを使用して Flash Player のステージ領域をダークブルーに設定しています。この色はアプリケーションのロード中および初期化中に表示されます。

プレーンスタイルの使用

Flex のデフォルトスタイルシートにはプレーンスタイル名が定義されています。このスタイルは、すべてのパディングを 0 ピクセルに設定し、デフォルトの背景イメージを除去し、背景色を白に設定して、子を左揃えにします。次の例は、このスタイルの設定方法を示しています。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" styleName="plain">

次のように、プレーン設定の個々の値をオーバーライドすることもできます。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"styleName="plain" horizontalAlign="center"/>

Style タグを使用したスタイルのオーバーライド

また、アプリケーションで <mx:Style> タグを使用して、別のスタイル値を指定することもできます。次にその例を示します。

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

    <!-- Style definition for the entire application. -->
    <mx:Style>
        Application {
            paddingLeft: 10px;
            paddingRight: 10px;
            paddingTop: 10px;
            paddingBottom: 10px;
            horizontalAlign: "left";
            backgroundImage: "";
            backgroundColor: #AAAACC;
        }
    </mx:Style>

    <mx:Panel title="Main Application">
        <mx:TextInput id="mytext" text="Hello"/>
        <mx:Button id="mybutton" label="Get Weather"/>
    </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、背景イメージを除去し、すべてのパディングを 10 ピクセルに設定し、子を左揃えにして、背景色をライトブルーに設定しています。

スタイルの使用の詳細については、スタイルとテーマの使用を参照してください。

アプリケーションのソースコードの表示

Application コンテナの viewSourceURL プロパティを使用すると、アプリケーションのソースコードの URL を指定できます。このプロパティを設定すると、アプリケーションのコンテキストメニューに「ソースの表示」メニューアイテムが追加されます。このコンテキストメニューは、アプリケーションの任意の場所でマウスを右クリックすると開きます。「ソースの表示」メニューアイテムを選択すると、新しいブラウザウィンドウが開き、viewSourceURL プロパティで指定された URL が表示されます。

viewSourceURL プロパティは、ActionScript ではなく、次の例のように MXML を使用して設定します。

<?xml version="1.0"?>
<!-- containers\application\AppSourceURL.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="http://localhost:8100/flex/assets/AppSourceURL.txt">

    <mx:Button/>
</mx:Application>

通常はソースコードを MXML ファイルとしてではなく、テキストファイルまたは HTML ファイルとしてデプロイします。この例では、ソースコードはファイル AppSourceURL.txt ファイル内にあります。HTML ファイルを使用してソースコードを表す場合、フォーマットと色付けを追加してソースコードを読みやすくすることができます。

Application コンテナのオプションの指定

<mx:Application> タグのオプションを指定することにより、アプリケーションを制御できます。それらのオプションを次の表に示します。