Creating a pop-up window -- Flex 2

To create a pop-up window, use the PopUpManager's createPopUp() method. The createPopUp() method has the following signature:

public static createPopUp(parent:DisplayObject, class:Class,
    modal:Boolean = false) : IFlexDisplayObject

Argument	Description
parent	A reference to a window to pop-up over.
class	A reference to the class of object you want to create, typically a custom MXML component that implements a TitleWindow container.
modal	(Optional) A Boolean value that indicates whether the window is modal, and takes all mouse input until it is closed (`true`), or whether interaction is allowed with other controls while the window is displayed (`false`). The default value is `false`.

You can also create a pop-up window by passing an instance of a TitleWindow class or custom component to the PopUpManager's addPopUp() method. For more information, see Using the addPopUp() method.

Defining a custom TitleWindow component

One of the most common ways of creating a TitleWindow container is to define it as a custom MXML component.

The following example code defines a custom MyLoginForm TitleWindow component that is used as a pop-up window:

<?xml version="1.0"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="doInit();">
    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            
            private function doInit():void {
                // Center the TitleWindow container 
                // over the control that created it.
                PopUpManager.centerPopUp(this);
            }
            
            private function processLogin():void {
                // Check credentials (not shown) then remove pop up.
                PopUpManager.removePopUp(this);
            }
        ]]>
    </mx:Script>
    <mx:Form>
        <mx:FormItem label="User Name">
            <mx:TextInput id="username" width="100%"/>
        </mx:FormItem> 
        <mx:FormItem label="Password">
            <mx:TextInput id="password" displayAsPassword="true" width="100%"/>
        </mx:FormItem> 
    </mx:Form>
    <mx:HBox> 
        <mx:Button click="processLogin();" label="OK"/> 
        <mx:Button click="PopUpManager.removePopUp(this);" label="Cancel"/> 
    </mx:HBox> 
</mx:TitleWindow>

This file, named MyLoginForm.mxml, defines a TitleWindow container by using the <mx:TitleWindow> tag. The TitleWindow container defines two TextInput controls, for user name and password, and two Button controls, for submitting the form and for closing the TitleWindow container. This example does not include the code for verifying the user name and password in the submitForm() event listener.

In this example, you process the form data in an event listener of the MyLoginForm.mxml component. To make this component more reusable, you can define the event listeners in your main application. This lets you create a generic form that leaves the data handling to the application that uses the form. For an example that defines the event listeners in the main application, see Using TitleWindow and PopUpManager events.

Using the PopUpManager to create the pop-up TitleWindow

To create a pop-up window, you call the PopUpManager's createPopUp() method and pass it the parent, the name of the class that creates the pop-up, and the modal Boolean value. The following main application code creates the TitleWindow container defined in Defining a custom TitleWindow component:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            // Import the PopUpManager.
            import mx.managers.PopUpManager;
            import mx.core.IFlexDisplayObject;

            private function showLogin():void {
                // Create a non-modal TitleWindow container.
                var helpWindow:IFlexDisplayObject =
                    PopUpManager.createPopUp(this, MyLoginForm, false);
            }
        ]]>
    </mx:Script>
    
    <mx:VBox width="300" height="300">    
        <mx:Button click="showLogin();" label="Login"/>
    </mx:VBox>
</mx:Application>

In this example, when the user selects the Login button, the event listener for the click event uses the createPopUp() method to create a TitleWindow container, passing to it the name of the MyLoginForm.mxml file as the class name.

Often, you cast the return value of the createPopUp() method to TitleWindow so that you can manipulate the properties of the pop-up TitleWindow container, as the following version of the showLogin() method from the preceding example shows:

        // Additional import statement to use the TitleWindow container.
        import mx.containers.TitleWindow;

        private function showLogin():void {
            // Create the TitleWindow container.
            var helpWindow:TitleWindow = 
                TitleWindow(PopUpManager.createPopUp(this, MyLoginForm, false));
            // Add title to the title bar.
            helpWindow.title="Enter Login Information";
            // Make title bar slightly transparent.
            helpWindow.setStyle("borderAlpha", 0.9);
            // Add a close button.
            // To close the container, your must also handle the close event.
            helpWindow.showCloseButton=true;
        }