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 tion’s user:.
Trang 1Chapter 8: Using Flex Visual Controls
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 tion’s user:
Trang 2Each 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 trol’s current value
con-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:
<s:HGroup>
<s:Label text=”Enter value:”/>
<s:NumericStepper id=”myStepper” value=”5”/>
</s:HGroup>
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.
Trang 3Chapter 8: Using Flex Visual Controls
273
This NumericStepper has a minimum value of 5, a maximum value of 25, and a stepSize
of 5:
<mx:NumericStepper id=”myStepper”
minimum=”5” maximum=”25” stepSize=”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:
<s:Label text=”You entered: {myStepper.value}”/>
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 operationsThe following code declares a simple DateChooser control:
<mx:DateChooser id=”myDateChooser”/>
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 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
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 5Chapter 8: Using Flex Visual Controls
275
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
selectedDate Date The currently selected date value. nullshowToday Boolean Determines whether the current date
is highlighted.
true
dayNames Array An array of String values used as
labels for the day names.
[“S”,“M”,“T”,“W”,
“T”,“F”,“S”]minYear Int The minimum allowed year. 1900
maxYear Int The maximum allowed year. 2100disabledDays Array An array of integer values indicating
by zero-based index days that aren’t selectable.
Date values.
[]
selectableRange Object A selectable range Requires named
properties of rangeStart and
rangeEnd typed as Date values.
null
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 safe” colors It displays a button and, when clicked, a palette of colors The currently selected color
“web-is represented by the control’s selectedColor property, which returns a uint (unsigned ger) value You can pass the value of the control’s selectedColor to any other style or property which expects a color value
Trang 6The 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:
this.setStyle(“backgroundColor”, event.target.selectedColor);
} ]]>
</fx:Script>
<s:Panel title=”Using the ColorPicker control”
horizontalCenter=”0” top=”20” width=”300”>
<s:layout>
<s:HorizontalLayout paddingTop=”20” paddingRight=”10”
paddingLeft=”20” paddingBottom=”10”/>
</s:layout>
<s:Label text=”Choose an application background color:”/>
<mx:ColorPicker id=”colorPicker” selectedColor=”#EEEEEE”
Trang 7Chapter 8: Using Flex Visual Controls
277
FIGURE 8.14
The ColorPicker control
Using Interactive Controls
Beyond the data entry controls I described previously, certain controls are designed for user action that can be used in a variety of applications In this section, I describe the ScrollBar and Slider controls
inter-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
Trang 8Value Number The position of the scroll button relative to the top of a
VScrollBar or the left of an HScrollBar This property is bindable.
null
Minimum Number The minimum value of scrollPosition. 0Maximum Number The maximum value of scrollPosition. 100pageSize Number Determines delta of change in pixels when user clicks before
or after the scroll button.
20
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:
protected var scrollPos:Number;
protected function myScrollBar_changeHandler(event:Event):void {
scrollPos = event.target.value;
}
Trang 9Chapter 8: Using Flex Visual Controls
279
]]>
</fx:Script>
<s:Label id=”scrollLabel” fontSize=”18” fontWeight=”bold”
text=”Current scroll position: {scrollPos}”/>
<s:HScrollBar id=”myScrollBar” width=”300”
minimum=”0” maximum=”300” pageSize=”100”
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 sent starting and ending values
repre-The user interacts with the Slider control by clicking and dragging the thumb icon or by 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
click-Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 10The Slider controls return their current value through the value property The value 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.
value Number The currently selected value of the Slider based on
thumb position Relevant only when thumbCount is 1.
0
minimum Number Minimum value of the Slider. 0maximum Number Maximum value of the Slider. 10snapInterval Number When set a value other than 0, enforces snapping to par-
ticular intervals between minimum and maximum If set
<s:Label fontSize=”18” fontWeight=”bold”
text=”Current slider position: {mySlider.value}”/>
</s:Application>
Trang 11Chapter 8: Using Flex Visual Controls
281
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
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
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 12BitmapImage 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:
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:
<mx:Image source=”assets/{selectedImage}”/>
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
Trang 13Chapter 8: Using Flex Visual Controls
dimen-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 trol’s maintainAspectRatio property to false to enable it to skew the image:
Trang 14FIGURE 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:
<s:BitmapImage source=”@Embed(‘graphics/flower1.jpg’)”/>
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:
<s:BitmapImage source=”{flowerImage}”/>
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
Trang 15Chapter 8: Using Flex Visual Controls
Changing images at runtime
You can change which image is displayed at runtime in a few different ways The MX Image 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
con-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:
<s:BitmapImage id=”myImage” source=”{flowerImage1}”/>
<s:Button label=”Change Image” click=”myImage.source=flowerImage2”/>
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:
Trang 16<s:RadioButton value=”{flowerImage2}” label=”Image 2”
groupName=”flowerGroup”/>
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:
<mx:Image id=”myImage” source=”assets/flower1.jpg”/>
<s:Button label=”Change Picture”
click=”myImage.load(‘assets/flower2.jpg’)”/>
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
Trang 17W hen you present text in a Flex application, many choices and
tools can determine how text is displayed and processed Text values can be “hard-coded” in an application, retrieved from a data source (such as database on a server), and stored in memory as con-stants or variables
When text is presented to the user in visual control, you select many font settings, including the font typeface and its size, weight, and style In this chapter, I describe the various tools available for text processing and presen-tation in Flex I describe these strategies and techniques:
l Using the Flash Text Engine (FTE) to present complex text
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 classesAny 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 Labeland RichText controls in presenting text to the user
Trang 18Using 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 columnsThe following new text controls, initially described in Chapter 8, support the features of the FTE and TLF:
Presenting richly formatted text
As I previously described in Chapter 8, the RichText, RichEditableText, and TextAreacontrols 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
Trang 19Chapter 9: Working with Text
289
TABLE 9.1
TLF Tags and Equivalent Classes
<s:div> DivElement Defines a horizontal block with no implicit vertical
white space above or below.
<s:p> ParagraphElement Defines a horizontal block with implicit vertical white
space above and below.
<s:span> SpanElement Defines a section of text to which various text styles
can be applied.
<s:a> LinkElement Defines a section of text that, when clicked, links to a
Uniform Resource Locator (URL).
<s:img> InlineGraphicElement Defines an inline graphic.
<s:br> BreakElement Defines a line feed.
<s:tab> TabElement Defines a tab character.
<s:tcy> 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
A small normal paragraph in a serif font</s:p>
<s:p fontSize=”14” fontWeight=”bold” fontFamily=”_serif”>
A medium bold paragraph in a sans serif font</s:p>
<s:p fontSize=”18” fontFamily=”_typewriter”>A large <s:span fontStyle=”italic”>mixed-text</s:span>
paragraph in a typewriter font</s:p>
Trang 20On 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 <p> 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 <s:p>, <s:div>, and <s:span>, support many butes that match identically named styles These include, but are not limited to:
Trang 21Chapter 9: Working with Text
<s:p textIndent=”20” textAlign=”justify”>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis Nam blandit quam
ut lacus Quisque ornare risus quis ligula.</s:p>
</s:content>
</s:RichText>
</s:Application>
On the Web
The code in Listing 9.2 is available in the Web site files as TextIndentDemo.mxml in the chapter09 project n
Figure 9.2 shows the resulting application
FIGURE 9.2
A RichText object that uses text justification and indentation
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 22Presenting text in columns
The new text controls support columnar display Use these properties to define the number and size of the columns and gutters (gaps between the columns):
l columnCount Set to auto (the default) or a numeric value from 1 to 50
l columnWidth Set as a Number to indicate the columnar width in pixels
l columnGap Set as a Number to determine the width of the gap between the columns in pixels
The application in Listing 9.3 presents a RichText object with three columns The text in the control’s content property flows from one column to the next
LISTING 9.3 Displaying text in multiple columns
<?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:RichText id=”myTextArea” width=”500” height=”75”
columnCount=”3” columnWidth=”150” columnGap=”25”
horizontalCenter=”0” top=”20”>
<s:content>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.
Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis Nam blandit quam ut lacus
Quisque ornare risus quis ligula.
</s:content>
</s:RichText>
</s:Application>
On the Web
The code in Listing 9.3 is available in the Web site files as ColumnDemo.mxml in the chapter09 project n
Figure 9.3 shows the resulting text layout in multiple columns
Using bidirectional text
The new Flex 4 text controls support bidirectional text; that is, if you want to present a string that includes both Latin characters and an alphabet that runs right to left, such as Hebrew or Arabic,
Trang 23Chapter 9: Working with Text
<?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:RichText id=”myText” width=”200” fontSize=”18”
direction=”rtl” horizontalCenter=”0” top=”20”>
<s:content>
<![CDATA[
]]>
</s:content>
</s:RichText>
</s:Application>
On the Web
The code in Listing 9.4 is available in the Web site files as RTLDemo.mxml in the chapter09 project n
Figure 9.4 shows the resulting display, successfully mixing the two alphabets
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 24FIGURE 9.4
A RichText control displaying mixed text
Controlling Fonts with Cascading Style Sheets
Cascading Style Sheets (CSS) constitute one of the most important tools you have for modifying the appearance of text on the screen In this section, I describe specific styles and their values that you can use to change how Label, RichText, TextInput, or TextArea controls present textual information
Cross-Reference
I describe more extensive use of CSS in Flex applications in Chapter 11 n
In Flex 3, some font styles could be used with both device and embedded fonts, while others could
be used only with embedded fonts In Flex 3 applications, you could apply these styles to all fonts:
l fontFamily Determines the typeface
l color Determines the typeface color
l fontSize Determines the font size
l fontWeight Selects a bold font
l fontStyle Selects an italicized font
l textDecoration Selects an underlined font
These styles had an effect only on embedded fonts:
l kerning Enables adjustments to the horizontal gap between characters
l fontAntiAliasType Enables the use of these advanced anti-aliasing styles:
l fontGridType Determines whether to measure fonts based on pixels or subpixels
l fontThickness Determines the thickness of font glyph edges
l fontSharpness Determines the sharpness of font glyphs
Trang 25Chapter 9: Working with Text
<s:Label fontFamily=”Arial” text=”Hello World”/>
When you declare the fontFamily style in an embedded or external style sheet, you can use either the camel-case version of the style name, fontFamily, or the hyphenated version, font-family This type selector sets an application’s default font for the Label and RichTextcontrols to Times New Roman:
<fx:Style>
@namespace s “library://ns.adobe.com/flex/spark”;
s|Label, s|RichText { font-family:”Times New Roman”;
For example, a font declared with a name of BookmanOldStyleBold without surrounding quotes is formed internally to BookmanOldStyleBold and no longer matches up correctly with its actual font on the client system n
trans-Caution
If you misname a typeface in a fontFamly declaration, Flash Player renders the unrecognized font as the client system’s default serif typeface, which is typically Times Roman n
Two types of fonts can be used in Flex applications:
l Device fonts Typefaces that are installed on the client system.
l Embedded fonts Typefaces that are embedded in a compiled Flex application and
delivered to the client system as part of the application SWF file
Table 9.2 lists the pros and cons of using device versus embedded fonts
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.