Hello World!

This is the mandatory classic example.

In this tutorial, we will use the Aspire UI library to create a very simple application, one that simply displays the text “Hello World!” when a button is clicked.

 1: package
 2: {
 3:
 4:     import com.ghostwire.ui.containers.uiBox;
 5:     import com.ghostwire.ui.controls.uiLabelButton;
 6:     import com.ghostwire.ui.controls.uiText;
 7:     import com.ghostwire.ui.managers.uiSkins;
 8:
 9:     import flash.display.Sprite;
10:     import flash.events.Event;
11:     import flash.events.MouseEvent;
12:
13:     public class HelloWorld extends Sprite
14:     {
15:         private var box:uiBox;
16:         private var btn:uiLabelButton;
17:         private var txt:uiText;
18:
19:         public function HelloWorld()
20:         {
21:             addEventListener(Event.ADDED_TO_STAGE,init);
22:         }
23:
24:         private function init(evt:Event):void
25:         {
26:             // ** optional but recommended **
27:             stage.scaleMode    = "noScale";
28:             stage.align        = "TL";
29:
30:             // ** uncomment to use "classic" theme **
31:             // uiSkins.initialize("classic");
32:
33:             // ** optional but recommended **
34:             // ** let assets preload before starting application **
35:             uiSkins.manager.addEventListener(Event.INIT,main);
36:         }
37:
38:         private function main(evt:Event):void
39:         {
40:             // ** main application code **
41:             btn = new uiLabelButton("Hello World");
42:             btn.addEventListener(MouseEvent.CLICK,on_buttonClick,false,0,true);
43:
44:             txt = new uiText();
45:
46:             box = new uiBox();
47:             box.addChild(btn);
48:             box.addChild(txt);
49:
50:             addChild(box);
51:         }
52:
53:         private function on_buttonClick(evt:MouseEvent):void
54:         {
55:             txt.text = "Hello World!";
56:         }
57:     }
58: }

HelloWorld.as

1. Make sure you are working in your “deploy” folder. To be very clear, this folder need not be named “deploy”, but it must contain your skin assets (the “assets” folder).
   
2. Open Adobe Flash CS3.
3. Create a new ActionScript File (.as) in the “deploy” folder with the code shown above, or use HelloWorld.as.
4. Create a new ActionScript 3.0 Flash File (.fla) in “deploy” folder and link it to HelloWorld.as via the Properties Panel.
   (Note: specify the “class” not the “file”, ie specify “HelloWorld” not “HelloWorld.as” - avoid this common beginner mistake)
   
5. Bring up the Components Panel (CTRL-F7) and add Aspire UI Set 1 component to the Flash File (either drag-n-drop or double-click the component in the Components Panel).
   
6. Delete the component from the stage of the Flash File, but keep it in the Library (it must be in the Library in order for the Aspire UI classes to be available).
7. Compile (CTRL-ENTER).

The resulting SWF will show a simple application with just one button with the label “Hello World”.

After the button is clicked, the application will show the text “Hello World!” next to the button.

* If you are interested in using the command-line tool “mxmlc.exe” to compile, look at Compiling with Flex MXMLC.

Let's look at the code in the HelloWorld class.

Lines 15-17
The three UI elements used are declared.

Line 41
A uiLabelButton is created with the label “Hello World”.

Line 42
The uiLabelButton listens for the MouseEvent.CLICK event and calls the function on_buttonClick when the event triggers.

Line 44
A uiText is created with empty text.

Line 46
A uiBox layout container is created for easy layout.

Lines 47-48
The uiLabelButton is added to the uiBox, followed by the uiText. The order is important because it affects the positioning of the objects.

Line 50
The uiBox instance is added to the DisplayList (stage), and the components are realized.

Lines 53-56
Defines the on_buttonClick event handler function that is called when the uiLabelButton instance is clicked. This function simply sets the text displayed by the uiText instance to “Hello World!”.