Default Shadow
The following is the default background property value for all uiWindow instances:
{shadow_up:0x000000, shadow_up_maximized:-1};
That tells the instance it should render a drop shadow of color 0×000000 when its visual state is “up”, and not render any drop shadow when its visual state is “up_maximized” (when it is maximized, the drop shadow cannot be seen so applying the effect will be pointless).

Always Cast Drop Shadow
To make a uiWindow instance always cast a drop shadow, you can set its background property as below:

var win:uiWindow = new uiWindow();
win.background = {shadow:0x000000};

Never Cast Drop Shadow
To make a uiWindow instance never cast a drop shadow, you can set its background property to null:

var win:uiWindow = new uiWindow();
win.background = null;

Glow Effect
As of v1.3.0+, you can also get the uiWindow instance (any uiComponent, actually) to cast a glow effect:

var win:uiWindow = new uiWindow();
win.background = {glow_up:0x000000, glow_up_maximized:-1};

Drop Shadow + Glow
In the “vista” theme, the uiWindow instances use drop shadow + glow effects:

See: “vista” themed uiWindow demo

Specifying Default uiWindow Background Property
If you wish to override the default background property value, ie set the default value for all uiWindow instances, you can do so by defining it in the theme folder’s “rules.xml”:

<Window edge="5,5,5" slices="up,out,up_maximized,out_maximized" prefs="padding|5|background|shadow_up,0,shadow_up_maximized,-1,glow,0,glowDepth,12,glow_up_maximized,-1" />

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework.

You may experiment with the various features by downloading the trial version.

The SWF above is approximately 84KB (the theme assets are embedded in the SWF).

Availability
The new theme has been included in the distributions for both Aspire UI Lite Edition and Aspire UI Standard Edition (v1.3.3).

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework.

You may experiment with the various features by downloading the trial version.

The uiDialog class helps to display simple modal windows. There are three types of built-in dialogs you can call up using the show() method of the class.

The show() method has the following signature:

show(textString, titleString, iconString, buttonsArray, promptBoolean, customSprite);

Alert Dialog
This is used to show a simple pop-up message that end-users must acknowledge by clicking a button:

uiDialog.instance.show("This is a simple Alert Dialog.","Warning!");
// show(messageString,titleString);

Confirmation Dialog
This is used to ask a question that the end-user must answer by selecting (clicking) a button (from two or more buttons):

uiDialog.instance.show("Save changes to document?","Proceed?",null,["Yes","No","Cancel"]);
// show(messageString,titleString,iconString,buttonsString);

Prompt Dialog
This is used to collect simple text input from the end-user:

uiDialog.instance.show("Please enter your name:","Full Name",null,null,true);
// show(messageString,titleString,iconString,buttonsArray,promptBoolean);

Custom Dialog
To facilitate the display of more complex dialogs, the show() method accepts a sixth parameter custom – a reference to a Sprite instance. This means that you can create whatever custom dialog content that you require and feed it to the show() method as the custom parameter.

var customContent:Sprite = new Sprite();
var customDialog:uiDialog = new uiDialog();
customDialog.show(null, "Title", null, ["ButtonOne", "ButtonTwo"], false, customContent);

Custom Dialog – Live Demo
The following is a live demo:

CustomDialogDemo Class

// ActionScript 3.0
package
{
	import com.ghostwire.ui.containers.uiFrame;
	import com.ghostwire.ui.containers.uiGrid;
	import com.ghostwire.ui.containers.uiPane;
	import com.ghostwire.ui.containers.uiWindow;
	import com.ghostwire.ui.controls.uiDialog;
	import com.ghostwire.ui.controls.uiText;
	import com.ghostwire.ui.controls.uiTextInput;
	import com.ghostwire.ui.controls.uiLabelButton;
	import com.ghostwire.ui.enums.ALIGN;
	import com.ghostwire.ui.managers.uiSkins;
 
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class CustomDialogDemo extends Sprite
	{
		public function CustomDialogDemo()
		{
			// ** make sure stage is not null **
			if (stage) init();
			else
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(evt:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
 
			// ** let assets preload before starting application **
			uiSkins.manager.addEventListener(Event.INIT,main);
		}
 
		// ** instances **
		private var responseTxt:uiText;
		private var userInput:uiTextInput;
		private var passInput:uiTextInput;
 
		private function main(evt:Event):void
		{
			// ** main application code **
 
			// ** initializes uiWindow class **
			uiWindow.initialize(stage);
 
			// ** topLevelPane **
			var topLevelPane:uiPane = new uiPane();
			topLevelPane.padding	= 8;
			topLevelPane.setSize(stage.stageWidth,stage.stageHeight);
			addChild(topLevelPane);
 
			var button:uiLabelButton	= new uiLabelButton("Open Custom Dialog");
			button.alignX			= ALIGN.CENTER;
			button.alignY			= ALIGN.BOTTOM;
			button.addEventListener(MouseEvent.CLICK,on_btnClick,false,0,true);
 
			topLevelPane.addChild(button);
 
			responseTxt = new uiText();
			topLevelPane.addChild(responseTxt);
			// ** end topLevelPane **
 
			on_btnClick(null);
		}
 
		private function on_btnClick(evt:MouseEvent):void
		{
			var userLabel:uiText		= new uiText("Username:");
			userLabel.alignY		= ALIGN.CENTER;
 
			userInput			= new uiTextInput();
			userInput.fillX			= true;
 
			var passLabel:uiText		= new uiText("Password:");
			passLabel.alignY		= ALIGN.CENTER;
 
			passInput			= new uiTextInput();
			passInput.displayAsPassword	= true;
			passInput.restrict		= "0-9a-zA-Z";
			passInput.fillX			= true;
 
			var loginGrid:uiGrid		= new uiGrid();
			loginGrid.columns		= 2;
			loginGrid.spacingH		= 4;
			loginGrid.spacingV		= 8;
			loginGrid.addChild(userLabel);
			loginGrid.addChild(userInput);
			loginGrid.addChild(passLabel);
			loginGrid.addChild(passInput);
 
			var loginFrm:uiFrame		= new uiFrame();
			loginFrm.title			= new uiText("Account");
			loginFrm.content		= loginGrid;
 
			var loginDialog:uiDialog = new uiDialog();
			loginDialog.addEventListener(Event.CLOSE, on_loginDialogClose, false, 0, true);
			loginDialog.show(null, "User Login", null, ["OK", "Cancel"], false, loginFrm);
			// show(message, title, icon, buttons, prompt, custom);
			userInput.setFocus();
 
			responseTxt.text = "Pending...";
		}
 
		private function on_loginDialogClose(evt:Event):void
		{
			var dialog:uiDialog = evt.target as uiDialog;
			if (dialog)
			{
				if (dialog.response == "OK")
				{
					responseTxt.text = "Username: "+userInput.text
					+ "\nPassword: " + passInput.text;
				}
				else
				{
					responseTxt.text = "Login canceled!"
					+ "\n\nBy the way... do you spell cancel'ed with one or two el's?"
				}
			}
		}
	}
}

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework.
You may experiment with the various features by downloading the trial version.

ConfirmCloseDialogDemo Example
The following demonstrates how a “Confirm Close” dialog can be implemented:

package 
{
	import com.ghostwire.ui.containers.uiWindow;
	import com.ghostwire.ui.controls.uiDialog;
	import com.ghostwire.ui.controls.uiLabelButton;
	import com.ghostwire.ui.controls.uiText;
	import com.ghostwire.ui.enums.WINDOW;
	import com.ghostwire.ui.managers.uiSkins;
 
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class ConfirmCloseDialogDemo extends Sprite 
	{
		public function ConfirmCloseDialogDemo():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
 
			uiSkins.manager.addEventListener(Event.INIT, main);
		}
 
		private var myWindow:uiWindow;
 
		private var confirmDialog:uiDialog;
 
		private function main(e:Event = null):void 
		{
			// ** main application code **
			uiWindow.initialize(stage);
 
			myWindow = new uiWindow(WINDOW.CAN_CLOSE | WINDOW.CAN_MOVE);
			myWindow.title = "Hello World!";
			myWindow.contentPadding = 10;
			myWindow.content.addChild(new uiText("Close this window by pressing the close button on the title bar."));
			myWindow.open();
 
			myWindow.addEventListener(Event.CLOSE, on_close, false, 0, true);
 
			var openBtn:uiLabelButton = new uiLabelButton("Open Window");
			openBtn.move(20, 20);
			addChild(openBtn);
 
			openBtn.addEventListener(MouseEvent.CLICK, on_openBtnClick, false, 0, true);
		 }
 
		private function on_openBtnClick(evt:MouseEvent):void
		{
			myWindow.open();
		}
 
		private function on_close(evt:Event):void
		{
			if (confirmDialog == null)
			{
				evt.preventDefault(); // ** cancels close action **
				confirmDialog = new uiDialog();
				confirmDialog.addEventListener(Event.CLOSE, on_confirmClose, false, 0, true);
				confirmDialog.show("Do you really want to close this window?", "Proceed?", null, ["Yes", "No"]);
			}
		}
 
		private function on_confirmClose(evt:Event):void
		{
			confirmDialog.removeEventListener(Event.CLOSE, on_confirmClose);
			if (confirmDialog.response === "Yes")
			{
				myWindow.close(); // ** confirmDialog now exists **
			}
			confirmDialog = null; // ** confirmDialog no longer exists **
		}
	}
}

How It Works
First, we listen for the Event.CLOSE event on the window instance:

myWindow.addEventListener(Event.CLOSE, on_close, false, 0, true);

When the close button is clicked, the window attempts to close itself, dispatching the Event.CLOSE event and the listener on_close() method is called:

private function on_close(evt:Event):void
{
	if (confirmDialog == null)
	{
		evt.preventDefault(); // ** cancels close action **
		confirmDialog = new uiDialog();
		confirmDialog.addEventListener(Event.CLOSE, on_confirmClose, false, 0, true);
		confirmDialog.show("Do you really want to close this window?", "Proceed?", null, ["Yes", "No"]);
	}
}

The on_close() method checks if the confirmDialog instance exists, if not, the close action is aborted and the confirmDialog instance is created and shown.

When the end-user dismisses the dialog by clicking the “Yes” or “No” button, or the close button on the dialog’s title bar, the on_confirmClose() method is called:

private function on_confirmClose(evt:Event):void
{
	confirmDialog.removeEventListener(Event.CLOSE, on_confirmClose);
	if (confirmDialog.response === "Yes")
	{
		myWindow.close(); // ** confirmDialog now exists **
	}
	confirmDialog = null; // ** confirmDialog no longer exists **
}

We check if the dialog was dismissed by clicking the “Yes” button, if so, the myWindow.close() method is called. This time round, when the on_close() method is called, the confirmDialog instance exists and therefore the close event will not be aborted/canceled (the on_close() method does nothing and the window proceeds to be closed).

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of these components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework.
You may experiment with the various features by downloading a trial version.

To be very clear, for any Aspire UI component, if width and height is explicitly set, then this explicit size becomes the preferred size. This means that if you set the size of a component instance explicitly, you are overriding what the component deems to be ideal.

Default Window Size
In the case of the uiWindow component, the preferred size of the container depends on the composite preferred sizes of its child content and the title bar. A uiWindow instance may also contain a status bar and a menu bar, in which case the preferred sizes of these will also be taken into account when computing the window’s preferred size.

If you do not set the width and height of a uiWindow container explicitly, it will attempt to display its content fully by giving itself a size big enough to accommodate the content. If the content is relatively big (compared to the available application Stage area), you should consider putting it inside a scroll pane. See the previous post – Using uiWindow: Implementing Scrollable Content.

Content
The content property of a uiWindow returns a reference to the embedded uiForm container. This uiForm container in turn contains the child display objects that make up the “content” of the window (the window itself does not contain the child objects directly).

var win:uiWindow = new uiWindow();
win.content.addChild(childObject);

Minimum Viewable Area
If a uiWindow container is resizable by end-users, the minimum size of the viewable area depends on the preferred size of the content. Therefore, to change the minimum size of the viewable area, you need to explicitly set the size of this content (which is the embedded uiForm instance containing any child display objects that make up the “content”).

var win:uiWindow = new uiWindow();
win.content.setSize(50, 50); // sets minimum viewable area to 50x50

Live Demo
We made some changes to the example shown in the previous post Using uiWindow: Implementing Scrollable Content:

• set minimum viewable area of window to 50×50
• set window size to 300×250 (note the difference between setting content size and window size)
• set “livedragging” to “true”, to demonstrate live drag-resizing

WinViewSizeDemo Class

package
{
	import com.ghostwire.ui.containers.uiScrollPane;
	import com.ghostwire.ui.containers.uiWindow;
	import com.ghostwire.ui.controls.uiImage;
	import com.ghostwire.ui.managers.uiCursors;
	import com.ghostwire.ui.managers.uiSkins;
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class WinViewSizeDemo extends Sprite
	{
		public function WinViewSizeDemo()
		{
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(evt:Event):void
		{
			// ** let assets preload before starting application **
			uiSkins.manager.addEventListener(Event.INIT, main);
		}
 
		private function main(evt:Event):void
		{
			// ** main application code **
 
			uiCursors.initialize(stage);
 
			uiWindow.initialize(stage);
 
			// ** create the content **
			var img:uiImage = new uiImage("flower.jpg");
 
			// ** create a scroll pane **
			var imgsp:uiScrollPane	= new uiScrollPane();
			imgsp.fillX = true;
			imgsp.fillY = true;
			imgsp.content.addChild(img); // ** add content to scroll pane **
 
			// ** create the window **
			var imgWin:uiWindow	= new uiWindow();
			imgWin.title		= "Flower";
			imgWin.content.addChild(imgsp); // ** add scroll pane to window **
 
			// ** show window **
			imgWin.open();
 
			// ** set minimum viewable area size to 50x50 **
			imgWin.content.setSize(50, 50);
 
			// ** set window size to 300x250 **
			imgWin.setSize(300, 250);
 
			// ** demonstrate live drag-resizing **
			imgWin.liveDragging = true;
		}
	}
}

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.

If scrollable content is required, you may implement it using the uiScrollPane class – create a uiScrollPane instance and add it to the content of the uiWindow instance. You would then add child display objects to the content of the uiScrollPane instance, instead of the content of the uiWindow container itself.

The fillX and fillY properties of the uiScrollPane instance should be set to true to enable automatic resizing when the uiWindow container is resized.

Example

package
{
	import com.ghostwire.ui.containers.uiScrollPane;
	import com.ghostwire.ui.containers.uiWindow;
	import com.ghostwire.ui.controls.uiImage;
	import com.ghostwire.ui.managers.uiCursors;
	import com.ghostwire.ui.managers.uiSkins;
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class ScrollWinDemo extends Sprite
	{
		public function ScrollWinDemo()
		{
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(evt:Event):void
		{
			// ** let assets preload before starting application **
			uiSkins.manager.addEventListener(Event.INIT, main);
		}
 
		private function main(evt:Event):void
		{
			// ** main application code **
 
			uiCursors.initialize(stage);
 
			uiWindow.initialize(stage);
 
			// ** create the content **
			var img:uiImage = new uiImage("flower.jpg");
 
			// ** create a scroll pane **
			var imgsp:uiScrollPane	= new uiScrollPane();
			imgsp.fillX = true;
			imgsp.fillY = true;
			imgsp.content.addChild(img); // ** add content to scroll pane **
 
			// ** create the window **
			var imgWin:uiWindow	= new uiWindow();
			imgWin.title		= "Flower";
			imgWin.content.addChild(imgsp); // ** add scroll pane to window **
 
			// ** show window **
			imgWin.open();
		}
	}
}

Demo

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.

When using the Aspire UI library, a modal window is created by including WINDOW.IS_MODAL in the “mode” parameter of the uiWindow constructor:

var modalWin:uiWindow = new uiWindow(WINDOW.CAN_CLOSE|WINDOW.CAN_MOVE|WINDOW.IS_MODAL);
modalWin.title = "A Modal Window";
modalWin.open();
/**
TIP:
The resulting value of WINDOW.CAN_CLOSE|WINDOW.CAN_MOVE|WINDOW.IS_MODAL
is the same as WINDOW.MODAL
**/

Modal background
Opening a modal window inserts a “background overlay” behind it that disables mouse-interactivity with the other parts of the application, until the modal window is dismissed. By default, this background overlay is completely transparent. This transparency level was chosen because such is the case observed in desktop applications and therefore would be what most end-users would be familiar with.

However, considering that the main purpose of a modal window is to attract user awareness, it is possible that applications may find it advantageous to colorize the background in order to highlight the modal window to end-users.

To change the color and/or transparency level of the background overlay, the static uiWindow properties “modalColor” and “modalAlpha” are used respectively.

The “modalAlpha” property indicates the transparency level of the background overlay. This value should be between 0.0 (totally transparent) and 1.0 (totally opaque).

The “modalColor” property indicates the color of the background overlay. Applicable only if the “modalAlpha” property has a non-zero and non-NaN value. If undefined, the resulting color will be black.

Example
The following is a modified version of the uiDialog live demo shown previously (modified here to demonstrate the use of the “modalColor” and “modalAlpha” properties):

• The uiDialog class is a subclass of uiWindow – uiDialog instances are all modal windows.
• Before Dialog A (“alert” dialog) is shown, uiWindow.modalColor is set to 0xFF0000 (red).
• Before Dialog B (“confirm” dialog) is shown, uiWindow.modalColor is set to 0x00FF00 (green).
• Before Dialog C (“prompt” dialog) is shown, uiWindow.modalColor is set to 0x0000FF (blue).
• In all three cases, uiWindow.modalAlpha is set to 0.5.
• Although the example uses red-green-blue colors for the modal window background overlay, it is unlikely that you would actually use those colors in your application. The red-green-blue colors were used simply to demonstrate what is possible. A more “universally appropriate”, useful setting that would blend into most themes would probably be uiWindow.modalAlpha=0.8 and uiWindow.modalColor=0xFFFFFF.
• Notice that if you click outside the modal window, the window blinks/flashes rapidly a few times – the intention is to draw the user’s attention to the modal window (this behavior is built into the uiWindow class).

The code for the example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

package
{
	import com.ghostwire.ui.containers.*;
	import com.ghostwire.ui.controls.*;
	import com.ghostwire.ui.data.*;
	import com.ghostwire.ui.events.*;
	import com.ghostwire.ui.enums.*;
	import com.ghostwire.ui.managers.*;
 
	import flash.display.Sprite;
	import flash.events.*;
	import flash.system.Capabilities;
 
	public class DialogDemo extends Sprite
	{
		// ** instances **
		private var responseText:uiText;
 
		public function DialogDemo()
		{
			// ** make sure stage is not null **
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
 
		private function init(evt:Event):void
		{
			// ** let assets preload before starting application **
			uiSkins.manager.addEventListener(Event.INIT,main);
 
			// ** initializes uiWindow class **
			uiWindow.initialize(stage);
		}
 
		private function main(evt:Event):void
		{
			// ** main application code **
 
			// ** topLevelPane **
			var topLevelPane:uiPane = new uiPane();
			topLevelPane.padding	= 10;
			topLevelPane.setSize(stage.stageWidth,stage.stageHeight);
			addChild(topLevelPane);
 
			var buttons:uiBox	= new uiBox();
			buttons.alignX		= ALIGN.CENTER;
			buttons.spacing		= 20;
 
			var winButtonA:uiLabelButton = new uiLabelButton("Dialog A");
			var winButtonB:uiLabelButton = new uiLabelButton("Dialog B");
			var winButtonC:uiLabelButton = new uiLabelButton("Dialog C");
 
			winButtonA.addEventListener(MouseEvent.CLICK,on_click,false,0,true);
			winButtonB.addEventListener(MouseEvent.CLICK,on_click,false,0,true);
			winButtonC.addEventListener(MouseEvent.CLICK,on_click,false,0,true);
 
			buttons.addChild(winButtonA);
			buttons.addChild(winButtonB);
			buttons.addChild(winButtonC);
 
			topLevelPane.addChild(buttons);
 
			responseText		= new uiText();
			responseText.alignX = ALIGN.CENTER;
			responseText.y		= 150;
			topLevelPane.addChild(responseText);
			// ** end topLevelPane **
		}
 
		private function on_click(evt:MouseEvent):void
		{
			switch (uiLabelButton(evt.target).text)
			{
				case "Dialog A":
					uiWindow.modalAlpha = 0.5;
					uiWindow.modalColor = 0xFF0000;
					uiDialog.instance.show("This is a simple Alert Dialog.","Warning!");
					break;
				case "Dialog B":
					uiWindow.modalAlpha = 0.5;
					uiWindow.modalColor = 0x00FF00;
					uiDialog.instance.show("Save changes to document?","Proceed?",null,["Yes","No","Cancel"]);
					break;
				case "Dialog C":
					uiWindow.modalAlpha = 0.5;
					uiWindow.modalColor = 0x0000FF;
					uiDialog.instance.show("Please enter your name:","Full Name",null,null,true);
					break;
				default:
					// no default action
			}
			responseText.text = "uiDialog.instance.response property value:nn"+uiDialog.instance.response;
			uiDialog.instance.addEventListener(Event.CLOSE,on_dialogClose);
		}
 
		private function on_dialogClose(evt:Event):void
		{
			responseText.text = "uiDialog.instance.response property value:nn"+uiDialog.instance.response;
		}
	}
}

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of these components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.

• Dialog A shows a simple message with a single button (an “alert” dialog).
• Dialog B is shown with three buttons each with custom labels (a “confirmation” dialog). The “response” property returns the text label on the button pressed.
• Dialog C is shown with an input text field (a “prompt” dialog). The “response” property returns the text typed into the input text field if the OK button or ENTER key is pressed. Otherwise, the property returns null.
• A dialog can be closed by pressing the ESCAPE key, in which case the “response” property returns null.
• The image shown in the dialog is loaded from external PNG file and rendered using the uiImage class. The external image is loaded once and cached.

See also: uiDialog usage notes

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.

The following is the exact same SWF shown in the previous uiWindow Example, but this time it is rendered using the “classic” theme (included in the Aspire UI distribution):

Exact same SWF, just with an additional fvars “classic=true” set.

Within the application code, a single line of code determines which theme to use:

uiSkins.initialize(theme);

If the uiSkins.initialize() call is omitted, the “default” theme is used.

In the example above, we use the following code to detect if the fvars is set and if so use the “classic” theme:

uiSkins.initialize(((loaderInfo.parameters.classic) ? "classic" : "default"));

See also: uiSkins usage notes

NOTE: By deliberate design, the Aspire UI framework does not support “on-the-fly” theme changing during application run-time. A theme is fixed once the uiSkins.initialize() call is made. This is by deliberate design because, as with most desktop applications, it is better to ask end-users to “re-start” the application before effecting a new theme.

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.