Sep 04 2009
uiDialog: Displaying Custom Dialog Content
A modal window is a window that must be dismissed before interaction with the other parts of the application can be resumed. This is usually used to draw attention to a certain task at hand.
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.
