What are modal windows?
In user interface design, a modal window is one that commands the end-user’s immediate attention – the user must interact with the window and/or close it before he may return to the main application.

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 0×00FF00 (green).
• Before Dialog C (“prompt” dialog) is shown, uiWindow.modalColor is set to 0×0000FF (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.

Other Posts You Might Enjoy:

• uiWindow: Implementing “Confirm Close” Dialog
• uiWindow: Setting Minimum Size Of Viewable Area
• uiWindow: Background Drop Shadow + Glow Effect
• uiDialog: Displaying Custom Dialog Content
• Using uiWindow: Implementing Scrollable Content

Trackback URI | Comments RSS