Aspire UI Components (Flash ActionScript 3.0) Docs

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.

HelloWorld class

Actionscript 3.0 HelloWorld class

 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


Compiling HelloWorld

  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).
    Anatomy of the "deploy" 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)
    Adobe Flash CS3 Properties Panel
  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).
    Add component to Flash File
  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”.
HelloWorld

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

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


Understanding HelloWorld

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!”.

 
 
Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki