Flash Builder 4 and Flex 4 Bible- P14

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

104
lượt xem 17
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Flash Builder 4 and Flex 4 Bible- P14: When Macromedia first released Flash MX in 2002, the product was branded as the new way to build Rich Internet Applications (known by the acronym RIA). The term was invented at Macromedia to describe a new class of applications that would offer the benefits 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 applications since the mid-1990s....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Flash Builder 4 and Flex 4 Bible- P14

Chapter 20: Using Advanced List Controls On the Web The code in Listing 20.8 is available in the Web site files as DataGridFormatLabels.mxml in the chapter20 project. n Figure 20.7 shows the resulting application with formatted phone numbers in the last column of the DataGrid control. FIGURE 20.7 A DataGridColumn with custom label formatting Using a dynamic data field As I described previously, the custom formatting function for a DataGridColumn requires an argument that references the DataGridColumn that is calling the function. The purpose of this argument is to enable you to determine the data field of the current data item dynamically. For example, if the data provider’s data items have phone values in two different properties and you want to format them both with the same logic, you can identify the property you want to for- mat with the array-style expression item[column.dataField]. The dataField property of the DataGridColumn returns the name of the property currently being processed, so you need only one custom function to format as many data properties as needed: private function getPhoneLabel(item:Object, column:DataGridColumn):String { var dataValue:String = item[column.dataField]; var pattern:RegExp = /-/g; var phoneValue:String = dataValue.replace(pattern, “”); return formatter.format(phoneValue); } 621
Part III: Working with Data Debugging a custom formatting function It can be instructive to add a trace() statement to the body of a custom formatting function. As you scroll up and down in a DataGrid, the trace statement in the custom function is executed each time the data grid column has to be formatted: private function getPhoneLabel(item:Object, column:DataGridColumn):String { var dataValue:String = item[column.dataField]; var pattern:RegExp = /-/g; var phoneValue:String = item.phone.replace(pattern, “”); trace(“original value: “ + dataValue + “, “ + “formatted value: “ + formatter.format(phoneValue)); return formatter.format(phoneValue); } Figure 20.8 shows the resulting output in Flash Builder’s Console view when the application is run in debug mode. The Console view displays the trace statements continuously as you scroll up and down in the DataGrid. FIGURE 20.8 Debugging a custom formatting function Tip One of the advantages of the DataGrid control is that it reuses its visual objects as you scroll. Just like the Spark DataGroup component, DataGrid populates existing visual controls with new data and creates the appearance of a smooth scrolling experience. As a result, you can populate the DataGrid and other list controls with significant amounts of data without causing Flash Player to bog down or overload its memory usage. When you run the application described pre- viously with trace statements, try scrolling up and down. You’ll notice that the function is called frequently as you scroll, and the existing visual objects are updated with new data. n Advanced Item Renderers and Editors As described in Chapter 18, all list controls support the custom item renderer and editor architec- tures. In an MX DataGrid control, an item renderer or editor is used in a specific column, so the itemRenderer and itemEditor properties are implemented in the DataGridColumn component. 622
Chapter 20: Using Advanced List Controls Just as with the List control, item renderer and editor components for the DataGridColumn can be declared in three ways: l Drop-in renderers. These are visual components that you assign to a list control without any changes to the renderer component’s default property or style settings. l Inline renderers. These are components you define and nest within an MXML declaration of the list control. l Component renderers. These are separate visual components that you define as MXML components or ActionScript classes and assign to the list control’s itemRenderer prop- erty in an MXML declaration. You also can assign a component renderer at runtime with ActionScript code by using the mx.core.ClassFactory class (described next). Cross-Reference For more information on the three types of item renderer declarations, see Chapter 19. n At runtime, the DataGridColumn creates an instance of the component and passes its data pro- vider’s current data item as the renderer object’s data property. Within the custom component, whether declared inline or as a separate component, you use the data object’s properties with either ActionScript statements or binding expressions to populate visual objects and create your custom presentation. Using the dataChange event In the following example, a DataGrid component displays contact information from the contacts.xml file. In the first column of the DataGrid, the contact’s first and last names are displayed as a single concatenated string. This task can be easily handled with a custom label formatting function: private function getNameLabel(item:Object, column:DataGridColumn):String { return item.firstname + “ “ + item.lastname; } In the second column, the DataGrid will display the contact’s full address, formatted as a single Text control using HTML markup for bold and other formatting. To handle this requirement, you can use the dataChange event to update a custom component’s display at runtime. This event is dispatched within the custom component whenever the value of its data property is updated. You can respond to the event by explicitly updating the custom component’s nested objects as needed. The custom component in Listing 20.9 is extended from the MX Text component. When the component’s dataChange event is dispatched, it responds by updating its own htmlText prop- erty with the data object’s new property values. 623
Part III: Working with Data LISTING 20.9 A custom component updating its display with the dataChange event Phone: “ + data.phone + “\n” + “Email: “ + data.email + “\n”; } ]]> On the Web The code in Listing 20.9 is available in the Web site files as AddressRenderer.mxml in the chapter20 project’s renderers package. n The application in Listing 20.10 uses the custom component as an item renderer to display com- plete formatted address information in the DataGrid control’s second column. Notice that the DataGrid control’s selectable property is set to false. This makes it easier for the user to select the custom component’s text value for copying. Also, its variableRowHeight property is set to true to enable the DataGrid columns to adjust their height as needed. LISTING 20.10 An application using a component item renderer
Chapter 20: Using Advanced List Controls } ]]> On the Web The code in Listing 20.10 is available in the Web site files as DataGridCustomRenderer.mxml in the chapter20 project. n Figure 20.9 shows the resulting application, with each contact’s full name in the left column and com- plete formatted address information in the right column. The user can select the text in the right column and then right-click (or Ctrl+click on the Mac) to copy the text with the pop-up context menu. FIGURE 20.9 A custom item renderer using the dataChange event 625
Part III: Working with Data Using Spark item renderers The Flex 4 SDK includes components named MXDataGridItemRenderer and MXAdvancedDataGridItemRenderer. These Spark-based components are designed to be used as the root elements for custom item renderers used by the MX DataGrid and AdvancedDataGrid controls. They enable you to use vector graphics and advanced text render- ing, even though the containing component is an MX-based control. You can create a new item renderer for a DataGrid by following these steps: 1. In the Package Explorer view, right-click on the package in which you want to cre- ate a new renderer component. 2. Choose New ➪ MXML Item Renderer. 3. Select the template Item Renderer for MX DataGrid. 4. Click Finish to create the new item renderer component. Listing 20.11 shows a completed Spark item renderer for a DataGridColumn that incorporates a radial gradient background defined with an FXG graphic and Spark-based Label controls to dis- play the text. LISTING 20.11 An application using a Spark item renderer 626
Chapter 20: Using Advanced List Controls On the Web The code in Listing 20.11 is available in the Web site files as SparkAddressRenderer.mxml in the ren- derers package of the chapter20 project. n Figure 20.10 shows the resulting application. FIGURE 20.10 A DataGrid with a Spark-based item renderer with FXG graphics Using item editors Like an item renderer, an item editor is a custom component that you display instead of the default label in a DataGridColumn cell. An item editor, however, is always an interactive control that enables the user to make changes to the data it represents. As with item renderers, you can declare an item editor using a drop-in, inline, and component syntax. Before you can use an item editor, the DataGrid must have its editable property set to true. When you do this, the DataGrid automatically displays an item editor in any cell the user clicks. The default item editor is the TextInput control, so when the user clicks into an editable cell, he’s presented with a TextInput that enables him to change the data. When he clicks or tabs out of the cell, the new data is saved to the DataGrid component’s data provider in application memory. When you set the DataGrid component’s editable property to true, all its columns are auto- matically editable. Each DataGridComponent has an editable property as well; you stop edit- ing of any particular column by setting its editable property to false. 627
Part III: Working with Data In the following code, the DataGrid is editable, but editing is prevented in the firstname and lastname columns. As a result, only the data in the phone column can be changed by the user: When the user clicks a cell in the phone column, a TextInput control is displayed to allow editing. Caution If you apply a labelFunction to a column that’s also editable and uses the default item editor, the user will be editing the value returned from the labelFunction and not the column’s original data. n Using drop-in item editors To use a component as a drop-in item editor for an MX DataGrid control, it must implement the IDropInListItemRenderer interface, and it must be interactive, enabling the user to make changes to data. Only a small number of components in the Flex SDK qualify on both counts; they include: l Button l CheckBox l DateField l NumericStepper l TextArea l TextInput To declare a drop-in editor in a DataGridColumn, you assign the component to the DataGridColumn component’s itemEditor (if you want to see the component appear only when the user clicks a cell to edit it), or to its itemRenderer (if you want to see it appear on all rows). In either case, you assign the component by its fully qualified class name, including the package prefix: I describe the details of each strategy in the following sections. 628
Chapter 20: Using Advanced List Controls Using the itemEditor and editorDataField properties When you declare an itemEditor for a DataGridColumn, you also have to set the DataGridColumn control’s editorDataField property to indicate which field of the item edi- tor component contains the value entered by the user. At runtime, the changed value is transferred back to the current data object’s property (the property that’s named as the DataGridColumn component’s dataField). For example, if you use a CheckBox control as an item editor, the editorDataField property should be set to selected. For a TextInput control, editorDataField should be set to text (the default), for a NumericStepper, it should be value, and so on. When you set the itemEditor property to a named component, that component is instantiated only when the user clicks into the cell. For example, the following code indicates that a CheckBox control should appear only when the user clicks: Unless the user has clicked a cell that’s editable, the column’s actual value is displayed as a label. When the user clicks in a cell, it displays the CheckBox control. Using the rendererIsEditor property If you want the item editor component to be displayed in every row of the DataGrid, follow these steps: 1. Assign the editor component DataGridColumn component’s itemRenderer property instead of itemEditor. 2. Set the DataGridColumn component’s rendererIsEditor property to true. The following code causes the CheckBox control to appear in every row, regardless of whether the user has clicked into the cell: The application in Listing 20.12 uses an itemRenderer in its first DataGrid that’s set with rendererIsEditor to true. The renderer is a drop-in component based on mx.controls. CheckBox. At application startup, the initApp() method loops through the ArrayList being used as the DataGrid component’s data provider and adds a selected property to each object. That property is then both displayed and edited through the CheckBox that appears on every row. When the user clicks Show Selected, the application loops through the first data provider and locates all data items with selected set to true and adds them to a second ArrayList that’s dis- played in a separate DataGrid. 629
Part III: Working with Data Note Notice in Listing 20.12 that the DataGrid control’s selectable property is set to false. This turns off the default selection and highlighting functionality of the DataGrid to enable the user to more easily click the CheckBox controls in the left column. n LISTING 20.12 Setting a renderer as an editor 630
Chapter 20: Using Advanced List Controls On the Web The code in Listing 20.12 is available in the Web site files as DataGridDropinEditor.mxml in the chapter20 project. n Figure 20.11 shows the resulting DataGrid with a CheckBox on every row. When the user clicks one of the CheckBox components, its selected value is saved to the appropriate data object’s selected property. Tip When you allow the user to edit data through an editable DataGrid, changes are made to the data collection that’s stored in client memory. If you want to save the data to a persistent data store on the server (or on the client, in the case of an Adobe AIR-based desktop application), you need to write code to transfer the changed data. If the persistent data store is on the server, you can accomplish this with the Remote Procedure Call (RPC) components (HTTPService, WebService, or RemoteObject) or with the Data Management Service (if using LiveCycle Data Services). With a desktop-based application, you could use the local SQLite database that’s embedded in Adobe AIR. n 631
Part III: Working with Data FIGURE 20.11 A renderer displaying every row with rendererIsEditor set to true Using inline and component editors As with custom renderers, you can declare custom item editor components with either inline syn- tax or as separate components. The benefits of using this syntax instead of drop-in components are that you’re free to use any combination of visual controls and containers, and you can override the components’ default property and style settings. For example, imagine that you wanted to use the DateField control as an item editor, but you modify its default behavior in some way. You might set its editable property to true to enable the user to enter a date directly (without having to pick it from the pop-up calendar control) or restrict its available dates: Because the DateField component is declared with the itemEditor property, it’s displayed only when the user clicks the cell containing the date value. Cross-Reference The use of the tag to define a separate component is described in Chapter 19’s section about creating item renderers. n The application in Listing 20.13 shows the use of a DateField as an inline item editor. Upon application startup, the data is retrieved dynamically using an HTTPService component (described in Chapter 21). When the data is returned, the data objects in the ArrayCollection are transformed into instances of the ContactVO class. This is critical for this example, because 632
Chapter 20: Using Advanced List Controls the ContactVO class has a dob property typed as a Date, which makes it compatible with the DateField control that is then used as the property’s editor in the DataGrid. LISTING 20.13 Using an inline item editor
Part III: Working with Data LISTING 20.13 (continued) editable=”true”> On the Web The code in Listing 20.13 is available in the Web site files as DataGridInlineEditor.mxml in the chapter20 project. n Figure 20.12 shows the resulting pop-up calendar control that’s part of the DateField. When the user clicks the cell displaying the date, he sees the DateField; when he clicks the DateField control’s button, the calendar control pops up. Because the DateField control’s editable property is true, the user also can click into the TextInput portion of the DateField and type a value directly. FIGURE 20.12 An itemEditor declared within inline syntax to enable custom properties and behaviors to be declared 634
Chapter 20: Using Advanced List Controls Using List Controls with Horizontal and Tile Layout The MX HorizontalList and TileList controls share nearly all the behaviors and capabili- ties of the DataGrid and List controls: l Data provided to a HorizontalList or TileList is typically displayed using a cus- tom item renderer, declared either inline or as a separate component. l The change event notifies you that the user has selected a data item. l The selectedItem property returns a reference to the selected data item. l The allowMultipleSelection property enables users to select multiple data items by clicking while holding down Ctrl (or Ô on the Mac) and Shift. l As the user scrolls, existing visual objects are reused and their data is populated with the new data. As with the DataGrid control, this creates a smooth scrolling experience while enabling these controls to display large amounts of data without overusing Flash Player memory. Cross-Reference The new Spark List control’s layout property enables you to lay out the control’s data items horizontally or in tile format. If you prefer to use the new Spark skinning architecture, see the instructions for the Spark List control in Chapter 18. n The difference between the HorizontalList and TileList controls has to do with their lay- out. As implied by their component names, the HorizontalList lays out cells in a single row, whereas the TileList lays out cells in a similar fashion to the Tile container, as a grid of objects in rows and columns. The TileList and HorizontalList controls are almost always used with custom item render- ers that determine the presentation of each of the list’s cells. As with the other list controls, you declare the item renderer component with drop-in, inline, or component syntax. The application in Listing 20.14 uses an MX TileList control and an inline renderer to display the contents of an XML file that refers to image files in the project’s assets folder. The renderer component uses properties of each XML element to present an Image and a Label wrapped in a VBox container. The TileList is wrapped inside a Panel container. When the user clicks in one of the TileList control’s cells, the detail region is updated through the use of binding expressions. 635
Part III: Working with Data LISTING 20.14 An MX TileList control presenting dynamic data 636
Chapter 20: Using Advanced List Controls On the Web The code in Listing 20.14 is available in the Web site files as MXTileList.mxml in the chapter20 project. n Figure 20.13 shows the resulting application, with graphic images and their captions laid out in a gridlike format. FIGURE 20.13 An MX TileList control displaying an inline item renderer The HorizontalList control uses the same architecture, enabling the user to scroll sideways through content. In the application in Listing 20.15, the change event handler saves the current selectedItem to a bindable Object. When the item is selected, the VBox container at the bot- tom of the application becomes visible due to its use of a binding expression in its enabled property. 637
Part III: Working with Data LISTING 20.15 Using the MX HorizontalList control
Chapter 20: Using Advanced List Controls paddingLeft=”10” paddingRight=”10” paddingTop=”10” paddingBottom=”10” horizontalAlign=”center”/> On the Web The code in Listing 20.15 is available in the Web site files as HorizontalListDemo.mxml in the chapter20 project. n Figure 20.14 shows the resulting application, after an item has been selected from the HorizontalList control. FIGURE 20.14 A HorizontalList control with selected information displayed in a detail region The Spark version of the List control supports a layout property that can be set to an instance of HorizontalLayout or TileLayout. You use ItemRenderer as the base class of its custom item renderers, as shown in the application in Listing 20.16. 639
Part III: Working with Data LISTING 20.16 An application with a Spark List using the TileLayout class 640