Flash Builder 4 and Flex 4 Bible- P15

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

lượt xem

Flash Builder 4 and Flex 4 Bible- P15

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

Flash Builder 4 and Flex 4 Bible- P15: 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ủ đề:

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

  1. Chapter 21: Using the Flex Charting Controls 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 On the Web The application in Listing 21.8 is available in the Web site files as LineAndAreaDemo.mxml in the chapter20 project. n 671
  2. Part III: Working with Data 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 672
  3. Chapter 21: Using the Flex Charting Controls 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. 673
  4. CHAPTER Working with Data Entry Forms 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 IN THIS CHAPTER environment. As you have seen in earlier chapters, you can Using the Form container embed data into the application using hard-coded MXML or ActionScript, or by integrating data into the application with the tag. These Creating a Form component strategies, however, only work for data that’s both small and static. Laying out Form controls with For existing data that’s retrieved from a server-based resource, such as a the FormItem container database or an EXtensible Markup Language (XML) file, you can use Remote Validating data entry Procedure Call (RPC) components such as HTTPService, WebService, and RemoteObject. Sharing data with value objects and custom events 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 675
  5. Part III: Working with Data 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 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: ... nested components ... 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. 676
  6. Chapter 22: Working with Data Entry Forms 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 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 677
  7. Part III: Working with Data 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 On the Web The code in Listing 22.2 is available in the Web site files as MultipleFormHeadings.mxml in the chapter22 project. n 678
  8. Chapter 22: Working with Data Entry Forms 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 679
  9. Part III: Working with Data 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 tag set handles each of these tasks: @namespace s “library://ns.adobe.com/flex/spark”; @namespace mx “library://ns.adobe.com/flex/mx”; .leftAlignedLabels { text-align: left; } mx|FormItem { 680
  10. Chapter 22: Working with Data Entry Forms labelStyleName:leftAlignedLabels; } Figure 22.4 shows the visual result. The labels within the Form container’s left column are now left-aligned. FIGURE 22.4 A form with left-aligned labels and horizontal layout Left-aligned columns Controlling FormItem layout Controls within the FormItem container are stacked vertically by default. You can change the lay- out rules for any particular FormItem container by setting its direction property to hori- zontal. The following code causes the three TextInput controls to lay out side by side, instead of being stacked on top of each other: Caution If a FormItem container with its direction set to horizontal has its width restricted to a point where there isn’t room for all its nested controls, it “wraps” the controls to the next line. The solution is to widen the FormItem container. n Setting a default button In most Web browsers, when the cursor is in an HTML form’s text field and the user presses Enter or Return, the first “submit” button behaves as though the user has clicked it. This is known as default button behavior and is automatic in those browsers that support it. 681
  11. Part III: Working with Data The Flex Form container does not have an automatic default button, but you can create the behav- ior by setting the Form container’s defaultButton property. This property is designed to refer to a Button object somewhere in the current application or component; you set it with a binding expression that refers to the target Button object by its id. Setting a default button in Flex causes these behaviors: l When any control in the Form container has focus, the default button shows a colored glow, indicating that pressing Enter or Return is the same as clicking the button. l When the user presses Enter or Return, the Button object’s click event is dispatched. The application in Listing 22.4 has a simple Form container with its defaultButton property set to a Button control with an id of saveButton. The user can click the button or press Enter or Return with the cursor in a TextInput control; either way, the Button object’s click event is dispatched. LISTING 22.4 A Form with a default button @namespace s “library://ns.adobe.com/flex/spark”; @namespace mx “library://ns.adobe.com/flex/mx”; mx|Form { background-color:#EEEEEE; border-style:solid; border-color:#000000; } 682
  12. Chapter 22: Working with Data Entry Forms On the Web The code in Listing 22.4 is available in the Web site files as FormDefaultButton.mxml in the chapter22 project. n Tip The default button does not have to be nested inside the Form container. The defaultButton property ref- erences the button object by its id, so as long as the button control is “in scope” the default button behavior works as expected. This is particularly useful if you want to nest a Button object in the control bar area of a Panel (outside the Form container). n Using Custom Form Components Data entry 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 You can create a custom Form component as an MXML component with as its root element. Flash Builder does a particularly nice job of helping you lay out Form components in Design view. Try these steps to create a simple Form component: 1. Open the chapter22 project from the Web site files. Notice that the project’s source root folder has a package named forms. 2. Right-click (Ctrl+click on the Mac) the forms package. 3. Select New ➪ MXML Component from the context menu. 683
  13. Part III: Working with Data 4. In the New MXML Component wizard, set these properties (shown in Figure 22.5): l Filename: LoginForm.mxml l Based on: mx.containers.Form l Width: [blank value] l Height: [blank value] FIGURE 22.5 Creating a Form component with the New MXML Component wizard 5. Click Finish to create the new component. The new component should appear in Flash Builder. 6. If the component opens in Design mode, click Source to switch to Source mode. The beginning code for the Form component looks like this: 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. 684
  14. Chapter 22: Working with Data Entry Forms Adding controls to a Form component When you are building a Form 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 customize the control’s appearance and behavior. Follow these steps to add data entry form controls to the LoginForm component that was described in the preceding section: 1. Open the LoginForm.mxml file in Design mode. 2. Locate the TextInput control in the Text section of the Components view. 3. Drag the control into the editor region, and drop it inside the Form area. As shown in Figure 22.6, you should see that the TextInput control is wrapped in a FormItem container automatically, with a default label property of Label. FIGURE 22.6 A TextInput control wrapped in a FormItem container in Design mode 4. Double-click the FormItem container’s label region. When the label turns into an input control, type the label Email Address:. 5. Click the new TextInput control in Design view. 6. In the Properties view, change the TextInput control’s id to emailInput. 7. Drag another TextInput control from the Components view into the form. Caution To ensure that a new FormItem container is wrapped around the new control, make sure the blue insertion line that’s displayed during the drag-and-drop operation is as wide as the existing FormItem container (shown in Figure 22.7). If it’s the size of the TextInput control when you release the mouse button, the new TextInput control will be dropped into the existing FormItem container. n 8. Double-click the label of the new FormItem container and change it to Password:. 9. Change the new TextInput control’s id to passwordInput. 685
  15. Part III: Working with Data FIGURE 22.7 The insertion indicator is the width of the existing FormItem, meaning that you’ll cre- ate a new FormItem when you drop the component. The blue insertion indicator 10. Drag a Button control into the Form and place it below the existing FormItem container, in its own container. 11. Double-click the new Button control and change its label to Log In. 12. Double-click the label of the new FormItem container and delete the default value. The component should now appear as it does in Figure 22.8. FIGURE 22.8 The Form component in its current state 13. Switch to Source mode. The Form component’s source code should now look like this: 686
  16. Chapter 22: Working with Data Entry Forms You’ll continue to build your custom form component later in this chapter. Caution When creating a Form component in Design mode, it’s easy to accidentally change the id property of the FormItem container instead of its nested component. The purpose of the id is to enable you to easily collect data from the Form controls when the user clicks the button or otherwise indicates that data entry is complete. You care about the data in the controls, not any data that might be associated with the FormItem containers. n Validating Data Entry When a user enters data into any database application, you typically want to ensure that it matches specific criteria before sending it to the server or saving it into a persistent data store. Flex provides a set of ActionScript classes in the mx.validators package that are designed for this purpose. Each of the following classes validates a particular data type: l CreditCardValidator. Checks that a String has the correct length and prefix and passes the Luhn mod10 algorithm for the specified card type. Web Resource For more information on the Luhn mod10 algorithm, visit this entry at Wikipedia: http://en.wikipedia. org/wiki/Luhn_algorithm. n l CurrencyValidator. Checks that a String matches a valid currency pattern; can be customized for particular locales and other specific rules. l DateValidator. Checks that a Date, String, or Object variable contains a valid date value; can be customized for particular date ranges. l EmailValidator. Checks that a String follows the common pattern of an e-mail address. l NumberValidator. Checks that a value is a Number or a String that can be parsed as a number; can be customized for particular numeric ranges and other rules. l PhoneNumberValidator. Checks that a value matches a valid phone number pattern; can be customized for particular locales and other specific rules. l RegExpValidator. Checks that a String matches a regular expression. l SocialSecurityValidator. Checks that a String matches a valid Social Security number pattern. l StringValidator. Checks for String values that match your specific criteria, includ- ing minimum and maximum length. l ZipCodeValidator. Checks that a String matches a valid ZIP code pattern. 687
  17. Part III: Working with Data All validator classes are extended from mx.validators.Validator, so they’re all used the same basic way. Creating a validator object You can create validator objects with either MXML or ActionScript. Each validator object is assigned to a single control and implements these required properties that determine its behavior at runtime: l property. The name of the source object’s property that contains the value to be validated. l source. A reference to the data entry control being validated. For example, assume your data entry form includes this TextInput control, which you want to validate as an e-mail address: The validator object declaration for this control would minimally include the source, referencing the TextInput control’s id in a binding expression, and the property, referencing the input con- trol’s text property as a string: New Feature In Flex 4 applications, validator controls declared with MXML tags must be placed inside an element. n The equivalent functionality in ActionScript looks like this: import mx.validators.EmailValidator; var myValidator:EmailValidator; private function initApp():void { myValidator = new EmailValidator; myValidator.source = emailInput; myValidator.property = “text”; } Controlling validation with trigger events By default, validation occurs either when the user completes a change to a control’s value or when he simply clicks or tabs into the control to give it focus and then clicks or tabs again to remove focus. This automatic validation is controlled by two properties that are shared by all validator classes: 688
  18. Chapter 22: Working with Data Entry Forms l trigger. A reference that points to an object that will trigger validation. l triggerEvent. A String containing the name of the event that will trigger validation. Validation happens automatically when a control loses focus because the validator object’s trigger property defaults to the value of its source property (the control being validated) and trigger Event defaults to the valueCommitted event. Normally, this event occurs when a change is made or the control simply loses focus. You can change when validation occurs by changing these properties’ values. For example, in an application where you want all controls to be validated when the user clicks a button, you would follow these steps: 1. Add a unique id to the Button control you want to use as the trigger. 2. Set each validator object’s trigger property to the Button control’s id in a binding expression. 3. Set each validator object’s triggerEvent property to the event name click. Follow these steps to add automatic validation to the LoginForm component you created in pre- vious sections of this chapter: 1. Open LoginForm.mxml in Source view. 2. Locate the Button control with a label of Log In, and add an id of loginButton. 3. After the start tag, declare an tag set. 4. Within the tag set, declare an EmailValidator object with MXML code. Set its id to emailValidator, source to the emailInput control, property to text, trigger to loginButton, and triggerEvent to click: 5. Add a StringValidator object inside the element with an id of passwordValidator. Set its source to passwordInput and all other prop- erties exactly like the first validator object: The Form component in Listing 22.5 uses identical trigger and triggerEvent properties to automatically trigger two different validator objects when a Button control is clicked. 689
  19. Part III: Working with Data LISTING 22.5 A Form component using automatic validation On the Web The code in Listing 22.5 is available in the Web site files as LoginFormAutoValidation.mxml in the forms folder of the chapter22 project. n To see the effect of this form, follow these steps to create a 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 login- Form. 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 application code should appear as follows:
Đồng bộ tài khoản