Creating Modal Window in Flex

In the Adobe flex application you can also create the Modal Window with the help of the container Title Window and mx.component.PopUpManager class.

For creating a user interactive application programmers often need to have the pop-up window included in their application. For this reason Flex provides programmers a container TitleWindow which when combined with PopUpManager works as a Modal Window. This Window is draggable and resizable.

In the following example we have created an MXML file "ModalWindowInFlex.mxml" which contains a button "Click Me". When the button is clicked it calls the method defined in the Action Script "showModal()". The first line of the function initialize a title window "NewTitleWindow" which is created with the title_close() function.

NewTitleWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
   width="200" height="200" close="title_close();">
  <mx:Script>
  <![CDATA[
import mx.managers.PopUpManager;

public function title_close():void{
PopUpManager.removePopUp(this);
}

  ]]>
  </mx:Script>
  <mx:Label text="This is the Modal Window" width="162"/>
</mx:TitleWindow>

The title_close() function closes the window by using the removePopUp() method of the mx.manager.PopUpManager class. The second line of the function showModal() sets the close button visible property to "true" which means that we will have a close button visible on the left corner of the Title Window. In third and fourth line of function we have added this TitleWindow with the help of addPopUp() and centerPopUp() method of PopUpManager. Whole source code is as given below :

ModalWindowInFlex.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="337" height="324">

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

  public function showModal():void{
  var newTitleWindow:NewTitleWindow = new NewTitleWindow();
  newTitleWindow.showCloseButton = true;
  PopUpManager.addPopUp(newTitleWindow,this,true);
  PopUpManager.centerPopUp(newTitleWindow);
  }
  ]]>
  </mx:Script>
  <mx:Panel x="27.5" y="82" width="282" height="160"
layout="absolute" title="Panel" creationComplete="init();">
  <mx:Label x="27" y="10" text="Click button to show Pop-Up window"
   width="211" height="22"/>
  <mx:Button x="92" y="72" label="Click Me !" click="showModal();"/>
  </mx:Panel>
</mx:Application>

You can view the source code in action as follows:

Download Source code

Creating Modal Window in Flex

Creating Modal Window in Flex

Creating Modal Window in Flex

Tutorials