Flash Builder 4 and Flex 4 Bible- P7

Flash Builder 4 and Flex 4 Bible- P7: When Macromedia first released Flash MX in 2002, the product was branded as the newway to build Rich Internet Applications (known by the acronym RIA). The term wasinvented at Macromedia to describe a new class of applications that would offer thebenefits 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 applicationssince the mid-1990s....
Nội dung trích xuất từ tài liệu:
Flash Builder 4 and Flex 4 Bible- P7 Chapter 8: Using Flex Visual Controls groupName=”buttonGroup”/> On the WebThe code in Listing 8.4 is available in the Web site files in the chapter08 project as RadioButtonDemo.mxml. n Figure 8.10 shows the application displaying the resulting RadioButton controls and a pop-up window created by the Alert class that’s displayed when the user clicks a RadioButton or oth- erwise selects a new value.TipThe RadioButtonGroup control dispatches the change event whenever its selectedValue propertychanges. It also dispatches an itemClick event when the user clicks on any of the group’s member objects. n FIGURE 8.10An application with RadioButton controls Other Data Entry Controls The Flex framework includes these other controls that can be used to collect data from the applica- tion’s user: l NumericStepper l DateField l DateChooser l ColorPicker 271Part II: Designing Flex Applications Each of these controls is designed to support data entry for a particular type of data.TipIn the Flex 4 SDK, the NumericStepper control has been rewritten as a Spark component. The MX versionsof the DateField, DateChooser, and ColorPicker controls are the most recent versions and can be usedin Flex 4 applications. n The NumericStepper control The NumericStepper is a compound control that’s designed for numeric data entry. It includes a TextInput control for direct entry and a set of buttons that increment and decrement the con- trol’s current value. The NumericStepper doesn’t have its own label property, so it’s typically paired with a Label control or wrapped in a FormItem container, which has a label property. This code declares a simple NumericStepper wrapped in an HGroup with a Label: As shown in Figure 8.11, the control displays its value property, and the user can change it. FIGURE 8.11A NumericStepper control The NumericStepper supports these properties that determine its behavior: l minimum. The minimum permitted value; defaults to 0. l maximum. The maximum permitted value; defaults to 10. l stepSize. The amount to increment or decrement when the control’s buttons are clicked; defaults to 1. l maxChars. The maximum length of the value that can be directly typed into the control.272 Chapter 8: Using Flex Visual ControlsThis NumericStepper has a minimum value of 5, a maximum value of 25, and a stepSizeof 5: The NumericStepper control’s value property is bindable and can be used in a bindingexpression or ActionScript statement to get the value the user has entered: Date controlsTwo data entry controls are designed to show or select a date value: l DateChooser. Displays a calendar from which the user selects a date. l DateField. Displays a TextInput and a small calendar icon. When either is clicked, a calendar is displayed for date selection.The DateChooser controlThe DateChooser control presents an interactive calendar that displays a month and year andenables the user to do the following: l Navigate forward and back one month at a time l Select a single date, multiple dates, or a range of dates with mouse operationsThe following code declares a simple DateChooser control: The DateChooser control supports Boolean properties named allowMultipleSelectionand allowDisjointSelection that respectively enable a user to select multiple and non-con-tiguous dates. Changing either property causes changes in the control’s visual presentation.As shown in Figure 8.12, the DateChooser is presented as a visual calendar from which the usermakes selections.The DateField controlThe DateField control presents the user with an input control and a small calendar icon. Bydefault, when the user clicks either the icon or the input, a calendar control pops up that looks thesame as the DateChooser and enables the user to make his selection. However, unlike theDateChooser component, only a single date value can be selected. 273Part II: Designing Flex Applications FIGURE 8.12A DateChooser control The following code declares a simple DateField control: As shown in Figure 8.13, the DateField is presented as an input control and icon which, when ...