Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Flex Howto Creating Modal Window in Flex

Related Tutorials


 
 

Share on Google+Share on Google+

Creating Modal Window in Flex

Advertisement
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.

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

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: November 16, 2009

Related Tutorials

Discuss: Creating Modal Window in Flex  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com