Applying styles

Styles affect the appearance of an application by specifying values for visual parameters for application components. You can set styles that apply to all components in an application, to individual components, or to a set of components referenced by a style selector.

For example, you can specify styles such as:

  • Text

    Font family, size, weight, color, font (bold, italic, underline) and other text display settings

  • Border

    Thickness, color, rollover color, border-style (solid, inset, outset, none), corner radius, and others

  • Color

    Fill color and alpha

Note: The styles available for a component varies, according to the component.

You set style properties inline on an MXML tag or separately using CSS code. The CSS code can be inside <fx:Style> tags in an application or in a separate CSS file.

When you apply inline styles to components, you can convert component styles into a CSS rule in an external stylesheet. You can use the CSS editor to edit CSS files.

You can also convert skins applied to a component into styles.

Use Design mode of the MXML editor to apply styles to an application or specific application components. You can also use Design mode to convert applied styles or skins to CSS stylesheets.

Styles compared to skins

Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements. These elements can be made up of bitmap images, SWF files, or class files that contain drawing methods that define vector images.Skins can define the appearance of a component in various states. For example, you can specify the appearance of a Button component in the up, down, over, and disabled states.

Using Flash Builder, you can convert a component’s skin to CSS styles.

Apply styles to an application

Use the Appearance view to define styles that apply to an entire application. Flash Builder saves the style defined in Appearance view as a global CSS style selector.

  1. In Design mode of the MXML editor, open an MXML application file that contains several components.

  2. In Appearance view, specify global styles for the application.

    If Appearance view is not visible, select Window > Other Views > Flash Builder > Appearance.

    After you apply the styles, Flash Builder creates a global CSS style selector for the specified style.

    If this is the first style referenced in the application, Flash Builder creates a new CSS file and references it in the MXML application file.

    If your application already references a CSS file or a <fx:Style> block, Flash Builder updates the CSS with the global style selector.

Apply inline styles to a component

Use the Properties view to define inline styles for selected components.

  1. In Design mode of the MXML editor, open an MXML application file that contains several components.

  2. Select a component and specify style property values in the Style area of Properties view.

    The Style area changes, depending on the component you select.

    Style properties view
    Properties view showing styles for a DataGrid
  3. In Properties view, select Category view to list all the styles that can be applied to the selected component.

    Category view
    Note: Multi-word style names in Flex can be written either like an ActionScript identifier (for example, fontFamily) or like similar HTML styles (for example, font-family).
  4. After specifying a style, switch to Source mode to view the generated inline code that applies the style.

Apply an external or embedded style to an application

You can embed CSS styles in an MXML application file or reference an external CSS file. The following example shows CSS code to apply styles to all Spark Button components in an application. It also creates a selector, .myStyle, that can be applied to any component:

    @namespace s "library://ns.adobe.com/flex/spark"; 
    @namespace mx "library://ns.adobe.com/flex/mx"; 
 
    s|Button { fontSize: 16pt; color: Red } /* type selector */ 
    .myStyle { color: Red } /* class selector */ 

For styles applied to components, such as s|Button, the selector for components must specify a namespace. In this example, s|Button defines a style that is automatically applied to all Spark Button components.

Use the CSS period notation to create a selector that can be applied to any component. In this example, .myStyle does not have to declare a namespace and can be applied to any component.

Flex has specific requirements for creating and applying styles. For details, see Using styles in Flex.

Apply styles to an application

  1. In Design mode of the MXML editor, create an MXML application file that contains several Spark Button components and a CheckBox component.

  2. (Embedded styles) In Source mode, add the following code to your application:

    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        @namespace mx "library://ns.adobe.com/flex/halo"; 
     
        s|Button { fontSize: 16pt; color: Red } /* type selector */ 
        .myStyle { fontSize: 16pt; color: Blue } /* class selector */ 
    </fx:Style>
  3. (External stylesheet) Create a stylesheet that implements the s|Button and .myStyle selectors in Step 1. In Source mode, reference the file from the MXML application file:
    <fx:Style source="styles.css"/>
  4. Switch to Design mode. Notice that the Spark Buttons now have the style applied.

  5. Select the Check Box component and in Properties view, select Styles > myStyle.

    Now the CheckBox component has .myStyle style applied.

Convert to CSS

You can convert inline styles and component skins to CSS styles. During the conversion, you can specify whether to make the styles global or to apply to a specific component. You can also specify a CSS style selector for the generated styles.

  1. In Design mode of the MXML editor, select a component in the design area. The component should use inline styles or specify a skinClass property.

    See Generating and editing skins for Spark components for information on specifying a skinClass for a component.

  2. In Properties view, click Convert to CSS.

  3. If you have multiple projects open in your workspace, select/deselect the resource files you want to save in the Save Resources dialog. Then click OK.

  4. In the New Style Rule dialog box, select the .css file or click New to create a new file.

  5. Specify the Selector type. Choose from the following:

    • All Components

      The style is global and applies to all components in the application.

    • All Components With Style Name

      Components specify this style selector using the styleName attribute. If you choose this option, then specify a name for the Selector.

    • Specific Component

      The style applies only to the selected component.

    • Specific component With Style Name

      The style applies only to the selected component, and references the style by the name of the type selector. If you choose this option, then specify a name for the type selector.

  6. Click OK.

    Flash Builder generates or updates the specified CSS file. Flash Builder also modifies the source code in the application to reference the type selector in the CSS file.

    Flash Builder removes references to the inline style or the skinClass property for the component.

Edit style rule

When external CSS styles are already applied to a component, you can quickly jump from the component to edit these styles.

  1. Select a component.

  2. In the Properties View, click the Edit Style Rule button next to the Style pop-up menu, then select the style you want to edit.

    The CSS file opens in the CSS editor’s Design mode. You use the Properties View to make further changes. You can also modify your CSS in Source mode.

Creating CSS files

Use the New CSS File wizard to create CSS files for a project. The New CSS File wizard creates a blank file that you can use to define your CSS styles.

By default, Flash Builder adds the default namespaces for Spark and MX styles.

To create a blank CSS file:

  1. From the Flash Builder menu, select File > New CSS File.

  2. Specify a source folder.

    The source folder can be in the current project or another project.

  3. Specify a package for the file

    Select from the packages available in the project. If you want to place the file in a new package, then first create the package. Select File > New Package.

  4. Specify a Name for the file.

  5. Click Finish.

Flash Builder uses templates that define the contents of newly created files. You can customize the templates that Flash Builder uses. See Customizing File Templates.

Using the CSS editor

Flash Builder provides a CSS editor which you can use to create and edit style sheets for your application. The CSS editor is available only in Source mode.

When you create a new style sheet in Flash Builder, Flash Builder provides the following declarations for the Spark and MX namespaces:

@namespace s "library://ns.adobe.com/flex/spark"; 
@namespace mx "library://ns.adobe.com/flex/mx";

Some Spark and MX components share the same local name. For example, there is a Spark Button component (in the spark.components.* package) and a MX Button component (in the mx.controls.* package). To distinguish between different components that share the same name, you specify namespaces in your CSS that apply to types.

If you do not use type selectors in your style sheets, then you are not required to declare namespaces. For more information, including examples, see About namespaces in CSS.

Note: Styles are handled differently for applications that use the Flex 3 SDK. If you are working in a Flex project that specifies the Flex 3 SDK, the CSS editor reverts to behavior implemented with Flex Builder 3. Refer to the Flex Builder 3 documentation for information on using the CSS editor for applications that use the Flex 3 SDK.