PopUp, Can You Hear Me?

Communicating with a PopUp is a common task. This article explores how to do that.

The first example shows how to use Alert to pose a question and get answer.

private function showQuestion() : void
{
Alert.show("Do you like Flex?", "Question", Alert.YES|Alert.NO,this,processAnswer);
}

private function processAnswer( event:CloseEvent ) : void
{
if( event.detail == Alert.YES ) {
response.text = "Of course you do!";
} else {
response.text = "Hmm. Really? Keep reading then.";
}
}

Now that you’ve seen how Alert works, let’s look at a more complex example. Here, a TitleWindow is used to present a choice of themes (you can see one like it in my Atmospheres AIR Music Player). When the user picks the Apply button the theme changes.

This is the code for the pop-up, ThemeChooser.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
width="338" height="252"
title="Choose Your Theme"
showCloseButton="true"
horizontalAlign="center"
verticalAlign="middle"
close="PopUpManager.removePopUp(this)">

<mx:Metadata>
[Event(name="changeTheme", type="theme.ThemeEvent")]
</mx:Metadata>

<mx:Script>
<![CDATA[
import theme.ThemeEvent;
import mx.managers.PopUpManager;

private function dispatchThemeChoice( themeName:String ) : void
{
dispatchEvent( new ThemeEvent(themeName) );
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>

<mx:VBox horizontalAlign="left" verticalGap="17">
<mx:RadioButton label="Adobe Red" click="dispatchThemeChoice('adobeRed')"/>
<mx:RadioButton label="Orange Neon" click="dispatchThemeChoice('orangeNeon')"/>
<mx:RadioButton label="Blue Wave" click="dispatchThemeChoice('blueWave')"/>
</mx:VBox>

</mx:TitleWindow>

Notice that when a RadioButton is clicked, an event is dispatched. The event is a
ThemeEvent – a custom event type. This is the code for the event, ThemeEvent.as:

package theme
{
import flash.events.Event;

public class ThemeEvent extends Event
{
public static const CHANGE_THEME:String = "changeTheme";

public function ThemeEvent(themeName:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(CHANGE_THEME, bubbles, cancelable);

this.themeName = themeName;
}

public var themeName:String;
}
}

This is the code for the main application to demonstrate it:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="271" width="532"
borderStyle="solid"
borderColor="black"
borderThickness="1">

<mx:Script>
<![CDATA[
import theme.ThemeEvent;
import theme.ThemeChooser;
import mx.managers.PopUpManager;
import mx.core.IFlexDisplayObject;

private function showThemeDialog() : void
{
var pop:IFlexDisplayObject = PopUpManager.createPopUp(this, theme.ThemeChooser, true );
pop.addEventListener( ThemeEvent.CHANGE_THEME, selectTheme );
PopUpManager.centerPopUp(pop);
result.text = ""; // reset
}

private function selectTheme( event:ThemeEvent ) : void
{
result.text = event.themeName;
}
]]>
</mx:Script>

<mx:Button x="24" y="27" label="Select Theme" click="showThemeDialog()"/>
<mx:Label x="24" y="57" fontWeight="bold" color="#FFFFFF" id="result"/>

</mx:Application>

I think this is the easiest solution: a custom event. The event contains all of the information from the pop-up and lets the pop-up disappear without having to hang around while you get information from it. If you have a lot of data (e.g., a user’s profile) consider creating a class to represent it and have the custom event contain an instance of the class. This also makes it easier to change the information later.

Both of these examples use window-type classes as the base for the pop-ups. But you can use any component for a pop-up. Here’s a pop-up that’s a shape with text; it has no buttons nor a frame. Click it make it go away. While not very intuitive, it does make the point.

Download Files
You can download the code for this specialized pop-up here.

This zip file is a Flex Builder 3, Beta 2, project archive. If you do have Flex Builder 3, Beta 2, you can import the source files directly from the zip.

When you use a modal pop-up, which is what all these examples have been so far, you’ll notice that the background becomes lighter and blurred. This is governed by styles on the Application which you can change. You can change the color and amount of blur. You can even get rid of both.

Mode-less pop-ups are common as floating tool bars. There’s no difference in how you make them nor interact with them, just in how you present them. Using a mode-less pop-up enables the user to continue working with the application while the pop-up is still present.

I hope this gives you some ideas in case you need to pop-up dialogs or warnings. Be unconvential and use events to communicate the result of the pop-up back to the main application.