Flex 2 Developer's Guide > Building User Interfaces for Flex Applications > Using the Application Container > Using the Application container > Overriding the default Application container styles

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.

Subtopics

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:

• 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.

• 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>

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.

Flex 2.01

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/201/html/app_container_064_04.html

Add Comment