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

Aspire has its own focus manager that overrides the native behavior of the Flash Player. The tab focus chain is automatically set up based on the containment hierarchy (ie, the child index order is the tab focus chain order) - you do not need to set up “tabIndex” manually in your application code.

Additionally, the tab focus chain will automatically include children and grandchildren, as demonstrated in the following diagram:

(The digits indicate the tab focus chain order)

uiFocusRect
The focus rectangle is rendered using the com.ghostwire.ui.core.uiFocusRect class, which is a subclass of the com.ghostwire.ui.core.uiBitmapImage class. This makes it easy to customize the focus rectangle using PNG bitmap files. By default, the “FocusRect.png” image in the theme folder is used to render the focus rectangle (scaling rules are set in the “rules.xml” file).

“focusRect” Property
Each uiComponent instance has a “focusRect” property, making it possible to use different renderers for the focus rectangle of different component instances (for example, a dark colored control may want to use a light colored focus rectangle). You can also set this property to “false”, if no focus rectangle is intended. Just like the “textStyle” property, if the value is undefined (which is the case by default), the component instance will use the value set for its parent 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

In Aspire, the amount of absolute positioning and sizing in application code that you need to do is minimal. By using layout containers such as the uiBox and layout hints such as “alignX”, “alignY”, “fillX”, “fillY”, “padding” and “margin”, you can easily achieve various types of UI layouts. This is important because as you change text styles, skins, and/or embedded contents, the desired sizes and positions of component instances will likely change. By using automatic layout, your UI components can reposition and resize automatically in response to changes in the text styles, skins, and/or embedded contents.

Take a look at an example:

import com.ghostwire.ui.containers.uiBox;
import com.ghostwire.ui.controls.uiLabelButton;
import com.ghostwire.ui.enums.ALIGN;
 
var btn1:uiLabelButton = new uiLabelButton("Button 1");
 
var btn2:uiLabelButton = new uiLabelButton("Button 2");
btn2.alignX = ALIGN.CENTER;
 
var btn3:uiLabelButton = new uiLabelButton("Button 3");
btn3.alignX = ALIGN.RIGHT;
 
var btn4:uiLabelButton = new uiLabelButton("Button 4");
btn4.fillX = true;
 
var btn5:uiLabelButton = new uiLabelButton("Extra Long Button 5");
 
var box:uiBox = new uiBox();
box.vertical = true;
box.spacing = 5;
addChild(box);
 
box.addChild(btn1);
box.addChild(btn2);
box.addChild(btn3);
box.addChild(btn4);
box.addChild(btn5);

The above will generate the following:

(above is a screenshot of the compiled SWF)

Allocation
Each uiComponent instance added to a layout container is allocated a rectangular space within which it will be constrained - the uiComponent instance will resize and reposition itself based on this allocation. The amount of space that is allocated depends on the desired space of the child component(s) and whether the container can grow/shrink. This is the basic concept behind the layout strategy in Aspire.

“alignX” and “alignY” Properties
Each uiComponent instance has a “alignX” and a “alignY” property. The “alignX” property Indicates how the component would like to be aligned horizontally within its allocated space. The “alignY” property Indicates how the component would like to be aligned vertically within its allocated space. In the above example, Button 2 is aligned center horizontally, and Button 3 is aligned right horizontally.

“fillX” and “fillY” Properties
Each uiComponent instance has a “fillX” and a “fillY” property. The “fillX” property Indicates whether the component should automatically resize itself to fill the allocated space fully horizontally. The “fillY” property Indicates whether the component should automatically resize itself to fill the allocated space fully vertically. In the above example, Button 4 has “fillX” set to “true”, making it resize its width automatically to match the width of its allocated space.

“margin” and “padding” Properties
Each uiComponent instance has a “margin” and a “padding” property. The “margin” property indicates the thickness of the space surrounding the component, while the “padding” property indicates the thickness of the space surrounding any embedded child content of the component. In the above example, the “padding” property of the uiLabelButton instances is automatically set using what is defined in the “rules.xml” file in the theme folder.

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

The trial version of Aspire UI Components Set 1 is now available for download at
http://ghostwire.com/aspireui/download/

* This trial version is strictly for evaluation purposes.
* Compiled SWFs will only work with a debug version of the Flash Player
(such as the internal player of Adobe Flash CS3).
* Compiled SWFs will stop working some time in the future.
* Limitations are removed in the full commercial version.
* Adobe Flash CS3 is required (you must install the provided install.mxp).
* Actionscript 3.0 coding is required.

The AS3 API Reference is available at
http://ghostwire.com/aspireui/docs/api/

If you have any question, please feel free to register and post at the new forums at
http://ghostwire.com/discuss/