Flash Builder 4 and Flex 4 Bible- P12

Flash Builder 4 and Flex 4 Bible- P12: When Macromedia first released Flash MX in 2002, the product was branded as the newway to build Rich Internet Applications (known by the acronym RIA). The term wasinvented at Macromedia to describe a new class of applications that would offer thebenefits of being connected to the Internet, including access to various types of Web-based services,but would solve many of the nagging issues that had been inherent in browser-based applicationssince the mid-1990s....
Nội dung trích xuất từ tài liệu:
Flash Builder 4 and Flex 4 Bible- P12 Chapter 17: Working with Pop-up Windows 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 windowTipA custom pop-up window component must be extended from a class that implements the IFlexDisplayObject 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 acustom 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: 521Part II: Designing Flex Applications 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 WebThe code in Listing 17.5 is available in the Web site files as LoginEvent.as in the chapter17 project’ssrc/events folder. n522 Chapter 17: Working with Pop-up Windows 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- ...