Aug 28 2009
uiWindow: Implementing “Confirm Close” Dialog
A uiWindow container has a title bar that contains a close button if the instance has been set to be closeable by end-users. If closing the window would in turn produce any result that the end-user may regret, for example if closing the window is equivalent to aborting an ongoing task, or data collected from the end-user would be lost, then it is often appropriate to ask the end-user to confirm if he would like to close the window. This is usually done by showing a modal dialog asking the end-user to confirm the action.
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.
