Chapter 21: Using the Flex Charting Controls 671 The application in Listing 21.8 displays a line chart and an area chart using the same data. LISTING 21.8 Line and area charts <?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:HorizontalLayout verticalAlign=”middle” paddingTop=”20” paddingBottom=”20” paddingRight=”20” paddingLeft=”20”/> </s:layout> <fx:Declarations> <fx:Model id=”trendModel” source=”data/trendData.xml”/> <s:ArrayCollection id=”trendData” source=”{trendModel.row}”/> </fx:Declarations> <s:Panel title=”Line Chart” height=”100%” width=”100%”> <mx:LineChart dataProvider=”{trendData}” height=”100%” width=”100%”> <mx:horizontalAxis> <mx:CategoryAxis dataProvider=”{trendData}” categoryField=”quarter”/> </mx:horizontalAxis> <mx:series> <mx:LineSeries xField=”quarter” yField=”sales”/> </mx:series> </mx:LineChart> </s:Panel> <s:Panel title=”Area Chart” height=”100%” width=”100%”> <mx:AreaChart dataProvider=”{trendData}” height=”100%” width=”100%”> <mx:horizontalAxis> <mx:CategoryAxis dataProvider=”{trendData}” categoryField=”quarter”/> </mx:horizontalAxis> <mx:series> <mx:AreaSeries xField=”quarter” yField=”sales”/> </mx:series> </mx:AreaChart> </s:Panel> </s:Application> On the Web The application in Listing 21.8 is available in the Web site files as LineAndAreaDemo.mxml in the chapter20 project. n 28_488959-ch21.indd 67128_488959-ch21.indd 671 3/5/10 2:37 PM3/5/10 2:37 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part III: Working with Data 672 Both the LineSeries and AreaSeries components can adjust the shape of their lines based on their form property. As displayed in Figure 21.13, the form property has these possible values: l curve. Draws curves between data points. l horizontal. Draws vertical lines from the x coordinate of the current point to the x coordinate of the next point. l reverseStep. Draws vertical and then horizontal lines to connect data points. l segment (the default). Draws straight lines to connect data points. l step. Draws horizontal and then vertical lines to connect data points. l vertical. Draws vertical lines from the y coordinate of the current point to the y coor- dinate of the next point. Figure 21.14 shows the six different forms of line charts. FIGURE 21.14 The different forms of line charts On the Web The application shown in Figure 21.14 is available in the Web site files as LineFormDemo.mxml in the chapter20 project. n 28_488959-ch21.indd 67228_488959-ch21.indd 672 3/5/10 2:37 PM3/5/10 2:37 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 21: Using the Flex Charting Controls 673 Summary In this chapter, I described how to use the Flex Charting controls to display data graphically in a Flex application. You learned the following: l The Flex Charting controls are part of the Data Visualization components and are included with a license for Flash Builder 4 Premium. l There are nine types of charts. l You can determine the visual presentation of a chart by setting its data, properties, and styles. l Pie charts also can be displayed as doughnut charts with hollow centers. l HLOC and candlestick charts are designed to show financial information. l The bar, column, line, and area charts are designed to show comparative or trend data. 28_488959-ch21.indd 67328_488959-ch21.indd 673 3/5/10 2:37 PM3/5/10 2:37 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 28_488959-ch21.indd 67428_488959-ch21.indd 674 3/5/10 2:37 PM3/5/10 2:37 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 675 CHAPTER Working with Data Entry Forms IN THIS CHAPTER Using the Form container Creating a Form component Laying out Form controls with the FormItem container Validating data entry Sharing data with value objects and custom events W hen you start to integrate data into a Flex application, you have to solve the problem of how to get data into the Flex runtime environment. As you have seen in earlier chapters, you can embed data into the application using hard-coded MXML or ActionScript, or by integrating data into the application with the <fx:Model> tag. These strategies, however, only work for data that’s both small and static. For existing data that’s retrieved from a server-based resource, such as a database or an EXtensible Markup Language (XML) file, you can use Remote Procedure Call (RPC) components such as HTTPService, WebService, and RemoteObject. Cross-Reference For more information about HTTPService, WebService, and RemoteObject RPC components, see Chapters 23, 25, 26, 28, and 29. n And then there’s data that comes from the user. Unless an application is used exclusively with static data or content retrieved from a server at runtime, a data-centric application must collect data from the user. In this chapter, I describe using the following tools for building data entry form components: l The Form, FormHeading, and FormItem components for laying out a data entry form l Validator components to validate a user’s data entry l Custom value object and event classes to share data with the rest of the application This chapter also includes tutorials that enable you to integrate many of the techniques described in preceding chapters, including using containers and controls (Chapters 8 and 10), creating custom MXML components (Chapter 29_488959-ch22.indd 67529_488959-ch22.indd 675 3/5/10 2:38 PM3/5/10 2:38 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part III: Working with Data 676 5), modeling data with custom ActionScript classes (Chapter 17), and creating and dispatching custom event objects (Chapter 7). On the Web To use the sample code for this chapter, import the chapter22.fxp project from the Web site files into any folder on your disk. n Using the Form Container The Form component is a MX-based layout container that’s responsible for laying out Form con- trols and labels in an intuitive, consistent manner. Tip Unlike the HTML <form> element, which collects data and posts it to a server-based resource with an HTTP request, the Flex Form container does not handle application navigation or packaging of data collected from the user. Instead, you (the developer) are responsible for declaring data collection objects and sharing them with the application. The Form container is never directly responsible for application navigation in Flex; this is handled with the ViewStack and related navigator containers. n Note In the Flex 4 SDK, the Form container and its related components, FormHeading and FormItem, have not been rewritten in the new Spark component architecture. Use the MX versions of these components. n As with all containers in the Flex framework, the Form can be declared inline in an application or component or used as the superclass for a custom component. The Form container’s background and border style settings are fully transparent by default, but you can modify these styles just as you can with the Box containers. This Form, for example, has a light gray background and a solid border: <mx:Form backgroundColor=”#EEEEEE” borderStyle=”solid” > nested components </mx:Form> You can nest any visual components within a Form, and they lay out in a single column stacked vertically, just like with the VGroup container. But the following components have special behav- iors when nested within a Form container: l FormHeading. This label-style control automatically left-aligns itself in the controls column. l FormItem. Use this special container to nest the Form’s controls. Controls are stacked in a single column placed on the right side of the Form. Every Form has two columns. Each nested FormItem container has a label property. All labels in the FormItem containers within a single Form are right-aligned with each other by default and stacked in a single column placed on the left side of the form. 29_488959-ch22.indd 67629_488959-ch22.indd 676 3/5/10 2:38 PM3/5/10 2:38 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 22: Working with Data Entry Forms 677 The application in Listing 22.1 declares a Form container with two columns, one on the left for labels and the other on the right for controls. The FormItem containers are nested within the Form and are declared in the order of their vertical presentation. The FormHeading control dis- plays its label value left-aligned above the column containing the controls. LISTING 22.1 A simple Form container <?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”> <mx:Form backgroundColor=”#EEEEEE” borderStyle=”solid” verticalCenter=”0” horizontalCenter=”0”> <mx:FormHeading label=”My Custom Form” fontSize=”14”/> <mx:FormItem label=”First Name:”> <s:TextInput id=”firstNameInput”/> </mx:FormItem> <mx:FormItem label=”Last Name:”> <s:TextInput id=”lastNameInput”/> </mx:FormItem> </mx:Form> </s:Application> On the Web The code in Listing 22.1 is available in the Web site files as SimpleForm.mxml in the chapter22 project. n Figure 22.1 shows the resulting form, with two TextInput controls and a Button control dis- played in a single column. FIGURE 22.1 A simple data entry form 29_488959-ch22.indd 67729_488959-ch22.indd 677 3/5/10 2:38 PM3/5/10 2:38 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part III: Working with Data 678 Using the FormHeading control The FormHeading control is optional; it displays a label that’s aligned with the controls that are wrapped in FormItem containers. These default style settings make it display in a larger font than a default Label control: l fontSize. Sets the label to a default of 12 pixels. l fontWeight. Sets the label to a default of bold (compared to normal for other text controls). You can use as many FormHeading objects as you like. For example, in a multi-part form, you might add a FormHeading at the top of each section, as shown in Listing 22.2. LISTING 22.2 A form with multiple headings <?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”> <mx:Form> <mx:FormHeading label=”Your Personal Information”/> <mx:FormItem label=”First Name:”> <s:TextInput id=”firstNameInput”/> </mx:FormItem> <mx:FormItem label=”Last Name:”> <s:TextInput id=”lastNameInput”/> </mx:FormItem> <mx:FormHeading label=”Your Address”/> <mx:FormItem label=”Address:”> <s:TextInput id=”address1Input”/> <s:TextInput id=”address2Input”/> </mx:FormItem> <mx:FormItem label=”City/State/Zip:” direction=”horizontal”> <s:TextInput id=”cityInput”/> <s:TextInput id=”stateInput” width=”30”/> <s:TextInput id=”zipInput” width=”60”/> </mx:FormItem> <mx:FormItem> <mx:Button label=”Save Information”/> </mx:FormItem> </mx:Form> </s:Application> On the Web The code in Listing 22.2 is available in the Web site files as MultipleFormHeadings.mxml in the chapter22 project. n 29_488959-ch22.indd 67829_488959-ch22.indd 678 3/5/10 2:38 PM3/5/10 2:38 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 22: Working with Data Entry Forms 679 Figure 22.2 shows the resulting application, with FormHeading controls above each section of the data entry form. FIGURE 22.2 Using multiple FormHeading controls FormHeading controls Some developers prefer not to use the FormHeading, instead wrapping the Form container in a Panel. The Panel container’s title is then used to display a heading, and the FormHeading isn’t necessary. The application in Listing 22.3 uses a Spark Panel with a button in its control bar area. LISTING 22.3 A Form inside a Panel <?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:Panel title=”My Custom Form” horizontalCenter=”0” top=”20”> <mx:Form> <mx:FormItem label=”First Name:”> <s:TextInput id=”firstNameInput”/> </mx:FormItem> <mx:FormItem label=”Last Name:”> <s:TextInput id=”lastNameInput”/> </mx:FormItem> </mx:Form> <s:controlBarContent> <s:Button label=”Click Me”/> </s:controlBarContent> </s:Panel> </s:Application> 29_488959-ch22.indd 67929_488959-ch22.indd 679 3/5/10 2:38 PM3/5/10 2:38 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part III: Working with Data 680 On the Web The code in Listing 22.3 is available in the Web site files as FormInPanel.mxml in the chapter22 project. n Figure 22.3 shows the resulting application. The Form is wrapped inside a Panel, and the Button is displayed in the Panel container’s control bar area. FIGURE 22.3 A Form wrapped inside a Panel Using the FormItem container The FormItem container is nested within a Form container and in turn contains one or more data entry controls. The container’s label property is used to set a string value that is displayed in the Form container’s left column. Controlling label alignment By default, the labels in a Form container are right-aligned. If you want to change their alignment to left or center, follow these steps: 1. Create a style selector for the FormItem container. 2. Within the selector, assign the labelStyleName style to an arbitrary style name. 3. Declare the style name selector with text-align set to the new alignment value. The following <fx:Style> tag set handles each of these tasks: <fx:Style> @namespace s “library://ns.adobe.com/flex/spark”; @namespace mx “library://ns.adobe.com/flex/mx”; .leftAlignedLabels { text-align: left; } mx|FormItem { 29_488959-ch22.indd 68029_488959-ch22.indd 680 3/5/10 2:38 PM3/5/10 2:38 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... component, Flash Builder s Design mode lets you easily drag and drop the objects you want to use from the Components view Each time you add a control to a Form container, Design view automatically wraps the control in a new FormItem container You can then set the FormItem container’s label property, drag its handles to resize it, set other properties and styles in the Flex Properties view, and otherwise... button control, and change its click event listener to call the clickHandler() method and pass the event object: 10 Save the LoginForm component Listing 22.9 shows the completed Form component with validation and data sharing through a custom event and a value object LISTING 22.9 A completed Form component with validation and data sharing... label, and add a click event handler that calls the isValid() method: 8 Save the Form component file, and open ValidatorDemo.mxml, the application that was created in a preceding exercise 9 Run the application, and try clicking the form’s button to trigger validation As shown in Figure 22.10, you should see that validation is triggered and. .. dispatched LISTING 22 .4 A Form with a default button ... xmlns:s=”library://ns.adobe.com /flex/ spark” xmlns:mx=”library://ns.adobe.com /flex/ mx” xmlns:forms=”forms.*”> 4 Add an tag set to the application 5 Within the script section, add a bindable private variable named myLogin, typed as the LoginVO class As you code, Flash Builder should add... private function named loginHandler() that receives an event argument typed as LoginEvent and returns void 7 Within the private function, save the event object’s login property to the bindable myLogin variable: private function loginHandler(event:LoginEvent):void { myLogin = event.login; } 8 Add a login event listener to the LoginForm component instance that calls loginHandler() and passes the event object:... Within the tag set, declare a custom event with a name of login and a type of events.LoginEvent: [Event(name=”login”, type=”events.LoginEvent”)] 4 In the section, create a new protected function with no arguments named clickHandler() that void: protected function clickHandler():void { } 5 Within the new function, add a conditional evaluation that... forms can be designed as fully encapsulated components that handle all the normal tasks of data entry: l Presentation of a data entry interface l Collection and validation of data entered by the user l Sharing of data with the rest of the application with custom value object and event classes In this section, I describe the steps to create and use a custom Form component Creating a custom Form component... new application and incorporate the Form component: 1 Create a new MXML application named ValidationDemo.mxml 2 Add an instance of the new LoginForm component Set its id property to loginForm Note As you type, Flash Builder should add the required custom forms namespace prefix for the forms folder to the tag n 3 Set the LoginForm object’s horizontalCenter property to 0 and top to 20 The... xmlns:s=”library://ns.adobe.com /flex/ spark” xmlns:mx=”library://ns.adobe.com /flex/ mx”> Switch to Design mode to see the beginning Form component presentation It shows up as a small rectangle; if you created it without a default width and height, it appears with the Form container’s minimum dimensions 6 84 Chapter . following: l The Flex Charting controls are part of the Data Visualization components and are included with a license for Flash Builder 4 Premium. l There. the ViewStack and related navigator containers. n Note In the Flex 4 SDK, the Form container and its related components, FormHeading and FormItem, have