Yesterday, I showed two different skins in the preview demo. I post the demo here again for easy reference:

Both embeds above point to the same SWF, with the second one having a flashVars “theme” property set to “classic”.

In Aspire, component skins are all based on PNG bitmap images. To simplify matters, this has been made mandatory - there is no option to use vector graphics or code-based skin classes for skinning. However, you have the option to either let Aspire load from external PNG files (preferred), or have the PNG bitmap images embedded inside the SWF.

Advantages
Personally, I prefer loading from external PNG files for various reasons. For one, I don’t need to recompile the SWF everytime I change the PNG images. Second, I can allow end-users to change the skins (for example, if I have a Flash application running from the desktop and I have exposed the theme folder for modifications). Also, if running from a browser, the PNG files can be cached (can be a double-edged sword though if you keep changing the PNG files in which case you should make sure the end-user clears the browser cache, or the location of the skin assets is changed so they get reloaded).

The use of PNG bitmap images makes it possible to completely separate code from the skins. Graphic designers only have to be responsible for supplying the bitmap images, without having to dabble in Flash at all.

The “skin” property
Some components (eg. uiButton, uiCheckBox, uiTextInput, etc.) use one single PNG bitmap image for skinning, while others (eg. uiScrollBar, uiSlider, etc.) use multiple images. In all cases, one component property “skin” determines the bitmap image(s) to use. For example, in the case of uiVScrollBar (vertical scrollbar), setting the “skin” property to “VScrollBar” uses the VScrollBar.png for its track, VScrollBarThumb.png for its thumb, VScrollBarDown.png for its down arrow button, and VScrollBarUp.png for its up arrow button (notice that the suffix “VScrollBar”, which is the “skin” property value, is used to identify which files to use).

rules.xml
All skin assets are stored inside a theme folder. In this folder, there is a rules.xml file. Let’s take a look at the rules.xml file (truncated here) stored in the “classic” theme folder:

<rules theme="classic" css="text.css">
	<Button slices="up,over,disabled,down,selected_up,selected_over,selected_down,selected_disabled,emphasized,emphasized_down" />
.
.
	<Slider edge="8,3" midY="5" slices="up,disabled,down" />
.
.
	<VScrollBar edge="0" repeat="xy" slices="up,disabled,down" />
.
.
</rules>

The rules.xml file specifies what to do with the images once we load them. In the XML, each node contains information pertaining to a specific skin image. Notice that each image (node) has a “slices” attribute. This attribute must be defined for each image because it tells Aspire to slice up the loaded image into the specified (equal) slices. Take a look at the Button.png image (I know, not the prettiest skin to look at, but simple for demo purposes):

The above Button.png image will be sliced equally, and stored and cached according to the “slices” attribute.

The “edge” attribute determines the non-scaling sides of the skin. When undefined, the edge is assumed to be 3 pixels for each side. This property is defined in the same way that the padding and margin properties of Aspire components are defined, which follows the rule that if you specify one value, that value is applied to all sides; if you supply two values, the first is applied to top and bottom, the second applied to left and right; if you supply three values, the first is applied to top, second to left and right, third to bottom; if you supply four, each side takes their respective values. This property is similar to the native DisplayObject’s scale9grid property, but instead of defining a Rectangle, you define the values for each side (which are intended to stay constant when the skin is resized).

The “midX” attribute specifies the middle horizontal portion that should not be scaled. The “midY” attribute specifies the middle vertical portion that should not be scaled. For example, in the “xp” theme, the VScrollBarThumb has midX and midY defined, because the thumb has a middle portion that is not intended to scale.

	<VScrollBarThumb edge="4" midX="8" midY="8" slices="up,over,down,disabled" />

The “repeat” arttibute specifies whether the scaling portion should be repeated (across x/y axis) instead of being scaled. For example, in the “classic” theme, the ScrollBar image, which is used for the track, has repeat set to “xy” - which means it should repeat across x and y axis without scaling. The “edge” for this skin is set to zero which means there are no non-scaling sides. The image is taken “as-is” and then repeated across the x and y axis.

So that is all the graphic designer needs to do - create the PNG images and specify the scaling rules in the rules.xml file. Typically, we would store the skin assets in “theme folders” and let the application pick up its choice of skins.

uiSkins
The uiSkins class is responsible for loading, caching and managing the skin assets. It is a singleton class that can be accessed via uiSkins.manager. The following shows the code that is used to initialize the manager in the demo SWF above:

uiSkins.initialize("/aspireui/swf/assets/skins/demo/"+((loaderInfo.parameters.theme==null) ? "xp" : loaderInfo.parameters.theme));
uiSkins.manager.onPreload = main;
uiSkins.manager.autoPreload();

The uiSkins.initialize() method allows you to specify where to find the skin assets.
The uiSkins.manager.onPreload property specifies the function/method to call when preloading has completed. In the above case, main() will be called.
The uiSkins.manager.autoPreload() method activates automatic preloading - what this does is to look at the rules.xml file and preloads all those images specified in the XML.

No support for runtime theming
There is no support for changing the theme during runtime. Once it is set, the same theme folder is to be used for the duration of the application. There is no intention to implement runtime theming. Although it is “cool” to do so, unless you are creating an operating system, this should not be a necessary thing to do. It is always recommended to ask end-users to restart an application if the theme has changed (as most desktop applications do) or to inform them that the change will take effect only next time the application is booted up.

Cheers!

GhostWire Studios is pleased to unveil Aspire UI Components. Written in Actionscript 3.0 from the ground up, the components are intended to be used in an “all-code” environment. No visual Flash IDE components will be shipped.

Let’s first take a look at a demo:

The above is a simple SWF, but it demonstrates quite a few of the features in Aspire. I will elaborate on the features of Aspire over the next few posts, but I will give a summary here:

Easy Skinning
In Aspire, skinning of components is done completely via PNG bitmap images. You can either embed the bitmap assets within your SWF, or you can let Aspire load from external PNG files (as the above demo does). This means that skin designers do not need to write a single line of code (I will elaborate in the next post). The following is the exact same SWF using a different “classic” theme:

Layout Management
Components in Aspire have “layout hints” properties such as alignX, alignY, fillX, fillY, padding and margin. The first set of Aspire UI Components will ship with a uiBox class, which is a container that automatically arranges its child objects sequentially horizontally or vertically. In the demo above, the components are positioned and sized automatically using uiBox containers and layout hints. For example, the following shows the code for the gender selection portion of the demo:

var genderText:uiText = new uiText("GENDER");
genderText.margin = "8,0,0,0";
genderText.textStyle = "header";
profileBox.addChild(genderText);
var genderBox:uiBox = new uiBox();
genderBox.spacing = 8;
profileBox.addChild(genderBox);
var genderMale:uiRadioButton = new uiRadioButton("Male");
genderMale.data = "maleIcon.png";
var genderFemale:uiRadioButton = new uiRadioButton("Female");
genderFemale.data = "femaleIcon.png";
var genderUnknown:uiRadioButton = new uiRadioButton("Unknown");
genderUnknown.data = "unknownIcon.png";
genderGroup = new uiButtonGroup(genderMale,genderFemale,genderUnknown);
genderGroup.selectedButton = genderMale;
genderBox.addChild(genderMale);
genderBox.addChild(genderFemale);
genderBox.addChild(genderUnknown);

Tab Focus Chain Management
Aspire has its own focus manager that overrides the native behavior of the Flash Player. The focus chain is set up automatically based on the containment hierarchy - it is unnecessary to assign any tabIndex in your application code. In other words, you just need to decide on the child index order, and the tab focus chain will follow that order.

Text Styles
In Aspire, you can define text styles via an external css file. By default, Aspire will load a text.css file stored in the theme’s folder. In addition to the usual text format properties, you can define an “outline” and a “shadow” property (both are color properties). 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.
The following shows the code for the “Aspire UI Components Preview” title text in the demo SWF:

var titleText:uiText = new uiText("Aspire UI Components Preview");
titleText.alignX = ALIGN.CENTER;
titleText.textStyle = "title";
titleText.padding = "6,12";
titleText.background = {color:0x819A98,cornerRadius:12}
topLevelBox.addChild(titleText);

And the css in text.css for the textStyle “title” is:

title
{
	fontSize:16;
	color:#ffffff;
	outline:#000000;
	shadow:#333333;
}

Availability
Coming soon! To be very clear, as the title of this post says, the above is just a preview based on pre-release code. Aspire UI Components have NOT YET been released. The components that are currently being sold on the GhostWire Studios website are the old Actionscript 1.0 Flash components.

Please feel free to leave a comment if you have any questions.

Thanks!