Tài liệu Flash Builder 4 and Flex 4 Bible- P12 doc

Chapter 17: Working with Pop-up Windows

521

Working with Custom Pop-up Windows

You can create custom pop-up windows in a Flex application for many purposes:

l Presenting detailed information to the user that’s too complex to easily fit into an Alert

dialog box

l Collecting configuration and preference information before executing an operation

l Providing a pop-up window that can be reused as a custom component

l Collecting data through a data entry form wrapped in a pop-up window

Tip

A custom pop-up window component must be extended from a class that implements the IFlexDisplay

Object interface. This interface is implemented by the UIComponent class, which in turn is in the inheri￾tance hierarchy of all MX containers and controls. This essentially means that any component can be used as a

custom pop-up window. If you want to create a custom pop-up window based on a Spark component, though,

you should base your custom pop-up window on the Spark TitleWindow component. n

Defining a custom pop-up window

Custom pop-up windows can be defined as custom MXML components. If you want to create a

window that looks like a dialog box, you can use either the Panel or TitleWindow container.

While either component has the appearance of a dialog box, the Spark Panel component can’t be

dragged around the screen by the user. If you want full dialog box functionality, create your cus￾tom pop-up window components as subclasses of the TitleWindow component.

Creating the component

The steps for creating an MXML component that will be used as a pop-up window are the same as

for any other MXML component:

1. Create a new MXML component based on spark.components.TitleWindow.

2. Save the new component in your project as a file with the .mxml file extension.

The following code defines an MXML component designed to collect login information, and it

might be saved as a file named LoginWindow.mxml:

<?xml version=”1.0” encoding=”utf-8”?>

<s:TitleWindow xmlns:fx=”http://ns.adobe.com/mxml/2009”

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/mx”

title=”Please Log In”>

<mx:Form>

<mx:FormItem label=”User Name:”>

<s:TextInput id=”userInput”/>

</mx:FormItem>

<mx:FormItem label=”Password:”>

23_488959-ch17.indd 521 3/5/10 2:30 PM

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Part II: Designing Flex Applications

522

<s:TextInput displayAsPassword=”true” id=”passwordInput”/>

</mx:FormItem>

<mx:FormItem direction=”horizontal”>

<s:Button label=”Log In”/>

<s:Button label=”Cancel”/>

</mx:FormItem>

</mx:Form>

</s:TitleWindow>

Sharing data with events

The custom component that will be used as a pop-up window should share information with the

rest of the application using custom events. The LoginWindow component described in the pre￾ceding code sample would share events for logging in and for canceling the operation. In order to

share the login information, you need to create a custom event class to contain the login data.

Listing 17.5 is a custom event class with public properties for the user name and password values

that will be collected by the custom component.

LISTING 17.5

A custom event class designed for use with a custom Login component

package events

{

import flash.events.Event;

public class LoginEvent extends Event

{

public var username:String;

public var password:String;

public function LoginEvent(type:String,

bubbles:Boolean=false, cancelable:Boolean=false)

{

super(type, bubbles, cancelable);

}

override public function clone():Event

{

var ev:LoginEvent = new LoginEvent(this.type);

ev.username = this.username;

ev.password = this.password;

return ev;

}

}

}

On the Web

The code in Listing 17.5 is available in the Web site files as LoginEvent.as in the chapter17 project’s

src/events folder. n

23_488959-ch17.indd 522 3/5/10 2:30 PM

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Chapter 17: Working with Pop-up Windows

523

When the user clicks the custom component’s Log In button, the component shares data with the

application by constructing and dispatching a custom event object:

var event:LoginEvent = new LoginEvent(“login”);

event.username = userInput.text;

event.password = passwordInput.text;

dispatchEvent(event);

And if the user clicks Cancel, the custom component dispatches a cancel event, with the event

object typed as the standard Event class:

dispatchEvent(new Event(“cancel”));

Listing 17.6 shows a completed custom component designed for use as a pop-up window that can

share data with the application using custom events. Nothing in the preceding code indicates that

this component will be used as a pop-up window; it could just as easily be declared with an MXML

tag set in the application to appear inline in the application.

LISTING 17.6

A custom component ready for use as a pop-up window

<?xml version=”1.0” encoding=”utf-8”?>

<s:TitleWindow xmlns:fx=”http://ns.adobe.com/mxml/2009”

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/mx”

title=”Please Log In”>

<fx:Metadata>

[Event(name=”login”, type=”events.LoginEvent”)]

</fx:Metadata>

<fx:Script>

<![CDATA[

import events.LoginEvent;

private function login():void

{

var event:LoginEvent = new LoginEvent(“login”);

event.username = userInput.text;

event.password = passwordInput.text;

dispatchEvent(event);

}

public function setInitialFocus():void

{

userInput.setFocus();

}

]]>

</fx:Script>

<mx:Form>

<mx:FormItem label=”User Name:”>

continued

23_488959-ch17.indd 523 3/5/10 2:30 PM

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Part II: Designing Flex Applications

524

LISTING 17.6 (continued)

<s:TextInput id=”userInput”/>

</mx:FormItem>

<mx:FormItem label=”Password:”>

<s:TextInput displayAsPassword=”true” id=”passwordInput”/>

</mx:FormItem>

</mx:Form>

<s:controlBarContent>

<s:Button label=”Log In” click=”login()”/>

</s:controlBarContent>

</s:TitleWindow>

On the Web

The code in Listing 17.6 is available in the Web site files as LoginTitleWindow.mxml in the chapter17

project’s src/popups folder. n

Managing custom pop-up windows with the

PopUpManager class

The PopUpManager is a singleton class with static methods that you use to manage custom pop￾up windows at runtime. It has two methods that you can use to present a pop-up window:

l addPopUp(). Adds a new top-level window using a component that’s already been

instantiated and is ready to use.

l createPopUp(). Creates a new instance of a component, presents the component as a

pop-up window, and returns a reference.

Of these two methods, the addPopUp() method is more useful, because it enables you to con￾struct and preconfigure a visual object prior to presenting it as a pop-up window.

The PopUpManager also has these methods that you use to manipulate the position and order of

pop-up windows:

l bringToFront(). Gives top-level presentation and focus to a particular window.

l centerPopUp(). Positions a pop-up window in the horizontal and vertical center of its

parent window.

Finally, PopUpManager has a removePopUp() method to remove top-level windows from the

display when they’re no longer needed, though they will still exist in application memory.

Adding a pop-up window to the display

To add a new pop-up window to the application at runtime using the addPopUp() method, first

declare an instance of the custom component you want to present. This declaration will likely be

outside of any functions so the pop-up window reference persists between function calls:

23_488959-ch17.indd 524 3/5/10 2:30 PM

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Chapter 17: Working with Pop-up Windows

525

private var popup:LoginWindow;

Within a function that you call to display the pop-up window, instantiate the component and cre￾ate any required event listeners with accompanying event handler functions. The LoginWindow

component in this example dispatches events named login and cancel, so it requires two

addEventListener() calls:

popup = new LoginWindow();

popup.addEventListener(“login”, loginHandler);

popup.addEventListener(“cancel”, cancelHandler);

To present the window on-screen, call PopUpManager.addPopUp() with these arguments:

l childList:String. The display child list in which you’re adding the pop-up window.

Possible values include PopUpManagerChildList.APPLICATION,

PopUpManagerChildList.POPUP, and PopUpManagerChildList.PARENT (the

default).

l modal:Boolean. This argument determines whether the custom pop-up window is

modal. If not passed in, it defaults to false.

l parent:DisplayObject. The parent window over which the pop-up window is

displayed.

l window:IFlexDisplayObject. The component reference you just instantiated.

After adding the pop-up window to the application interface, you can center the window over its

parent window with a call to PopUpManager.centerPopUp(). If necessary, you can ensure

that the new window has top-level focus with a call to PopUpManager.bringToFront().

This makes a call to PopUpManager.addPopup() to present the LoginWindow custom com￾ponent as a modal pop-up window and then centers it on the parent component:

PopUpManager.addPopUp(popup, this, true);

PopUpManager.centerPopUp(popup);

Caution

If you don’t explicitly center the pop-up window with PopUpManager.centerPopUp(), the window

appears in the top-left corner of the parent window. n

Figure 17.11 shows the resulting pop-up window. Notice the application’s blurry appearance in

the background, indicating that the user must dismiss the window before interacting with the rest

of the application.

Removing a pop-up window

To remove a pop-up window, use the PopUpManager class’s static removePopUp() method.

The method takes a single argument that references the pop-up window instance:

PopUpManager.removePopUp(popup);

23_488959-ch17.indd 525 3/5/10 2:30 PM

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.