Flex Styles

The appearance of Flex components are modified via style attributes.

You modify the appearance of Flex components through style properties. These properties can define the size of a font used in a Label control, or the background color used in the Tree control. In Flex, some styles are inherited from parent containers to their children, and across style types and classes. This means that you can define a style once, and then have that style apply to all controls of a single type or to a set of controls. Also, you can override individual properties for each control at a local, document, or global level, giving you great flexibility in controlling the appearance of your applications.

First, let's see a few quick code examples of using Styles in Flex, MXML, and ActionScript. These examples are explained in more detail later on in this document.

Setting style attributes in MXML:

   <mx:Button fontSize="15" color="0xFF0000" />
   <mx:TextArea fontSize="12" backgroundColor="0xFFFFFF" />

Setting and getting Style attributes in ActionScript:

   // setting a components styleName to reference a CSS class
   component.styleName = "highlight";
   
   // set a Button's background color and font size
   submitButton.setStyle( "backgroundColor", 0x000000 );
   submitButton.setStyle( "fontSize", 14 );
   
   // get a TextArea's font family and color
   textArea.getStyle( "fontFamily" );
   textArea.getStyle( "color" );

Defining an inline StyleSheet in MXML:

   <mx:Style>
      /* Set every button to have a font size of 15 pixels and bold. */
      Button {
         font-size: 15px;
         font-weight: bold;
      }
      
      /* Set components using the 'highlight' styleName to have a yellow background. */
      .highlight {
         background-color: #FFFF00;
      }
   </mx:Style>

Referencing an external StyleSheet in MXML:

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

About Styles

Flex's Style system is robust and flexible. Style attributes, Style sheets, Style manager...

Style Attributes

Styles are a collection of attributes...

Style values can be of type String, Number, Boolean, or Class, depending on the Style. So, for instance, getStyle("fontFamily") returns a String while getStyle("fontSize") returns a Number.

The full list of Style attributes available to a component can be found in each component's ActionScript documentation.

Similarities to CSS (Cascading Style Sheets) (TODO)

Styles in Flex are a lot like CSS (which can be helpful), but not exactly the same (which can be confusing).

Flex does not support controlling all aspects of component layout with CSS. Properties such as x, y, width, and height are properties of a component, not styles.

Supported attributes... TODO

Attribute name (font-size and fontSize)... TODO

Style Inheritance

CSS Inheritance of Styles

Some style properties also support Cascading Style Sheet (CSS) inheritance. CSS inheritance means that if you set the value of a style property on a parent container, a child of that container inherits the value of the property when your application runs.

Object-Oriented Inheritance of Styles

When you implement a style property in an ActionScript component, that property is automatically inherited by any subclasses of your class, just as methods and properties are inherited. This type of inheritance is called object-oriented inheritance.

Getting and Setting Styles

Styles can be set and retrieved a variety of ways, using ActionScript, in MXML, using CSS files...

Style values can be of type String, Number, Boolean, or Class, depending on the Style. So, for instance, getStyle("fontFamily") returns a String while getStyle("fontSize") returns a Number.

Color Values

When you get a color style property with the getStyle() method, Flex returns an Number that represents the hexadecimal value of the style property. To convert this Number to hexadecimal format use the toString() method and pass it the value 16 for the radix (or base).

   button.getStyle( "color" ).toString( 16 );

Defining StyleSheet using <mx:Style> in MXML

The <mx:Style> element in an MXML file allows the definition of an inline StyleSheet.aliases Its use is very similar to a <style> element in an HTML file.

Below is an example of a using the <mx:Style>> element in an MXML file:

   <mx:Style>
      /* Set every button to have a font size of 15 pixels and bold. */
      Button {
         font-size: 15px;
         font-weight: bold;
      }
      
      /* Set components using the 'highlight' styleName to have a yellow background. */
      .highlight {
         background-color: #FFFF00;
      }
   </mx:Style>

The above defines two style declarations, "Button" and ".highlight". The "Button" style applies to all button controls. The ".highlight" style is applied to all controls that specify a "highlight" styleName.

The <mx:Style element can also be used to reference an external StyleSheet file via the source attribute.

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

The above example references a style.css file in your Flex project but external to the MXML file.

Setting Styles in MXML

The below MXML sets a Button's and TextArea's styles.

   <mx:Button fontSize="15" color="0xFF0000" />
   <mx:TextArea fontSize="12" backgroundColor="0xFFFFFF" />

Setting Styles in ActionScript

To get and set component styles via ActionScript use the getStyle() and setStyle() functions.

   // set a Button's background color and font size
   submitButton.setStyle( "backgroundColor", 0x000000 );
   submitButton.setStyle( "fontSize", 14 );
   
   // get a TextArea's font family and color
   textArea.getStyle( "fontFamily" );
   textArea.getStyle( "color" );

When you use the setStyle() method to change an existing style Flex does not discard the original style setting. The original value can be restored by setting the style property to null.

The styleName Property

The styleName property is similar to setting the class attribute of an HTML element. Setting the value of a styleName property to "polka" references the style declared as ".polka" (note the leading ".") in the declared style definitions.

The styleName property can be set on supporting components in both MXML and ActionScript.

   <mx:HBox styleName="nameOfStyle">
      ...
   </mx:HBox>

   submitButton.styleName = "nameOfStyle";

CSS Style Declaration (mx.styles.CSSStyleDeclaration)

The CSSStyleDeclaration class can be used to build and manipulate style definitions at run-time.

Styles defined in StyleSheets and/or registered with the StyleManager are accessible via its getStyleDeclaration() method.

   // get the style declaration for all Buttons
   var cssButton:CSSStyleDeclaration = 
      StyleManager.getStyleDeclaration( "Button" );
   
   // get the style declaration for the "CustomButton" class
   var cssCustom:CSSStyleDeclaration = 
      StyleManager.getStyleDeclaration( ".CustomButton" );

New styles can be defined by creating a new CSSStyleDeclaration instance and registering with the StyleManager's setStyleDeclaration() method. The declaration's constructor optionally takes the selector as an argument.

   // create a style declaration for the "CustomButton" class
   var cssCustom:CSSStyleDeclaration = new CSSStyleDeclaration();
   cssCustom.setStyle( "fontSize", 15 );
   cssCustom.setStyle( "color", 0xFF0000 );
   
   // register the new style
   StyleManager.setStyleDeclaration( ".customButton", cssCustom, true );

Defining Custom Styles in Custom Components

[Style] Metadata Tag (TODO)

The [Style] Metadata tag allows components to define styles...

The [Style] tag also provides information that allows Flex Builder to...