Friday, August 10, 2007

Custom PopUps and Modal Dialogs in Flex

Steps on learning to develop Flash, with a Java developer focus...

In this post, I will show how to create modal dialogs in flex. In Flex, everything is so "damn" asynchronous. Well, I think that is a good thing, but it also poses interesting questions, for instance on how to make your user wait for something to complete. You can use modal dialogs built as custom PopUps for that.

Custom PopUps
You use the mx.managers.PopUpManager class to create and remove popup windows. With this, you can create both modal and nonmodal dialogs, simply by putting true or false in third parameter to createPopUp.

In this example, I will start with defining the dialog window to popup. This is defined in the file MyDialog.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="My Dialog" showCloseButton="true" close="closeDialog(event)">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.events.CloseEvent;

private function closeDialog(event : CloseEvent) : void {
PopUpManager.removePopUp(this); // close this dialog
}
]]>
</mx:Script>
<mx:VBox>
<mx:TextInput id="input" />
<mx:Button label="OK" click="closeDialog(null)"/>
</mx:VBox>
</mx:TitleWindow>

As you can see, the dialog is a TitleWindow, and it contains a close-cross in the top corner and a button. Both will call the closeDialog method if clicked, which will make the dialog remove itself using PopUpManager.

And here comes the Main.mxml file, which opens the dialog when a button is clicked.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;

private function showDialog() : void {
PopUpManager.createPopUp(this, MyDialog, true); // popup modal dialog
}
]]>
</mx:Script>
<mx:Button label="Open Modal Dialog" click="showDialog()"/>
</mx:Application>
When the example is run, you will see that everything else but the dialog is greyed out and not focus enabled.

Downloading the source
As usual, I have zipped up the sources for you. It can be downloaded from here. Ready to be build with maven.

Other Small Flex Tutorials
This was lesson 6 in my series of posts on what I learn about developing filthy rich flash apps using flex2. If you want to read more, the previous lessons can be found here:

6 comments:

Anonymous said...

Note from Flex Help: "Flex continues executing code in the parent even after you create a modal pop-up window." That means that even a modal dialog is really modal...

-- Stefan

Anonymous said...

Sorry, "...not really modal..."

Tech Per said...

@Stefan

True.

I was thinking of modality as the effect of the UI of the application being un-operable while the "modal" dialog is showing.

Cymon said...

Hi Per, sorry to bump the topic, but I was wondering how I could read the text in the 'input'-field from main.mxml.
How can I do that?

Thanks for your help, regards, Simon

Tech Per said...

There are at least three options:

1) Databind a variable from the party that opens the dialog into the "text" property of the input field.

2) Put a public property on the dialog component, and read the value from that when closing the dialog.

3) Let the dialog dispatch an event with the data, when appropriate.

From these, I think option 3 is the best, with regards to how the flex framework is thought out. The others might be easier/simpler to understand up front.

Let me know if you need additional info.

Cymon said...

Thank you very much for your quick answer! I think I'll go with option 3.
Kind regards, Simon

P.S. I signed the Google Browse Sync petition, hope it works out well.