About Themes

A theme is a collection of skins, typically with consistent look, stored in the same folder. A theme would also usually have its own set of appropriate text styles declared in a CSS file stored in the same folder.

By default, Aspire UI will use the “default” theme, ie the assets stored in the “assets/skins/default” folder.

To switch to another theme, you can simply override the “default” folder with another theme folder. This method does not require re-compiling. For example:

1. Run a compiled SWF and verify that it is using the default theme.
   
2. Close the SWF.
3. Rename folder “assets/skins/default” to “assets/skins/old”.
4. Rename folder “assets/skins/classic” to “assets/skins/default”.
5. Run your SWF again - it now uses the “classic” theme.
   

Alternatively, you can indicate which theme folder to use in your application code. To do so, you must import the uiSkins class:

    import com.ghostwire.ui.managers.uiSkins;

You can then call the uiSkins.initialize() method:

    uiSkins.initialize("classic");

IMPORTANT: You must do this before you create any uiComponent instance otherwise an error will be thrown¹⁾.

 1: package
 2: {
 3:     import com.ghostwire.ui.containers.uiBox;
 4:     import com.ghostwire.ui.controls.uiLabelButton;
 5:     import com.ghostwire.ui.managers.uiSkins;
 6:
 7:     import flash.display.Sprite;
 8:     import flash.events.Event;
 9:
10:     public class ThemeExample extends Sprite
11:     {
12:         public function ThemeExample()
13:         {
14:             addEventListener(Event.ADDED_TO_STAGE,init);
15:         }
16:
17:         private function init(evt:Event):void
18:         {
19:             // ** main application code **
20:             // ** use "classic" theme **
21:             uiSkins.initialize("classic");
22:
23:             uiSkins.manager.addEventListener(Event.INIT,main);
24:         }
25:
26:         private function main(evt:Event):void
27:         {
28:             // ** the rest of the code **
29:             var box:uiBox = new uiBox();
30:             addChild(box);
31:
32:             box.addChild(new uiLabelButton("One"));
33:             box.addChild(new uiLabelButton("Two"));
34:             box.addChild(new uiLabelButton("Three"));
35:         }
36:     }
37: }

ThemeExample.as