Using Text Styles

In Aspire UI, text styles are defined in an external CSS file which is loaded and parsed automatically by the uiTextStyles manager. This CSS file is by default “text.css” in the theme folder¹⁾. Keeping the CSS file in the theme folder makes it easy for theme designers to define text styles that are appropriate for different themes.

Strictly speaking, the Aspire UI library is not really using Cascading Style Sheets (CSS) to style text in Flash applications - we are merely borrowing the CSS file format for style definitions.

Style properties are defined in the same way you normally would in CSS:

header
{
    color:#445566;
    fontWeight:bold;
}
footer
{
    color:#ffffff;
    fontStyle:italic;
}

However, it is important to note the following when defining text styles in the CSS file:

• style names must be all lower-case;
• style names must not contain underscore (“_”) unless a sub-style is being defined (see below);
• style names must not start with dot/period (”.”); and
• you must not define empty styles (which is pointless in the first place anyway)²⁾.

While it is recommended that you keep all the text styles defined in the external CSS file for easy modifications, you can also define them via ActionScript. The uiTextStyles.manager³⁾ manages all text styles in the Aspire UI framework - to use it, you must import the uiTextStyles class:

    import com.ghostwire.ui.managers.uiTextStyles;

The CSS shown above can then be defined via ActionScript:

    uiTextStyles.manager.setStyle("header",{color:"#445566",fontWeight:"bold"});
    uiTextStyles.manager.setStyle("footer",{color:"#ffffff",fontStyle:"italic"});

Styles with an underscore (“_”) are sub-styles. These are styles defined for UI controls with multiple visual states.

Consider the following CSS:

button
{
    color:#000000;
}
button_disabled
{
    color:#808080;
}
button_over
{
    color:#cc0000;
}
button_selected
{
    color:#ffffff;
}

The above demonstrates how to define text styles for different visual states. For example, a uiLabelButton instance using the “button” text style will render its text in black (#000000) normally, red (#cc0000) when mouse over, white (#ffffff) when selected, and gray (#808080) when disabled. Notice that you do not need to define the sub-style for every visual state - if a sub-style is missing, the parent style will be used.

Note that sub-styles will inherit all properties defined in the parent style.

button
{
    fontFamily:"Comic Sans MS";
    fontWeight:bold;
    color:#000000;
}
button_down
{
    color:#FFFFFF;
}
button_over
{
    color:#cc0000;
}

In the above, the sub-styles “button_down” and “button_over” will inherit the font-family and font-weight style properties from the parent style “button”.

Each uiComponent instance, regardless of whether it is a container or control, has a textStyle property indicating the name of the style to use (a String value).

This property has an inheriting nature - if the property is not set for a particular instance, it will use the value set for its container and this cascades recursively upwards until we reach the top-level container⁴⁾. The default value is null, which means the instance should use the value set for its container.

Therefore, you do not need to set the textStyle property of each individual uiText instance directly because they will inherit the property value from their containing (grand)parents if their own textStyle property is undefined. You can set the textStyle property of a container and all the uiText instances within the container whose textStyle property is undefined will inherit that same value. This cascades recursively downwards through all grandchildren.

By default, the text in uiComponent instances will be rendered using the font Tahoma, size 12.

You can override this default setting by defining the “default” style, either via CSS in the “text.css” file or via ActionScript in your application code using the uiTextStyles.manager.

For example, to use “Comic Sans MS” as the default font, size 11 and in bold-face, we will define the “default” style as:

default
{
    fontFamily:"Comic Sans MS";
    fontSize:11;
    fontWeight:bold;
}

In ActionScript, this can be done via the uiTextStyles.manager:

    uiTextStyles.manager.setStyle("default",{fontFamily:"Comic Sans MS",fontSize:11,fontWeight:"bold"});