Wednesday, July 20, 2005 Macromedia Flex Dialog Requestor

Macromedia Flex is event driven, so it is easy to have your Flex application do something when a button is clicked. But, what if you want to verify the user really wanted to perform the action they selected? Verifying actions is quite common and very useful, such as when deleting a record, or making permanent changes to data files.

It isn't complicated to open a pop up dialog in Flex, however, sending data back and forth can get a little complex. Here's an example which you can modify to suit your needs.

Step 1: Creating the PopUp

First you want to create the dialog window. You can do it all in the main application file, but I prefer to isolate things for easier debugging.

warning.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.macromedia.com/2003/mxml" width="300" height="120" title="Verify Action" panelBorderStyle="roundCorners">
   <mx:Label id="lblVerify" text="Are you sure you want to do this?" />
   <mx:HBox>
      <mx:Button label="Ok" />
      <mx:Button label="Cancel" click="this.deletePopUp();" />
   </mx:HBox>
</mx:TitleWindow>

Everything here so far is basic MXML, so I won't bore you with the details, however, if there is something you don't understand, feel free to email me to let me know.

Now we set up our application to open the PopUp.

index.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   <mx:Script>
   <![CDATA[
   function openDialog():Void {
      var popupParent:MovieClip = this;
      var isModal:Boolean = true;
      var initObj:Object = {};

      var verifyPopUp = mx.managers.PopUpManager.createPopUp( popupParent, warning, isModal, initObj );
      verifyPopUp.centerPopUp();
   }
   ]]>
   </mx:Script>
   <mx:Button label="Verify" click="openDialog();" />
</mx:Application>

The function createPopUp is the key here, it is what actually displays the warning TitleWindow. The arguments it takes are the parent MovieClip, typically your Application, however, it can be anything from "_root" to another PopUp window. Next is the actual PopUp class itself. If we save thewarning.mxml file in a subdirectory we'll have to identify that as well using standard dot notation. Thirdly is whether or not our PopUp is modal, preventing communication with the parent window, and last is an initialization object, which allows us to pass information to our PopUp.

Compile and run our application, click on the Verify button and you should see your window appear. Click Cancel to close it.

Next