Chapter 20: Using Advanced List Controls 621 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); } 27_488959-ch20.indd 62127_488959-ch20.indd 621 3/5/10 2:34 PM3/5/10 2:34 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part III: Working with Data 622 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. 27_488959-ch20.indd 62227_488959-ch20.indd 622 3/5/10 2:34 PM3/5/10 2:34 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 20: Using Advanced List Controls 623 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. 27_488959-ch20.indd 62327_488959-ch20.indd 623 3/5/10 2:34 PM3/5/10 2:34 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part III: Working with Data 624 LISTING 20.9 A custom component updating its display with the dataChange event <?xml version=”1.0” encoding=”utf-8”?> <mx:Text xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:mx=”library://ns.adobe.com/flex/mx” dataChange=”updateHTML()”> <fx:Script> <![CDATA[ private function updateHTML():void { htmlText = data.city + “, “ + data.state + “\n” + “<b>Phone:</b> “ + data.phone + “\n” + “<b>Email:</b> “ + data.email + “\n”; } ]]> </fx:Script> </mx:Text> 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 <?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”> <s:layout> <s:VerticalLayout horizontalAlign=”center” paddingTop=”20”/> </s:layout> <fx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridColumn; private function getNameLabel( item:Object, column:DataGridColumn):String { return item.firstname + “ “ + item.lastname; 27_488959-ch20.indd 62427_488959-ch20.indd 624 3/5/10 2:34 PM3/5/10 2:34 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 20: Using Advanced List Controls 625 } ]]> </fx:Script> <fx:Declarations> <fx:Model id=”contactData” source=”data/contacts.xml”/> <s:ArrayList id=”contactAC” source=”{contactData.row}”/> </fx:Declarations> <mx:DataGrid id=”contactGrid” dataProvider=”{contactAC}” selectable=”false” variableRowHeight=”true” rowCount=”5”> <mx:columns> <mx:DataGridColumn dataField=”firstname” headerText=”Full Name” width=”150” labelFunction=”getNameLabel” fontWeight=”bold” fontSize=”14”/> <mx:DataGridColumn headerText=”Address Info” width=”350” itemRenderer=”renderers.AddressRenderer”/> </mx:columns> </mx:DataGrid> </s:Application> 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 27_488959-ch20.indd 62527_488959-ch20.indd 625 3/5/10 2:34 PM3/5/10 2:34 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part III: Working with Data 626 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 <?xml version=”1.0” encoding=”utf-8”?> <s:MXDataGridItemRenderer xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” focusEnabled=”true”> <s:Rect width=”100%” height=”100%”> <s:fill> <s:RadialGradient> <s:entries> <s:GradientEntry color=”#CCCCCC”/> <s:GradientEntry color=”#EEEEEE”/> </s:entries> </s:RadialGradient> </s:fill> </s:Rect> <s:VGroup top=”5” bottom=”5” right=”10” left=”10”> <s:Label text=”{data.streetaddress}”/> <s:Label text=”{data.city}, {data.state}”/> <s:Label fontWeight=”bold” text=”{data.phone}”/> </s:VGroup> </s:MXDataGridItemRenderer> 27_488959-ch20.indd 62627_488959-ch20.indd 626 3/5/10 2:34 PM3/5/10 2:34 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 20: Using Advanced List Controls 627 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. 27_488959-ch20.indd 62727_488959-ch20.indd 627 3/5/10 2:34 PM3/5/10 2:34 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part III: Working with Data 628 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: <mx:DataGrid id=”contactGrid” dataProvider=”{contactAC}” editable=”true” selectable=”false”> <mx:columns> <mx:DataGridColumn dataField=”firstname” headerText=”First Name” width=”100” editable=”false”/> <mx:DataGridColumn dataField=”lastname” headerText=”Last Name” width=”100” editable=”false”/> <mx:DataGridColumn dataField=”phone” headerText=”Phone” width=”100”/> </mx:columns> </mx:DataGrid> 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: <mx:DataGridColumn dataField=”selected” itemEditor=”mx.controls.CheckBox” remainder of declaration /> I describe the details of each strategy in the following sections. 27_488959-ch20.indd 62827_488959-ch20.indd 628 3/5/10 2:34 PM3/5/10 2:34 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 20: Using Advanced List Controls 629 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: <mx:DataGridColumn dataField=”selected” itemEditor=”mx.controls.CheckBox” editorDataField=”selected” headerText=”” width=”50”/> 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: <mx:DataGridColumn dataField=”selected” itemRenderer=”mx.controls.CheckBox” rendererIsEditor=”true” editorDataField=”selected” headerText=”” width=”50”/> 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. 27_488959-ch20.indd 62927_488959-ch20.indd 629 3/5/10 2:34 PM3/5/10 2:34 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part III: Working with Data 630 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 <?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” creationComplete=”app_creationCompleteHandler(event)”> <s:layout> <s:VerticalLayout horizontalAlign=”center” paddingTop=”20”/> </s:layout> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import mx.collections.ArrayList; [Bindable] protected var selectedData:ArrayList = new ArrayList(); protected function app_creationCompleteHandler(event:FlexEvent):void { //Add a selected property to each data object on startup for (var i:int=0;i < collection.length; i++) { var contact:Object = collection.getItemAt(i); contact.selected=false; } } protected function button1_clickHandler(event:MouseEvent):void { selectedData = new ArrayList(); for (var i:Number=0; i<collection.length; i++) { if (collection.getItemAt(i).selected) { selectedData.addItem(collection.getItemAt(i)); } } } ]]> </fx:Script> <fx:Declarations> <fx:Model id=”contactData” source=”data/contacts.xml”/> <s:ArrayList id=”collection” source=”{contactData.row}”/> </fx:Declarations> 27_488959-ch20.indd 63027_488959-ch20.indd 630 3/5/10 2:34 PM3/5/10 2:34 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... (part of Flash Builder Premium) l 646 The Spark DropDownList control is similar to the MX ComboBox, but implements the new Spark skinning architecture The AdvancedDataGrid component can present hierarchical and flat data in groups, along with summaries and other advanced data display features CHAPTER Using the Flex Charting Controls T he Flex charting controls enable to you to represent numeric and statistical... Flex Charting controls are included in the Flex Data Visualization components package and are part of the per-developer license for Flash Builder 3 Premium In Flex 2, the charting components were available under separate license; beginning with Flex 3, they’re delivered only with the premium version of the development environment After you purchase a Flash Builder Premium license, you can include the... Web site files into any folder on your disk n Understanding Flex s Types of Charts The Flex Charting controls include nine distinct types of charts, each implemented as a particular Flex component Each chart type requires data that’s passed in with a component known as the series class 648 Chapter 21: Using the Flex Charting Controls Note In the Flex 4 SDK, the existing MX versions of the charting controls... 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 6 34 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 capabilities of the DataGrid and List controls: l Data provided... MXML Setting chart properties and styles Apples 34 Oranges 23 Pears 45 Using pie and financial charts Using bar and column charts Using line and area charts Figure 21.1 shows the data display in a DataGrid and a BarChart control The DataGrid... the x axis, the y axis, and the size of the symbol Each data point is represented by a filled circle that covers some portion of the chart continued 649 Part III: Working with Data TABLE 21.1 (continued) Charting Component Series Class Characteristics Candlestick CandleStickChart CandleStickSeries Represents financial data with each data point representing high, low, opening, and closing values All... controls The license is sold on a per-developer basis, so there aren’t any ongoing royalties for using these controls Unlike in the Flex 2 product line, the charting and other Data Visualization components aren’t sold as stand-alone products; they’re available only as part a Flash Builder Premium license n Hierarchical data display As with the DataGrid, the AdvancedDataGrid control’s data provider is typically... interactive format When presented in its raw form, numeric data can be difficult for users to interpret and grasp When presented visually, in the form of pie charts, bar charts, and other graphical patterns, the data can be understood much more easily IN THIS CHAPTER Understanding the Flex Charting controls Understanding chart types Consider the following visual presentations The application in Figure 21.1 uses... 20.15 The user can click the grouped values in the leftmost column to expand the tree nodes and see the child rows FIGURE 20.15 The AdvancedDataGrid component 643 Part III: Working with Data Grouping flat data Flat data is typically defined as a conventional ArrayCollection containing rows and columns, such as you might import into a Flex application with a call to a database query You can group this type... rendererIsEditor set to true Using inline and component editors As with custom renderers, you can declare custom item editor components with either inline syntax 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, . fontSize=” 14 fontWeight=”bold”/> </s:Panel> </s:Application> 27 _48 8959-ch20.indd 640 27 _48 8959-ch20.indd 640 3/5/10 2: 34 PM3/5/10 2: 34 PM Please. item.firstname + “ “ + item.lastname; 27 _48 8959-ch20.indd 6 242 7 _48 8959-ch20.indd 6 24 3/5/10 2: 34 PM3/5/10 2: 34 PM Please purchase PDF Split-Merge on www.verypdf.com