In Aspire, text styles are managed via an external CSS file which is loaded and parsed automatically by the framework. This CSS file is by default “text.css” in the theme folder (so you can easily define different text styles that are appropriate for different themes).

Multi-State Styles
Let’s take a look at a snippet of an example CSS file:

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 whose “textStyle” property has been set to “button” will render its text in black (#000000) normally, red (#cc0000) when mouse over, white (#ffffff) when selected, and gray (#808080) when disabled.

Embedded Styles
While it is recommended that you keep all the text styles defined in the external CSS file for easy modifications, you can also define additional styles in your application code. For example, take a look at the following:

import com.ghostwire.ui.containers.uiBox;
import com.ghostwire.ui.controls.uiText;
import com.ghostwire.ui.managers.uiTextStyles;
 
uiTextStyles.manager.setStyle("style1",{shadow:"#808080"});
uiTextStyles.manager.setStyle("style2",{color:"#ffffff",outline:"#000000"});
uiTextStyles.manager.setStyle("style3",{color:"#ffffff",outline:"#000000",shadow:"#808080"});
uiTextStyles.manager.setStyle("style4",{fontWeight:"bold"});
uiTextStyles.manager.setStyle("style5",{fontStyle:"italic"});
uiTextStyles.manager.setStyle("style6",{fontStyle:"italic",fontWeight:"bold"});
 
var txt:uiText = new uiText("this is normal text");
 
var txt_shadowed:uiText = new uiText("this text has gray shadow");
txt_shadowed.textStyle = "style1";
 
var txt_outline:uiText = new uiText("this is white text with black outline");
txt_outline.textStyle = "style2";
 
var txt_outshadowed:uiText = new uiText("this is white text with black outline and gray shadow");
txt_outshadowed.textStyle = "style3";
 
var txt_bold:uiText = new uiText("this is bold text");
txt_bold.textStyle = "style4";
 
var txt_italic:uiText = new uiText("this is italic text");
txt_italic.textStyle = "style5";
 
var txt_bolditalic:uiText = new uiText("this is bold italic text");
txt_bolditalic.textStyle = "style6";
 
var box:uiBox = new uiBox();
box.vertical = true;
addChild(box)
 
box.addChild(txt);
box.addChild(txt_shadowed);
box.addChild(txt_outline);
box.addChild(txt_outshadowed);
box.addChild(txt_bold);
box.addChild(txt_italic);
box.addChild(txt_bolditalic);

The above will generate the following:

(above is a screenshot of the compiled SWF)

“outline” and “shadow” Properties
As shown above, not only is it easy to define various text styles, you can also define “outline” and “shadow” properties (not otherwise available in vanilla Actionscript). The “outline” property when defined will cause the an outline to be drawn on the text glyphs. This is commonly seen in video subtitles. The “shadow” property when defined will cause the text cast a subtle shadow, resulting in either a raised or lowered look depending on the color combinations.

Containers and Style Inheritance
Note that all uiComponent instances have a “textStyle” property - 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. Therefore, 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 defined for that container.

Aspire UI Components Trial Version
You may experiment with the various features of the Actionscript 3.0 (AS3) Aspire UI Components by downloading the trial version at http://ghostwire.com/aspireui/download/
* Adobe Flash CS3 is required

Trackback URI | Comments RSS