Flex defines an Application container that serves as the default container for any content that you add to your application. Flex creates this container from the <mx:Application> tag, which must be the first tag in an MXML application file. The Application object is the default scope for any ActionScript code in the file, and the <mx:Application> tag defines the initial size of the application.

Although you may find it convenient to use the Application container as the only container in your application, usually you explicitly define at least one more container before you add any controls to your application. Often, you use a Panel container as the first container after the <mx:Application> tag.

The Application container has the following default layout characteristics:

Sizing an Application container and its children

An Application container arranges its children in a single vertical column. You can set the height and width of the Application container by using explicit pixel values or by using percentage values, where the percentage values are relative to the size of the browser window. By default, the Application container has a height and width of 100%, which means that it fills the entire browser window.

The following example sets the size of the Application container to one-half of the width and height of the browser window:

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

The advantage of using percentages to specify the size is that Flex can resize your application as the user resizes the browser window. Flex maintains the Application container size as a percentage of the browser window as the user resizes it.

If you set the width and height properties of the child components MXML tags to percentage values, your components can also resize as your application resizes, as the following example shows:

<?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>
The executing SWF file for the previous example is shown below:

The following example uses explicit pixel values to size the Application container:

<?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>
The executing SWF file for the previous example is shown below:

If the children of the Application container are sized or positioned such that some or all of the component is outside of the visible area of the Application container, Flex adds scroll bars to the container, as the preceding example shows.

If you want to set a child container to fill the entire Application container, the easiest method is to set the child's MXML tag width and height properties to 100% (or, in ActionScript, set the percentWidth and percentHeight properties to 100), and set the Application container padding to 0. If you base the child container's width and height properties on those of the Application container, you must subtract the Application container's padding, or your child container will be larger than the available space, and the application will have scroll bars.

In the following example, the VBox container expands to fill all of the available space, except for the area defined by the Application container padding:

<?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>
The executing SWF file for the previous example is shown below:

In the following example, the VBox container is larger than the available space within the Application container, which results in scroll bars:

<?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>
The executing SWF file for the previous example is shown below:

In the following example, the Application container has no padding, which lets its child VBox container fill the entire window:

<?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>
The executing SWF file for the previous example is shown below:

Overriding the default Application container styles

By default, the Application container has the following default style properties that define the following visual aspects of a Flex application and differ from the default container values:

You can override these default values in your application to define your own default style properties.

Changing the Application background

The Application container backgroundGradientAlphas, backgroundGradientColors, and backgroundImage styles control the container background. By default, these properties define an opaque grey gradient background.

You specify an image for the application background by using the backgroundImage property. If you set both the backgroundImage property and the backgroundGradientColors property, Flex ignores backgroundGradientColors.

You can specify a gradient background for the application in two ways:

1. Set the backgroundGradientColors property to two values, as in the following example:

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

   Flex calculates the gradient pattern between the two specified values.

2. Set the backgroundColor property to the desired value, as in the following example:

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

   Flex calculates the gradient pattern between a color slightly darker than red, and a color slightly lighter than red.

To set a solid background to the application, specify the same two values to the backgroundGradientColors property, as the following example shows:

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

This example defines a solid white background.

The backgroundColor property specifies the background color of the Stage area in Flash Player, which is visible during application loading and initialization, and a background gradient while the application is running. By default, the backgroundColor property is set to 0x869CA7, which specifies a dark blue-grey color.

If you use the backgroundGradientColors property to set the application background, you should also set the backgroundColor property to compliment the backgroundGradientColors property, as the following example shows:

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

In this example, you use the backgroundGradientColors property to set a gradient pattern from a dark blue to grey, and the backgroundColor property to set the Stage area in Flash Player to dark blue, which will be visible during application loading and initialization.

Using the plain style

The Flex default style sheet defines a plain style name that sets all padding to 0 pixels, removes the default background image, sets the background color to white, and left-aligns the children. The following example shows how you can set this style:

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

You can override individual values in the plain setting, as the following example shows:

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

Overriding styles with the Style tag

You can also use the <mx:Style> tag in your application to specify alternative style values, as the following example shows:

<?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>
The executing SWF file for the previous example is shown below:

This example removes the background image, sets all padding to 10 pixels, left-aligns children, and sets the background color to a light blue.

For more information on using styles, see Using Styles and Themes.

Viewing the application source code

You can use the viewSourceURL property of the Application container to specify a URL to the application's source code. If you set this property, Flex adds a View Source menu item to the application's context menu, which you open by right-clicking anywhere in your application. Select the View Source menu item to open the URL specified by the viewSourceURL property in a new browser window.

You must set the viewSourceURL property by using MXML, not ActionScript, as the following example shows:

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

    <mx:Button label="Click Me"/>
</mx:Application>

You typically deploy your source code not as an MXML file, but as a text or HTML file. In this example, the source code is in the file AppSourceURL.txt. If you use an HTML file to represent your source code, you can add formatting and coloring to make it easier to read.

Specifying options of the Application container

You can specify several options of the <mx:Application> tag to control your application. The following table describes these options: