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 52123_488959-ch17.indd 521 3/5/10 2:30 PM3/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 52223_488959-ch17.indd 522 3/5/10 2:30 PM3/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 52323_488959-ch17.indd 523 3/5/10 2:30 PM3/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 52423_488959-ch17.indd 524 3/5/10 2:30 PM3/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 52523_488959-ch17.indd 525 3/5/10 2:30 PM3/5/10 2:30 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 526 FIGURE 17.11 The LoginWindow component as a pop-up window can now be dragged by the user, and the rest of the application is disabled due to the modality of the pop-up. You also can call the method from within the component to cause it to remove itself from the interface: PopUpManager.removePopUp(this); The application in Listing 17.7 uses the LoginWindow component as a pop-up window. In each of its custom event handler functions, it explicitly closes the pop-up window with a call to PopUpManager.removePopUp(). LISTING 17.7 An application using a custom pop-up window <?xml version=”1.0” encoding=”utf-8”?> <s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:mx=”library://ns.adobe.com/flex/mx”> <fx:Script> <![CDATA[ import events.LoginEvent; import mx.controls.Alert; import mx.managers.PopUpManager; import popups.LoginTitleWindow; private var popup:LoginTitleWindow; private function showLoginWindow():void { popup = new LoginTitleWindow(); popup.addEventListener(Event.CLOSE, closeHandler); popup.addEventListener(“login”, loginHandler); 23_488959-ch17.indd 52623_488959-ch17.indd 526 3/5/10 2:30 PM3/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 527 popup.addEventListener(“cancel”, closeHandler); PopUpManager.addPopUp(popup, this, true) PopUpManager.centerPopUp(popup); popup.setInitialFocus(); } private function loginHandler(event:LoginEvent):void { Alert.show(“You logged in as “ + event.username + “ with a password of “ + event.password, “Login Successful”); PopUpManager.removePopUp(popup); } private function closeHandler(event:Event):void { Alert.show(“You cancelled the login operation”, “Login Cancelled”); PopUpManager.removePopUp(popup); } ]]> </fx:Script> <s:Button label=”Log In” click=”showLoginWindow()” horizontalCenter=”0” top=”20”/> </s:Application> On the Web The code in Listing 17.7 is available in the Web site files as UseCustomPopUp.mxml in the chapter17 project. n The TitleWindow container is a subclass of Panel, so it shares all of that container’s features: It contains a title bar, a caption, a border, and a content area, and like the Panel, it can host a controlBarContent area with wizard-like buttons at the bottom. The TitleWindow displays a close button in its upper-right corner, creating a common visual interface for pop-up windows. The close button doesn’t actually close the pop-up window. Instead, it dispatches a close event with an event object typed as mx.events.CloseEvent. Upon instantiating the custom compo- nent (and prior to adding it as a pop-up window), create a listener for the close event: popup.addEventListener(CloseEvent.CLOSE, closeHandler); Then, in the event handler function, call PopUpManager.removePopUp() to remove the pop- up window from the application interface: private function closeHandler(event:CloseEvent):void { Alert.show(“You canceled the login operation”, “Login Canceled”); PopUpManager.removePopUp(popup); } 23_488959-ch17.indd 52723_488959-ch17.indd 527 3/5/10 2:30 PM3/5/10 2:30 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 528 If you don’t want to display the close button in the custom pop-up window, just create a custom skin for your pop-up and modify it as needed. To do this, follow these steps: 1. Open the custom pop-up window file in Flash Builder’s Design mode. 2. Right-click anywhere on the design area and select Create Skin. 3. As shown in Figure 17.12, enter the package and name of the new skin you want to create. As with all custom components, you should place the skin component in a subfolder of the project’s source-code root. FIGURE 17.12 Creating a new custom skin based on the TitleWindow component’s default skin 4. Set Host component to spark.components.TitleWindow. 5. Select Create a copy of and use the default value spark.skins.spark. TitleWindowSkin (this is the default skin for the Spark TitleWindow component). 6. Click Finish to create the new custom skin. 7. When the new custom skin file appears in Flash Builder’s Design mode, click the close icon in the skin’s upper-right corner as shown in Figure 17.13. 8. Press Delete to remove the button from the skin. Alternatively, you can use Source mode and comment out the <s:Button> tag. 9. Save your changes. 23_488959-ch17.indd 52823_488959-ch17.indd 528 3/5/10 2:30 PM3/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 529 10. Open the custom pop-up window file in Source mode and look at the <s:TitleWindow> starting tag. It now includes the skinClass attribute that assigns your new custom skin: <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” skinClass=”skins.CustomTitleWindowSkin”> FIGURE 17.13 The close button is a part of the Spark TitleWindow component’s skin and can be deleted. The TitleWindow skin’s default close button Note The TitleWindow component’s close icon is defined as an optional skin part, so when you delete it from the skin it doesn’t result in any compilation errors. n If you want to use the custom skin with all dialog boxes in your application, you can set the skinClass style in an embedded or external style sheet. For example, this CSS code assigns the new skin for all components that are based on the Spark TitleWindow component: <fx:Style> @namespace s “library://ns.adobe.com/flex/spark”; s|TitleWindow { skinClass: ClassReference(“skins.CustomTitleWindowSkin”); } </fx:Style> 23_488959-ch17.indd 52923_488959-ch17.indd 529 3/5/10 2:30 PM3/5/10 2:30 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 530 Summary In this chapter, I described how to create pop-up windows as part of a Flex application interface. You learned the following: l Pop-up windows are typically used to present and collect information in a windowing style application. l You use the Alert class to present simple informational messages and to enable a user to confirm or decline an operation. l The PopUpMenuButton control combines a Button and single-level Menu that’s similar in presentation to a ComboBox. l You use the PopUpButton control to present any visual container or control as a pop-up window. l Custom pop-up windows are defined in the same way as any custom component. l The Spark TitleWindow is designed to be used as a custom pop-up window and enables dragging of the resulting window by the user. l You can remove the close button from the TitleWindow interface by creating a custom skin. l You use the PopUpManager class’s static methods to add and remove custom pop-up windows at runtime. 23_488959-ch17.indd 53023_488959-ch17.indd 530 3/5/10 2:30 PM3/5/10 2:30 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... version is significantly more powerful and flexible The approach is fast and easy to code, and it might be used during early prototyping of an application, but an application that’s built for durability and easy long-term maintenance generally requires custom ActionScript classes to represent data in Flex application memory 5 34 Chapter 18: Modeling and Managing Data FIGURE 18.1 A UML diagram... guarantees that the identifier for the private property and for its corresponding accessor methods are different from each other n Note If you create a get accessor method for a private property, but not a set method, the property is considered “read-only” to the rest of the application n Generating getter and setter functions in Flash Builder 4 Flash Builder 4 includes a new feature that enables you to quickly...Part III Working with Data IN THIS PART Chapter 18 Modeling and Managing Data Chapter 19 Using List Controls Chapter 20 Using Advanced List Controls Chapter 21 Using the Flex Charting Controls Chapter 22 Working with Data Entry Forms Chapter 23 Working with HTTPService and XML Chapter 24 Managing XML with E4X CHAPTER Modeling and Managing Data F lex applications are stateful; that is, they have... keywords: l internal Properties that can be set and read by the current class and by any classes in the same package l l private Properties that can only be set and read by instances of the class in which they’re declared protected Properties that can be set and read by the current class and by any of its subclasses l public Properties that can be set and read by the rest of the application Note The... code for this chapter, import the chapter18.fxp Flex project archive from the Web site files into your Flex Builder workspace n 533 Creating value object classes in ActionScript Storing data sets in client memory with the ArrayList and ArrayCollection classes Filtering and sorting data with the ArrayCollection class Traversing, searching, and bookmarking data objects with the IViewCursor... private, and it should have an underscore character as a prefix: private var _contactId:int=0; l 546 There should be two new functions with the set and get keywords, both named for the original property: Chapter 18: Modeling and Managing Data public function get contactId():int { return _contactId; } public function set contactId(v:int):void { _contactId = v; } FIGURE 18 .4 Generating getter and setter... the design pattern names Value Object and Transfer Object In the second part of the chapter, I describe the use of data collections: ordered collections of data instances managed by the ArrayList and ArrayCollection classes I describe how and where to declare these classes and then describe how to use the powerful ArrayCollection class to filter, sort, bookmark, and traverse data in client application... xmlns:s=”library://ns.adobe.com /flex/ spark” xmlns:mx=”library://ns.adobe.com /flex/ mx”> 1 Joe Adams 123 Main Street Anywhere WA 12 345 11/28/1959 555-123 -45 67 536 Chapter 18: Modeling and Managing Data... property to a private property with a public getter and setter method To do this, follow these steps: 1 Open Contact.as from the valueObjects folder 2 Place the cursor anywhere in the name of the first property, contactID 3 Select Source ➪ Generate Getter/Setter from the Flash Builder menu 4 Click OK in the Generate Getter/Setter dialog box, shown in Figure 18 .4 You should see the following changes in your... Chapter 18: Modeling and Managing Data public function Contact() { } } } The class is ready to fill in with properties and other functionality Value object class syntax Value objects are implemented in Flex as simple ActionScript classes, and their syntax is determined by basic ActionScript syntax requirements In this section, I describe each part of a value object class, its purpose, and some best practice . Forms Chapter 23 Working with HTTPService and XML Chapter 24 Managing XML with E4X 24_ 488959-pp03.indd 531 24_ 488959-pp03.indd 531 3/5/10 2:31 PM3/5/10. ActionScript classes to represent data in Flex application memory. 25 _48 8959-ch18.indd 5 342 5 _48 8959-ch18.indd 5 34 3/5/10 2:31 PM3/5/10 2:31 PM Please purchase