Flash Builder 4 and Flex 4 Bible- P7

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

lượt xem

Flash Builder 4 and Flex 4 Bible- P7

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- P7: 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- P7

  1. Chapter 8: Using Flex Visual Controls groupName=”buttonGroup”/> On the Web The 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. Tip The RadioButtonGroup control dispatches the change event whenever its selectedValue property changes. It also dispatches an itemClick event when the user clicks on any of the group’s member objects. n FIGURE 8.10 An 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 271
  2. Part II: Designing Flex Applications Each of these controls is designed to support data entry for a particular type of data. Tip In the Flex 4 SDK, the NumericStepper control has been rewritten as a Spark component. The MX versions of the DateField, DateChooser, and ColorPicker controls are the most recent versions and can be used in 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.11 A 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
  3. Chapter 8: Using Flex Visual Controls This NumericStepper has a minimum value of 5, a maximum value of 25, and a stepSize of 5: The NumericStepper control’s value property is bindable and can be used in a binding expression or ActionScript statement to get the value the user has entered: Date controls Two 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 control The DateChooser control presents an interactive calendar that displays a month and year and enables 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 operations The following code declares a simple DateChooser control: The DateChooser control supports Boolean properties named allowMultipleSelection and 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 user makes selections. The DateField control The DateField control presents the user with an input control and a small calendar icon. By default, when the user clicks either the icon or the input, a calendar control pops up that looks the same as the DateChooser and enables the user to make his selection. However, unlike the DateChooser component, only a single date value can be selected. 273
  4. Part II: Designing Flex Applications FIGURE 8.12 A 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 clicked, present a calendar control. The DateField control has a Boolean property named editable that’s set to false by default. When set to true, the user can click into the input area and type a date value. FIGURE 8.13 A DateField control 274
  5. Chapter 8: Using Flex Visual Controls Date entry properties and methods The DateChooser and DateField controls share a common set of properties that enable you to control their behavior and collect their data. Table 8.4 describes these properties and their capabilities. TABLE 8.4 Date Entry Control Properties Property Data Type Description Default selectedDate Date The currently selected date value. null showToday Boolean Determines whether the current date true is highlighted. dayNames Array An array of String values used as [ “S”, “M”, “T”, “W”, labels for the day names. “T”, “F”, “S” ] minYear Int The minimum allowed year. 1900 maxYear Int The maximum allowed year. 2100 disabledDays Array An array of integer values indicating [] by zero-based index days that aren’t Setting of [0,6] would dis- selectable. able Sunday and Saturday disabledRanges Array of A set of disabled ranges. Each range [] Object has named properties of range- Start and rangeEnd typed as Date values. selectableRange Object A selectable range. Requires named null properties of rangeStart and rangeEnd typed as Date values. Other useful properties are described in the API documentation for DateField and DateChooser. The ColorPicker control The ColorPicker control enables a user of your application to select from one of standard “web- safe” colors. It displays a button and, when clicked, a palette of colors. The currently selected color is represented by the control’s selectedColor property, which returns a uint (unsigned inte- ger) value. You can pass the value of the control’s selectedColor to any other style or property which expects a color value. Note The ColorPicker control has not been rewritten in the Spark component framework for Flex 4. The MX ver- sion of the control, however, works fine in Flex 4 applications. n 275
  6. Part II: Designing Flex Applications The application in Listing 8.5 displays a ColorPicker control. When the user selects a color, a change event is dispatched. The code in the event handler function sets the application’s backgroundColor style to the color that’s selected by the application user: LISTING 8.5 An application using a color picker On the Web The code in Listing 8.5 is available in the Web site files in the chapter08 project as ColorPickerDemo. mxml. n Figure 8.14 shows the resulting application, with a ColorPicker control inside a Panel. 276
  7. Chapter 8: Using Flex Visual Controls FIGURE 8.14 The ColorPicker control Using Interactive Controls Beyond the data entry controls I described previously, certain controls are designed for user inter- action that can be used in a variety of applications. In this section, I describe the ScrollBar and Slider controls. The ScrollBar controls There are two versions of the ScrollBar control: l HScrollBar. For a horizontal scrollbar. l VScrollBar. For a vertical scrollbar. A ScrollBar control has four graphic elements: a track, a button, and two arrows. The user changes the control’s current value by clicking and dragging the button, clicking above or below the button, or clicking one of the arrows. The ScrollBar returns its current value through its scrollPosition property. The scrollPosition property isn’t bindable, so typically it han- dles ScrollBar interactions by listening for the scroll event, which is dispatched each time the position of the button changes. Cross-Reference The Flex 4 SDK also includes a new Scroller component that’s designed to enable scrolling in Spark contain- ers such as the new version of Panel. I describe how to use the Scroller component in Chapter 10. n 277
  8. Part II: Designing Flex Applications ScrollBar properties The new Spark versions of the VScrollBar and HScrollBar controls are extended from the ScrollBar superclass, which implements the properties described in Table 8.5. TABLE 8.5 ScrollBar Properties Property Data Type Description Default Value Number The position of the scroll button relative to the top of a null VScrollBar or the left of an HScrollBar. This property is bindable. Minimum Number The minimum value of scrollPosition. 0 Maximum Number The maximum value of scrollPosition. 100 pageSize Number Determines delta of change in pixels when user clicks before 20 or after the scroll button. The change event The change event is dispatched each time the user interacts with the ScrollBar control. Its event object is typed as an event class named mx.events.ScrollEvent, which has a posi- tion property containing the new scrollPosition. In the application in Listing 8.6, the HScrollBar control’s new scrollPosition is displayed in a Label control whose text property is changed each time the scroll event is handled: LISTING 8.6 An application using a scroll bar
  9. Chapter 8: Using Flex Visual Controls ]]> On the Web The code in Listing 8.6 is available in the Web site files in the chapter08 project as RadioButtonDemo. mxml. n Figure 8.15 shows the HScrollBar and Label controls. FIGURE 8.15 An HScrollBar and a Label control displaying its current position The Slider controls There are two versions of the Slider control: l HSlider. For a horizontal slider. l VSlider. For a vertical slider. A Slider control displays a track and a “thumb” graphic that enables the user to select a value by clicking and dragging the thumb. You allow the slider to select any value within a range or restrict it to selecting values at particular intervals. The control also can display two thumb icons to repre- sent starting and ending values. The user interacts with the Slider control by clicking and dragging the thumb icon or by click- ing before or after the thumb. If the user clicks before or after the thumb, the slider slides to the selected position. If the Slider has implemented snapping through the snapInterval prop- erty, the thumb slides to the snapping position that’s closest to where the mouse click occurred. 279
  10. Part II: Designing Flex Applications The Slider controls return their current value through the value property. The value prop- erty is bindable, so you can handle Slider interactions through either binding expressions or events. Each time the Slider control’s value changes, it dispatches the change event. Slider properties The VSlider and HSlider are extended from the Slider superclass, which implements the properties described in Table 8.6. TABLE 8.6 Slider Properties Property Data Type Description Default value Number The currently selected value of the Slider based on 0 thumb position. Relevant only when thumbCount is 1. minimum Number Minimum value of the Slider. 0 maximum Number Maximum value of the Slider. 10 snapInterval Number When set a value other than 0, enforces snapping to par- 0 ticular intervals between minimum and maximum. If set to 0, sliding is continuous. The application in Listing 8.7 declares a horizontal Slider. Its value is displayed in a Label control through a binding expression. LISTING 8.7 An application using a slider 280
  11. Chapter 8: Using Flex Visual Controls On the Web The code in Listing 8.7 is available in the Web site files in the chapter08 project as SliderDemo.mxml. n Figure 8.16 shows the resulting application. FIGURE 8.16 A horizontal slider Slider events The Slider controls also support a set of events that enable you to detect and handle changes to the Slider control’s value with ActionScript event handlers. Slider events include the following: l change. Dispatched when the control’s value property changes as a result of a user gesture. l thumbDrag. Dispatched when the user drags the thumb icon. l thumbPress. Dispatched when the user presses on the thumb icon with the left mouse button. l thumbRelease. Dispatched when the user releases the thumb icon. The change event dispatches an event object typed as flash.events.Event, while the thumbDrag, thumbPress, and thumbRelease events dispatch an object typed as spark. events.TrackBaseEvent. Using the Image and BitmapImage Controls The Flex SDK presents images with the MX Image and the Spark BitmapImage control. The MX Image control can be used to present images that are downloaded from a server at runtime, loaded from the local hard disk at runtime (for AIR applications only, because Web applications don’t have access to the local file system), or embedded in the Flex application. The Spark 281
  12. Part II: Designing Flex Applications BitmapImage control, which is implemented as a primitive class (rather than as a component), supports embedding of images but is not able to download images from the Web or load images from the local file system at runtime. The Image and BitmapImage controls can be declared in either MXML or ActionScript. You determine which image is presented with the source property. When used to load images at runtime, the MX Image control’s source property is set to a full URI (Uniform Resource Identifier) path (subject to Flash Player security restrictions) or a location that’s relative to the application location. Tip For Web applications, the application location is the Web server and folder from which the application’s SWF file is downloaded. For desktop applications, the application location is the folder on the hard disk in which the AIR application is installed. n Flash Player and Adobe AIR can load these types of images at runtime: l JPEG l GIF l PNG l SWF Tip SWF files are treated as static images by the Image control, but if the SWF file was built in the Flash authoring environment and incorporates animation, the animation plays successfully in the Flex application. n Cross-Reference For more complex uses of content built in the Flash authoring environment, see the description of creating Flash components in Chapter 5. n This code declares an MX Image control that loads a graphic file named flower1.jpg at run- time from an assets subfolder of the application’s location folder: Figure 8.17 shows the application displaying the graphic. You can also load images at runtime by setting the Image control’s source property with a binding expression. This Image downloads and displays a new image file each time the value of a bindable variable named selectedImage changes: Notice that the value of the source property combines a literal value containing the location of the file and a binding expression containing the filename. 282
  13. Chapter 8: Using Flex Visual Controls FIGURE 8.17 An application displaying an image with the Image control Resizing images The Image and BitmapImage controls size themselves by default based on the native dimen- sions of the original graphic image file. For example, if the image is 200 pixels wide by 300 pixels high and you don’t declare a specific size, the control sizes itself to those dimensions. You can resize images at runtime with the Image control’s height and width properties. Both properties reflect the image size in pixels. If you set only one of these dimension properties, the Image control automatically calculates and resets the other dimension to maintain the image’s original aspect ratio (the ratio of width to height). If this size is smaller than the original image, the image will appear smaller, but the entire Image control will be larger. If you set both the height and width and don’t exactly match the original aspect ratio, set the con- trol’s maintainAspectRatio property to false to enable it to skew the image: Figure 8.18 shows the image with explicit height and width properties and maintain AspectRatio set to false. 283
  14. Part II: Designing Flex Applications FIGURE 8.18 An image with specific width and height and maintainAspectRatio set to false Embedding images When you embed an image in a Flex application, you expand the size of the application by the size of the graphic file. At runtime an embedded image is displayed instantly, rather than having to be loaded from the Web or disk; the result is an improvement in perceived application performance, as well as the ability to import SVG (Scalable Vector Graphics) images in your Flex application. You can embed images in a Flex application in two ways. If you want to embed an image once and always display it in the same location, use this syntax: Because you’re embedding the image in a particular instance of the Image control, you can’t easily reuse the embedded image elsewhere in the application. If you want an embedded image that can easily be bound to various controls, use the [Embed] metadata tag and a Class variable declara- tion inside a Script section: [Embed(source=”graphics/flower1.jpg”)] [Bindable] public var flowerImage:Class; Then set the BitmapImage control’s source property to the variable name using a binding expression: Tip When you embed images with the [Embed] metadata tag, you have the freedom to display the embedded image anywhere in the application. This is the same technique I described earlier when discussing using embedded images as Button control icons. n 284
  15. Chapter 8: Using Flex Visual Controls New Feature Flex 4 adds two elements named and that can be used to define reus- able visual elements in an MXML file. The following application defines a graphical element named FlowerImage based on a BitmapImage and then presents it twice: n Changing images at runtime You can change which image is displayed at runtime in a few different ways. The MX Image con- trol’s source property can be reset to a String, indicating the relative location of an image to be loaded at runtime. With both the MX Image and the Spark BitmapImage, you can set source to a variable that references an embedded image. This code embeds two images and switches the source of the Image control to one of the variable references when the button is clicked: You also can set the source property using a binding expression. This code uses a group of RadioButton controls to enable the user to switch between the two embedded images: 285
  16. Part II: Designing Flex Applications You also can change images at runtime with the MX Image control’s load() method. The load() method accepts a single argument that can be either a String for a runtime loaded image or a variable referencing an embedded image. This code shows a Button control with a click event handler that causes a new image to be loaded at runtime: Tip It doesn’t matter whether you use the load() method or simply change the value of the source property. Both actions have the same effect on the MX Image control. n Summary In this chapter, I described the nature of Flex controls and the details of some of the most useful controls in the Flex framework. You learned the following: l Flex visual components consist of containers and controls. l A container is a visual component that contains other objects. l A visual control presents information to the user and can also be interactive. l Controls can be used for application layout, to display data, and to collect data from the user. l The new Spark components include these text controls: Label, RichText, RichEditableText, TextInput, and TextArea. l Layout controls include HRule, VRule, and Spacer. l Button controls include Button, CheckBox, RadioButton, and PopupButton. l Other data entry controls include NumericStepper, DateField, DateChooser, and ColorPicker. l Other interactive controls include HScrollBar, VScrollBar, HSlider, and VSlider. l The MX Image control displays images that are loaded at runtime or embedded in the Flex application. l The Spark BitmapImage control is a lighter weight primitive (rather than a complete component) that only works with embedded images. 286
  17. CHAPTER Working with Text W hen you present text in a Flex application, many choices and tools can determine how text is displayed and processed. Text IN THIS CHAPTER values can be “hard-coded” in an application, retrieved from a Using advanced text layout data source (such as database on a server), and stored in memory as con- stants or variables. Controlling fonts When text is presented to the user in visual control, you select many font Using device fonts settings, including the font typeface and its size, weight, and style. In this Embedding fonts chapter, I describe the various tools available for text processing and presen- tation in Flex. I describe these strategies and techniques: Setting font rotation l Using the Flash Text Engine (FTE) to present complex text Using formatter classes l Selecting device fonts for text display that are already installed on the client computer l Embedding fonts to tightly control text display regardless of the state of the client computer l Formatting of text values with the formatter family of classes Any discussion of text presentation in Flex must include the use of Cascading Style Sheets (CSS) to select font typefaces and styles, and the use of visual controls that are specifically designed for text presentation, such as the Label and RichText controls. (Refer to Chapter 8 for a detailed dis- cussion about the use of visual controls and Chapter 11 for more informa- tion about CSS.) In this chapter, I describe uses of styles that are specifically designed to control text presentation, and I expand on the use of the Label and RichText controls in presenting text to the user. On the Web To use the sample code for this chapter, import the chapter09.fxp Flex project from the Web site files into your Flash Builder workspace. n 287
  18. Part II: Designing Flex Applications Using Advanced Text Layout Flex 4 applications require Flash Player 10, whether the application is deployed over the Web or on the desktop with Adobe AIR. One of the benefits of this most recent version of Flash Player is its capability to present complex text with an element of the software known as the Flash Text Engine (FTE) and the Text Layout Framework (TLF). The FTE supports these features: l Bidirectional and vertical text layout l Support for more than 30 alphabets and character sets, including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, the major writing systems of India, and others l Advanced typographical control, including kerning, masks, blends, whitespace handling, margins, and indentations l Display of text across multiple columns The following new text controls, initially described in Chapter 8, support the features of the FTE and TLF: l Label l RichText l RichEditableText l TextInput l TextArea The FTE is a set of classes that support complex text presentation. These classes are a part of Flash Player 10 and are available to all Flash documents regardless of whether they’re built with the Flex SDK or the Flash authoring environment. The TLF is a separate framework, provided in the set of classes packaged in the component library file textLayout.swc. This SWC file is included with the Flex 4 SDK, so its classes are available to all Flex 4 applications. Presenting richly formatted text As I previously described in Chapter 8, the RichText, RichEditableText, and TextArea controls support the content and textFlow properties, which you can use to describe richly formatted text. When you set the content property’s value with a child element in an MXML declaration, you can include a number of tags that create various layout and visual effects. Each tag is the equivalent of an ActionScript class that’s provided as part of the TLF. Table 9.1 shows the tags you can include in a content string, their ActionScript equivalents. 288
  19. Chapter 9: Working with Text TABLE 9.1 TLF Tags and Equivalent Classes Tag Class Description DivElement Defines a horizontal block with no implicit vertical white space above or below. ParagraphElement Defines a horizontal block with implicit vertical white space above and below. SpanElement Defines a section of text to which various text styles can be applied. LinkElement Defines a section of text that, when clicked, links to a Uniform Resource Locator (URL). InlineGraphicElement Defines an inline graphic. BreakElement Defines a line feed. TabElement Defines a tab character. TCYElement Causes text to be drawn horizontally within a line that otherwise is laid out vertically. You declare each of the TLF tags with the Spark XML namespace prefix of s:, as shown in the application in Listing 9.1. The application’s RichText object has its content set to display text with mixed font sizes and font faces, and bold and italicized characters. LISTING 9.1 An application with richly formatted text A small normal paragraph in a serif font A medium bold paragraph in a sans serif font A large mixed-text paragraph in a typewriter font 289
  20. Part II: Designing Flex Applications On the Web The code in Listing 9.1 is available in the Web site files as RichTextDemo.mxml in the chapter09 project. n Figure 9.1 shows the resulting application. Line feeds and vertical space in the RichText object result from the tags, and text is displayed in various font styles based on the fontWeight, fontStyle, and fontFamily attributes. FIGURE 9.1 An application with a RichText object Each of the container elements, including , , and , support many attri- butes that match identically named styles. These include, but are not limited to: l backgroundColor l color l fontFamily l fontSize l fontStyle l fontWeight l lineHeight l lineThrough l textAlign l textDecoration l textIndent l textRotation l whiteSpaceCollapse For example, the application in Listing 9.2 defines two paragraphs. Each paragraph has its first line indented 20 pixels and justifies the text to expand and fill the entire line. The first paragraph has a marginBottom setting of 10 pixels to add vertical white space between the paragraphs. 290
Đồng bộ tài khoản