Creating custom dialog boxes using the PopUpManager and TitleWindow classes

Here are a couple examples of using the TitleWindow container with the PopUpManager class to create custom pop-up windows and dialog boxes.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/20/creating-custom-dialog-boxes-using-the-popupmanager-and-titlewindow-classes/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.controls.Label;
            import mx.events.CloseEvent;
            import mx.containers.TitleWindow;
            import mx.managers.PopUpManager;

            private var titleWindow:TitleWindow;

            private function init():void {
                var label:Label = new Label();
                label.text = "Hello world";

                titleWindow = new TitleWindow();
                titleWindow.title = "Custom title";
                titleWindow.showCloseButton = true;
                titleWindow.width = 240;
                titleWindow.height = 180;
                titleWindow.addEventListener(CloseEvent.CLOSE, titleWindow_close);
                titleWindow.addChild(label);

                PopUpManager.addPopUp(titleWindow, this, true);
                PopUpManager.centerPopUp(titleWindow);
            }

            private function titleWindow_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(titleWindow);
            }
        ]]>
    </mx:Script>

    <mx:Button label="Launch TitleWindow" click="init()" />

</mx:Application>

View source is enabled in the following example.

Here’s another example showing a custom TitleWindow built in MXML instead of ActionScript. In this example you have to select a check box before you can continue on with a wizard. I copied the idea from the EULA page for an add-on I happened to be installing at the time. You could combine this with the previous entry on “Disabling a Button control for a fixed number of seconds” so that the user has to wait 5 seconds before they can agree/continue.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/20/creating-custom-dialog-boxes-using-the-popupmanager-and-titlewindow-classes/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.containers.TitleWindow;
            import mx.managers.PopUpManager;

            private var titleWindow:TitleWindow;

            private function popUp():void {
                titleWindow = PopUpManager.createPopUp(this, CustomTitleWindow, true) as TitleWindow;
                PopUpManager.centerPopUp(titleWindow);
            }
        ]]>
    </mx:Script>

    <mx:Button label="Launch TitleWindow" click="popUp()" />

</mx:Application>

CustomTitleWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/20/creating-custom-dialog-boxes-using-the-popupmanager-and-titlewindow-classes/ -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
        title="Installing Super Awesome Component Set for Flex 3"
        layout="vertical"
        width="480"
        height="240"
        titleStyleName="titleText"
        backgroundColor="white"
        backgroundAlpha="1.0"
        borderColor="white"
        borderAlpha="1.0"
        cornerRadius="0"
        dropShadowEnabled="false"
        showCloseButton="true"
        close="titleWindow_close(event)">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;

            private function titleWindow_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(this)
            }

            private function titleWindow_continue():void {
                Alert.show("Installing...");
                PopUpManager.removePopUp(this);
            }
        ]]>
    </mx:Script>

    <mx:Style>
        .titleText {
            fontSize: 14px;
        }
        .headingText {
            paddingTop: 10px;
            paddingBottom: 10px;
            fontSize: 10px;
        }
    </mx:Style>

    <mx:Text text="You must accept the software license terms in order to continue the installation."
            width="100%"
            styleName="headingText" />

    <mx:TextArea text="The quick brown fox jumped over the lazy dog"
            width="100%"
            height="100%" />

    <mx:HBox width="100%">
        <mx:CheckBox id="checkBox"
                label="Click here to accept the software license terms."
                width="100%" />

        <mx:Button label="Continue"
                enabled="{checkBox.selected}"
                click="titleWindow_continue()" />
    </mx:HBox>

</mx:TitleWindow>

View source is enabled in the following example.

Tagged as: addPopUp(), centerPopUp(), createPopUp(), removePopUp()