1. Home
2. Developer Connection
3. Flex Developer Center
4. Quick Starts

Flex Quick Start: Building a simple user interface

Table of contents

• Using controls
• Using containers
• Styling your components
• Adding effects
• Creating states
• Defining state transitions
• Using tooltips
• Controlling the cursor

Styling your components

Styles are useful for defining the look and feel (appearance) of your Adobe® Flex™ applications. You can use them to change the appearance of a single component, or apply them across all components.

There are many ways to apply styles in Flex. Some provide more granular control and can be performed programmatically. Others are not as flexible, but can require less computation. In Flex, you can apply styles to controls in several ways:

• Using local style definitions
• Using external style sheets
• Using inline styles
• Using the setStyle() method

Flex does not support controlling all visual aspects of a component with Cascading Style Sheets (CSS). Properties such as x, y, width and height are properties, not styles, of the UIComponent class and, therefore, cannot be set in CSS. You must also be aware of which properties your theme supports. The default theme in Flex does not support all style properties.

A theme is a set of styles that define the look and feel of a Flex application. A theme can define something as simple as the color scheme or common font for an application, or it can be a complete reskinning of all the components used by the application. Themes usually take the form of a SWC file. However, themes can also be a CSS file and embedded graphical resources, such as symbols from a SWF file.

For more information on supported style properties in themes see "About supported styles" in the Flex 3 Developer's Guide.

To determine the styles that a specific visual component supports, see the styles section of the component in Adobe Flex 3 Language Reference.

Using local style definitions

You can create local style definitions in your MXML files using the <mx:Style> tag. This tag contains style sheet definitions that adhere to the CSS 2.0 syntax. These definitions apply to the current document and all children of the current document.

The following example creates two class selectors, .solidBorder and .solidBorderPaddedVertically and uses them to style the two VBox containers by using their styleName properties. As this example shows, using class selectors lets you give different styles to instances of the same component.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    width="150" height="140"
     viewSourceURL="src/StylesStyleTag/index.html"
>
    <mx:Style>
        .solidBorder { border-style: solid; }
        
        .solidBorderPaddedVertically 
        {
            padding-top: 12; 
            padding-bottom: 12;
            border-style: solid;
        }
    </mx:Style>
    <mx:VBox styleName="solidBorder">
        <mx:Button label="Submit"/>
    </mx:VBox>
    <mx:VBox 
        styleName="solidBorderPaddedVertically"
    >
        <mx:Button label="Submit"/>
    </mx:VBox>
</mx:Application>

VBox { border-style: solid; }

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

Using external style sheets

Flex supports external CSS style sheets. To apply a style sheet to the current document and its child documents, use the source property of the <mx:Style> tag. External style sheet files should be in the folder that contains your MXML source files. By default, this is the src folder in your MXML project.

Note: You should try to limit the number of style sheets used in an application, and set the style sheet only at the top-level document in the application (the document that contains the <mx:Application> tag). If you set a style sheet in a child document, unexpected results can occur.

The following example defines two CSS class selectors in an external CSS file called external.css. You use an external CSS file in a Flex application by specifying its path and file name in the source property of the <mx:Style> tag.

Example:
External CSS file

/* An external CSS file */
.solidBorder
{
    borderStyle: "solid";
}

.solidBorderPaddedVertically
{
    borderStyle: "solid";
    paddingTop: 12px;
    paddingBottom: 12px;
}

MXML file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="150" height="140" 
    viewSourceURL="src/StylesExternal/index.html"

>
    <mx:Style source="styles/external.css" />

    <mx:VBox styleName="solidBorder">

        <mx:Button label="Submit"/>
    </mx:VBox>
    
    <mx:VBox styleName="solidBorderPaddedVertically">
        <mx:Button label="Submit"/>
    </mx:VBox>

</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

Using inline styles

You can set style properties as properties of the component in the MXML tag. Inline style definitions take precedence over any other style definitions apart from run-time style changes defined by using the setStyle() tag. For example, you can set the padding between the border of a Box container and its contents by using the paddingTop and paddingBottom properties of the <mx:VBox> tag. You can use the borderStyle property, similarly, to define the visual appearance of a component's border.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    width="150" height="140"
    viewSourceURL="src/StylesTagAttributes/index.html"

>
    <mx:VBox id="myVBox1" borderStyle="solid">
        <mx:Button label="Submit"/>

    </mx:VBox>
    <mx:VBox 
        id="myVBox2" borderStyle="solid"
        paddingTop="12" paddingBottom="12" 
    >
        <mx:Button label="Submit"/>

    </mx:VBox>
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

Using the setStyle() method

Use the setStyle() method to manipulate style properties on instances of controls in ActionScript. Using this method to apply styles requires a greater amount of processing power on the client than using style sheets, but provides more granular control over how styles are applied.

The setStyle() method takes two arguments: the style name and the style value.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    width="150" height="140"
     viewSourceURL="src/StylesSetStyle/index.html"
>
    <mx:Script>
        <![CDATA[
            private function initVBox():void 
            {
                myVBox2.setStyle("paddingTop", 12);
                myVBox2.setStyle("paddingBottom", 12);
            }
        ]]>
    </mx:Script>
    
    <mx:VBox borderStyle="solid">
        <mx:Button label="Submit"/>

    </mx:VBox>
    <mx:VBox 
        id="myVBox2" borderStyle="solid"
        paddingTop="12" paddingBottom="12" 
        initialize="initVBox();"
    >
    <mx:Button label="Submit"/>
    </mx:VBox>
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

Back to top

For more information

• Using Styles and Themes in the Adobe Flex 3 Help

About the author