Tài liệu Flash Builder 4 and Flex 4 Bible- P8 doc

Chapter 10: Using Layout Containers
321
<s:stroke>
<s:SolidColorStroke color=”#000000” weight=”5”/>
</s:stroke>
</s:Rect>
<s:TextInput text=”TextInput 1” x=”10” y=”10”/>
<s:TextInput text=”TextInput 2” x=”70” y=”52”/>
<s:TextInput text=”TextInput 3” x=”141” y=”97”/>
<! These Rect objects overlap each other with some transparency >
<s:Rect width=”100” height=”100” x=”224” y=”144”>
<s:fill>
<s:SolidColor color=”#999999”/>
</s:fill>
</s:Rect>
<s:Rect width=”100” height=”100” x=”249” y=”169” alpha=”.5”>
<s:fill>
<s:SolidColor color=”#666666”/>
</s:fill>
</s:Rect>
<s:Rect width=”100” height=”100” x=”274” y=”194” alpha=”.5”>
<s:fill>
<s:SolidColor color=”#000000”/>
</s:fill>
</s:Rect>
</s:Group>
</s:Application>
On the Web
The code in Listing 10.5 is available in the Web site files as GroupDemo.mxml in the chapter10 project.
n
The completed application is shown in Figure 10.8.

Using VGroup and HGroup
The VGroup and HGroup components share all the features of Group, and add flow-based layout
logic. Along with automatic vertical or horizontal alignment, these components implement the fol-
lowing properties that determine padding, alignment, and gaps:
l
verticalAlign. HGroup only. Should be set to top, middle, bottom, justify, or
contentJustify.
l
horizontalAlign. VGroup only. Should be set to left, center, right, justify,
or
contentJustify.
l
gap. Should be set to a number of pixels between objects. (This does the same thing as
verticalGap and horizontalGap for MX Box containers, but is applied differently
depending on which Spark container you’re using: when used with
HGroup it’s applied to
the horizontal gap, and when used with
VGroup it’s applied to the vertical gap.)
16_488959-ch10.indd 32116_488959-ch10.indd 321 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Part II: Designing Flex Applications
322
FIGURE 10.8
An application with a Group that contains MXML graphics and other Flex components
The application in Listing 10.6 declares an HGroup inside a Group. The outer Group implements
the border with an MXML graphic; the nested
HGroup lays out its child objects (three TextInput
controls) from left to right.
LISTING 10.6
An application with an HGroup nested inside a Group

<?xml version=”1.0” encoding=”utf-8”?>
<s:Application xmlns:fx=”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”>
<s:Group id=”myGroup” width=”600” height=”50”
horizontalCenter=”0” top=”20”>
<s:Rect width=”100%” height=”100%”>
<s:stroke>
<s:SolidColorStroke color=”#000000” weight=”5”/>
</s:stroke>
</s:Rect>
<s:HGroup
top=”10” left=”10”
height=”{myGroup.height-20}” width=”{myGroup.width-20}”>
<s:TextInput text=”TextInput 1”/>
<s:TextInput text=”TextInput 2”/>
<s:TextInput text=”TextInput 3”/>
</s:HGroup>
</s:Group>
</s:Application>
16_488959-ch10.indd 32216_488959-ch10.indd 322 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 10: Using Layout Containers
323
On the Web
The code in Listing 10.6 is available in the Web site files as HGroupDemo.mxml in the chapter10 project.
A similar application named
VGroupDemo.mxml is included that demonstrates nesting a VGroup inside a
Group for vertical layout.
n

The completed application is shown in Figure 10.9.
FIGURE 10.9
An HGroup nested within a Group, containing three TextInput controls
Using the Spark BorderContainer
The Spark BorderContainer component is designed to be used whenever you need a rectangu-
lar container that supports very simple styles but doesn’t require a full component skin. It extends
the
SkinnableContainer class but typically isn’t used with a custom skin. Unlike the Group
components, which are designed exclusively for layout and don’t display borders or background
colors, the
BorderContainer implements the following styles and default values:
l
backgroundImage = “undefined”
l
backgroundImageFillMode = “scale”
l
borderAlpha = “1.0”
l
borderColor = “0xB7BABC”
l
borderStyle = “solid”
l
borderVisible = “true”
l
borderWeight = “1”
l
cornerRadius = “0”
l
dropShadowVisible = “false”
In addition, BorderContainer implements properties named backgroundFill (set to an

instance of any class that implements the
IFill interface) and borderStroke (set to an
instance of any class that implements the
IStroke interface). You can mix and match the border
and background styles and properties as need to achieve the application’s visual design.
16_488959-ch10.indd 32316_488959-ch10.indd 323 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Part II: Designing Flex Applications
324
The application in Listing 10.7 displays two instances of the BorderContainer component. The
first uses style declarations for its border and background, while the second uses the more complex
backgroundFill property to display a gradient fill.
LISTING 10.7
An application with two instances of the BorderContainer component
<?xml version=”1.0” encoding=”utf-8”?>
<s:Application xmlns:fx=”
xmlns:s=”library://ns.adobe.com/flex/spark”>
<s:HGroup gap=”40” top=”20” horizontalCenter=”0”>
<s:BorderContainer
horizontalCenter=”-257” top=”0”
backgroundColor=”#CCCCCC”
borderColor=”#000000” borderWeight=”3” width=”283”>
<s:Label text=”A BorderContainer with styles”
fontSize=”14” fontWeight=”bold”
horizontalCenter=”0” verticalCenter=”0”/>
</s:BorderContainer>
<s:BorderContainer width=”378” borderColor=”#000000” borderWeight=”4”>
<s:backgroundFill>
<s:RadialGradient>
<s:entries>

<s:GradientEntry color=”#FFFFFF”/>
<s:GradientEntry color=”#999999”/>
</s:entries>
</s:RadialGradient>
</s:backgroundFill>
<s:Label text=”A BorderContainer with a backgroundFill object”
fontSize=”14” fontWeight=”bold”
horizontalCenter=”0” verticalCenter=”0”/>
</s:BorderContainer>
</s:HGroup>
</s:Application>
On the Web
The code in Listing 10.7 is available in the Web site files as BorderContainerDemo.mxml in the
chapter10 project.
n
Figure 10.10 shows the finished application, with the container using simple styles on the left and
the version using the complex fill object on the right.
16_488959-ch10.indd 32416_488959-ch10.indd 324 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 10: Using Layout Containers
325
FIGURE 10.10
An application displaying two instances of BorderContainer
Using Panel Containers
Panel containers display a rectangular region that looks like a dialog box. Unlike the MX Box
containers and the Spark
Group containers, which don’t have any default visual appearance, you
use a
Panel when you want to wrap content inside a visual presentation that sets it off from the
rest of the application.

There are two versions of the
Panel container: an older MX version that includes the capability to
nest a
ControlBar as a footer and a newer Spark version that supports declarative skins built
with MXML graphics.
Cross-Reference
The process of skinning Spark components with the SparkSkin class and FXG graphics is described in
Chapter 15.
n
A simple Panel is declared in MXML with a pair of <Panel> tags. The Panel container’s nested
components are declared between the paired tags. This code declares an MX
Panel:
<mx:Panel title=”My MX Panel”>
place contents here
</mx:Panel>
And this code declares a Spark Panel:
<s:Panel title=”My Spark Panel”>
place contents here
</s:Panel>
16_488959-ch10.indd 32516_488959-ch10.indd 325 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Part II: Designing Flex Applications
326
Panel properties
The Panel component shares many properties with the Application container. Just as with
other containers, the method you use to determine layout depends on whether you’re working
with MX or Spark components.
Using the layout property
Like the Application component, Panel supports the layout property. The MX version
of

Panel has a simple layout property that accepts values of absolute, horizontal, and
vertical (the default). The Spark Panel component’s layout property is set to an instance
of a class that extends a class named
LayoutBase. These are the same layout classes used in
the Spark
Application component, and include
l
BasicLayout (the default)
l
VerticalLayout
l
HorizontalLayout
l
TileLayout
The application in Listing 10.8 uses the Spark version of Panel and sets its layout property to
an instance of
TileLayout.
LISTING 10.8
A Spark Panel using the TileLayout class to present objects in a grid
<?xml version=”1.0” encoding=”utf-8”?>
<s:Application xmlns:fx=”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx” >
<s:Panel title=”My Spark Panel”
top=”20” horizontalCenter=”0”>
<s:layout>
<s:TileLayout verticalGap=”10” horizontalGap=”20”/>
</s:layout>
<s:Button label=”Button 1”/>
<s:Button label=”Button 2”/>

<s:Button label=”Button 3”/>
<s:Button label=”Button 4”/>
<s:Button label=”Button 5”/>
<s:Button label=”Button 6”/>
</s:Panel>
</s:Application>
16_488959-ch10.indd 32616_488959-ch10.indd 326 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 10: Using Layout Containers
327
On the Web
The code in Listing 10.8 is available in the Web site files as SparkPanelDemo.mxml in the chapter10
project.
n
Figure 10.11 shows the result: the Panel component’s nested child objects (six Button controls)
are laid out in a grid with two controls per row.
FIGURE 10.11
A Spark Panel using the TileLayout class to lay out objects in a grid
Using the title and status properties
Both the MX and the Spark Panel containers implement a title property that places a label in a
bold font in the left side of the
Panel header. The MX Panel also implements a status prop-
erty that places a label in a normal font aligned to the right side of the header.
Tip
While a Panel looks like a dialog box, it’s typically presented “in-line” with the rest of the application layout,
rather than as a pop-up window. When you present pop-up windows, you typically use the MX
TitleWindow
container or the
Alert class, both of which extend the MX version of the Panel container and share its capa-
bilities but are specifically designed for that use. There is also a Spark version of the

TitleWindow container
designed to be used as the superclass for custom pop-up windows in Flex 4 applications.
n
Cross-Reference
The use of pop-up windows is described in Chapter 17.
n
16_488959-ch10.indd 32716_488959-ch10.indd 327 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Part II: Designing Flex Applications
328
Using the MX ControlBar container
The MX ControlBar container is designed to be nested as the last component within an MX
Panel or a TitleWindow. This container mimics the behavior of the HBox container, laying out
its nested components horizontally, and creates a footer region below the other
Panel container’s
nested objects with a style that matches the title bar.
Listing 10.9 shows an MX
Panel with a ControlBar that lays out its child controls from left
to right.
LISTING 10.9
An MX Panel with a ControlBar
<?xml version=”1.0” encoding=”utf-8”?>
<s:Application xmlns:fx=”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”>
<mx:Panel title=”An MX Panel with a ControlBar”
horizontalCenter=”0” top=”20”
paddingTop=”10” paddingBottom=”10”
paddingRight=”10” paddingLeft=”10”>
<s:VGroup>

<s:Label text=”Text 1”/>
<s:Label text=”Text 2”/>
<s:Label text=”Text 3”/>
</s:VGroup>
<mx:ControlBar>
<s:Button label=”Button 1”/>
<s:Button label=”Button 2”/>
<s:Button label=”Button 3”/>
</mx:ControlBar>
</mx:Panel>
</s:Application>
On the Web
The code in Listing 10.9 is available in the Web site files as ControlBarDemo.mxml in the chapter10
project.
n
Figure 10.12 shows the resulting application. Notice that the Button controls in the
ControlBar are laid out horizontally.
Tip
The MX ControlBar container always lays out its nested components horizontally. If you want to stack
objects in a
ControlBar vertically or place them with absolute positions, declare a VBox or Canvas con-
tainer inside the
ControlBar.
n
16_488959-ch10.indd 32816_488959-ch10.indd 328 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 10: Using Layout Containers
329
FIGURE 10.12
An MX Panel with a ControlBar

To separate controls within a ControlBar so that they “glue” themselves to the far left and right
edges, add a
Spacer control between the controls with a width of 100%:
<mx:ControlBar>
<s:Button label=”Button 1”/>
<mx:Spacer width=”100%”/>
<s:Button label=”Button 2”/>
</mx:ControlBar>
Figure 10.13 shows that the component after the Spacer is pushed to the far right edge of the
ControlBar.
FIGURE 10.13
An MX ControlBar with a Spacer
The invisible Spacer
Using Spark panels with control bars
The Spark Panel component implements a controlBarContent property that lays out objects
horizontally as well. The application in Listing 10.10 uses this property to lay out objects at the
bottom of the panel.
16_488959-ch10.indd 32916_488959-ch10.indd 329 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Part II: Designing Flex Applications
330
LISTING 10.10
A Spark Panel with control bar content
<?xml version=”1.0” encoding=”utf-8”?>
<s:Application xmlns:fx=”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx” >
<s:Panel title=”A Spark Panel with a ControlBar”
horizontalCenter=”0” top=”20”>
<s:layout>

<s:VerticalLayout paddingTop=”10” paddingBottom=”10”
paddingRight=”10” paddingLeft=”10”/>
</s:layout>
<s:Label text=”Text 1”/>
<s:Label text=”Text 2”/>
<s:Label text=”Text 3”/>
<s:controlBarContent>
<s:Button label=”Button 1”/>
<s:Button label=”Button 2”/>
<s:Button label=”Button 3”/>
</s:controlBarContent>
</s:Panel>
</s:Application>
On the Web
The code in Listing 10.10 is available in the Web site files as SparkControlBarDemo.mxml in the
chapter10 project.
n
Using Constraint-Based Layout
Constraint-based layout enables you to place objects on the screen using anchors other than a con-
tainer’s top-left corner. You can implement constraint-based layout easily using Flash Builder’s
Design mode and Properties view or with a code-based approach. And using the new
ConstraintRow and ConstraintColumn classes, you can anchor objects to regions other
than the borders of the container.
Note
Constraint-based layout works only in MX containers that support absolute layout, and Spark components that
use the
BasicLayout class. When used in the MX versions of the Application, Panel, TitleWindow, or
Window containers, the container’s layout property must be set to absolute for constraint properties to
have an effect. Because the
Canvas container always uses absolute layout, constraint properties work within

that container without any other changes to its property values. Constraint-based layout does not work in
VBox,
HBox, ControlBar, or other containers that don’t support absolute layout. Similarly, constraint-based layout
16_488959-ch10.indd 33016_488959-ch10.indd 330 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 10: Using Layout Containers
331
only works in Spark containers that use basic layout (that is, that have their layout property set to an instance
of
BasicLayout). This includes the Spark versions of Application, WindowedApplication, Window,
NavigatorContent, and Group.
n
Positioning components in Design mode
Flash Builder’s Design mode has tools that can create constraint properties through a combination
of selecting options in the Properties view and dragging an object with anchors in the MXML edi-
tor. Figure 10.14 shows the Constraints interface in the Flex Properties view. This interface
appears whenever a component in a container with absolute layout is selected in Design view.
FIGURE 10.14
The Constraints interface in the Flex Properties view
Follow these steps to create a text logo that’s anchored to the application’s bottom-right corner:
1. Create a new MXML application.
2. If the application opens in Source mode, click the Design button.
3. Drag a Button control from the Components view into the application. Place it any-
where on the screen.
4. Set the new Button control’s label property to My Button.
5. In the Constraints interface at the bottom of the Flex Properties view, click in the
check boxes in the right anchor and the bottom anchor, as shown in Figure 10.15.
6. Click in the input controls in the constraint interface, and set the bottom and right
anchors to 10. You should see in the Constraints interface that the number of pixels
from each anchor changes as you drag the

Label control in Design view.
On the Web
The completed version of the preceding exercise is available in the Web site files as UsingConstraints
Complete.mxml
in the chapter10 project.
n
16_488959-ch10.indd 33116_488959-ch10.indd 331 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Part II: Designing Flex Applications
332
FIGURE 10.15
The Constraints interface
Right anchor
Bottom anchor
Using constraint properties
Each visual component supports six constraint properties. Each of the properties is datatyped as a
Number and indicates the number of pixels from the named anchor:
l
left. This property sets the number of pixels from the left edge of the container to the
left edge of the nested component.
l
right. This property sets the number of pixels from the right edge of the container to the
right edge of the nested component.
l
top. This property sets the number of pixels from the top edge of the container to the top
edge of the nested component.
l
bottom. This property sets the number of pixels from the bottom edge of the container to
the bottom edge of the nested component.
l

horizontalCenter. This property sets the number of pixels from the horizontal center
of the container to the horizontal center of the nested component. A positive number off-
sets the component to the right of the container’s horizontal center; a negative number
offsets the component to the left.
l
verticalCenter. This property sets the number of pixels from the vertical center of
the container to the vertical center of the nested component. A positive number offsets the
component below the container’s vertical center; a negative number offsets the component
above the vertical center.
The following code is generated by Design view as the user sets properties in the Constraints inter-
face and drags the component around the screen:
<s:Button label=”My Button” right=”10” bottom=”10”
fontWeight=”bold” fontSize=”18”/>
The right and bottom properties are each set to values of 10 pixels. Each time the user resizes the
application, the
Label control changes its position relative to the application’s bottom-right corner.
16_488959-ch10.indd 33216_488959-ch10.indd 332 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 10: Using Layout Containers
333
Sizing Containers and Controls
Four strategies are available to determine the dimensions of a container or control at runtime:
l
Content. Component dimensions are determined dynamically based on the cumulative
size of the component’s child objects.
l
Absolute. Component dimensions are determined by its width and height properties
set to numeric values interpreted as pixels.
l
Percentage. Component dimensions are determined by percentage of available space.

l
Constraints. Component dimensions are determined by constraint-based anchor
properties.
Content-based sizing
Content-based sizing means that a container or control expands to accommodate its contents. In the
absence of any other sizing properties, this happens automatically. With containers, this means
that the container sizes itself to accommodate and display its nested contents. With controls, this
means that the control sizes itself to display its internal objects. For example, if you don’t set a
Button control’s height or width properties, it sizes itself to display its full label and icon.
Default dimensions
Each container has a default height and width. For example, if you create a Spark Panel
with this code, it has no nested components and no
title property that would affect its
height or width:
<s:Panel>
</s:Panel>
Other containers have different default dimensions. In the absence of nested content, the Group,
VGroup, and HGroup set their height and width to 0.
Minimum and maximum dimensions
You can set properties to constrain content-based sizing. These properties set minimum and maxi-
mum dimensions to place limits on a container’s capability to dynamically grow and shrink:
l
minHeight. The container’s minimum height in pixels.
l
minWidth. The container’s minimum width in pixels.
l
maxHeight. The container’s maximum height in pixels.
l
maxWidth. The container’s maximum width in pixels.
This

Panel container has a minimum width and height of 200 pixels each:
<s:Panel minWidth=”200” minHeight=”200”>
nested components
</s:Panel>
16_488959-ch10.indd 33316_488959-ch10.indd 333 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Part II: Designing Flex Applications
334
The container can still expand if its contents require more space, but it can’t contract to less than
200 pixels in either dimension.
Absolute sizing
Absolute sizing means that you set a component’s width and height properties in absolute pixel
values. This
Panel container is always displayed as 200 pixels high by 200 pixels wide, regardless
of its nested contents:
<s:Panel width=”200” height=”200”>
</s:Panel>
Percentage sizing
Percentage sizing means that you set a dimension as a percentage of available space. When you set a
component’s size in MXML, you can declare percentage sizing with either the
height and width
properties or with
percentHeight and percentWidth.
Percentage sizing with height and width
When you set percentage sizing with the height and width properties, you declare the values
with a percentage expression, such as 50%. This
Label control’s width is 50 percent of the avail-
able space within its container:
<s:Label text=”A sample text control” width=”50%”/>
Percentage sizing with percentHeight and percentWidth

When you set percentage sizing with the percentHeight and percentWidth properties, you
use numeric expressions such as
50. This Label control’s width is also 50 percent of the available
space within its container:
<s:Label text=”A sample text control” percentWidth=”50”/>
Note
You cannot set the height and width properties to new percentage values at runtime with ActionScript
statements. Instead, always use
percentHeight and percentWidth in ActionScript.
n
Note
The percentHeight and percentWidth properties return meaningful values only if you’ve previously set
them through MXML declarations or ActionScript commands. Their values are not recalculated at runtime.
n
Using percentage ratios
When you declare multiple components within a container and set sizes by percentage, you can
declare a total percentage of greater than 100 percent. This VBox contains three
TextInput con-
trols, each with a width property of 100 percent:
16_488959-ch10.indd 33416_488959-ch10.indd 334 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 10: Using Layout Containers
335
<s:HGroup width=”450”>
<s:TextInput width=”100%”/>
<s:TextInput width=”100%”/>
<s:TextInput width=”100%”/>
</s:HGroup>
It might seem that this means the total width of the nested component is 300 percent and would
exceed the available space. Instead, the framework adds up the total percentage values and uses the

ratio of the control’s declared percentage value divided by the total to assign an actual percentage
based on available space:
100% + 100% + 100% = 300% (the total)
For each component: 100% / 300% = 33.33%
Note
If there is a combination of percentage-based and absolute sizing, space is allotted first to the strict values.
Then if the remaining space is not enough to fulfill the percentage-based items, the same ratio division is calcu-
lated and applied.
n
Constraint-based sizing
Constraint properties also can be used to control a component’s size. When a component is nested
in a container with absolute layout and two constraint properties in the vertical or horizontal
dimension are set, the component “stretches” at runtime to keep its edges the correct distance from
the two anchors. Listing 10.11 uses a
Label control with right and left properties that keep
its edges 50 pixels from each of the Application container’s horizontal edges.
LISTING 10.11
Using constraint-based sizing
<?xml version=”1.0” encoding=”utf-8”?>
<s:Application xmlns:fx=”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”>
<s:Label id=”myText”
horizontalCenter=”0” top=”20”
textAlign=”center”
left=”50” right=”50”
height=”100%”>
<s:text>
continued
16_488959-ch10.indd 33516_488959-ch10.indd 335 3/5/10 2:26 PM3/5/10 2:26 PM

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Part II: Designing Flex Applications
336
LISTING 10.11
(continued)
<![CDATA[Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur rhoncus, elit in consectetur euismod, nibh enim lacinia enim,
in hendrerit mi libero eu leo. Etiam ac nisl dapibus est egestas mollis
at condimentum nisi. Integer commodo gravida egestas. Phasellus ac libero
est, in iaculis velit. Curabitur molestie felis at nunc viverra id
egestas risus facilisis. Proin at lobortis est. Curabitur non tortor
neque, egestas feugiat sapien. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nam ut nunc id turpis luctus auctor et tristique dolor.
Morbi volutpat porta tortor, non tempor nisl consequat sed. Pellentesque
aliquam enim ac diam consectetur adipiscing. Donec odio ligula, posuere
quis bibendum quis, sagittis nec nisi. Integer molestie interdum lacus
non aliquet. In consectetur nisl et risus tincidunt accumsan.]]>
</s:text>
</s:Label>
</mx:Application>
On the Web
The code in Listing 10.11 is available in the Web site files as ConstraintSizing.mxml in the chapter10
project.
n
Figure 10.16 shows the resulting display. When the user resizes the application, the Text control
expands and contracts to keep its edges the correct distance from the constraint anchors.
FIGURE 10.16
A control with constraint-based sizing
50-pixel left
constraint

50-pixel right
constraint
16_488959-ch10.indd 33616_488959-ch10.indd 336 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 10: Using Layout Containers
337
Creating a Scrolling Region
With MX containers, if a container was too small to display its nested contents, by default it dis-
played scrollbars that enabled the user to scroll to see the contents. This architecture was easy to
use but added a lot of complexity to the container implementations.
Spark components that have child objects, such as
Group and Panel, follow a different strategy.
They don’t generate their own scrollbars. Instead, you add an instance of a
Scroller object
inside the container whose content you want to scroll. The
Scroller object is wrapped around a
component that contains the child objects you want to scroll. This component, which can be a
Group, HGroup, VGroup, or a custom component, is known as the Scroller object’s viewport.
The application in Listing 10.12 displays a Spark
Panel that wraps its content in a Scroller
and a
VGroup.
LISTING 10.12
An application with a scrolling panel, implemented with the Spark Scroller class
<?xml version=”1.0” encoding=”utf-8”?>
<s:Application xmlns:fx=”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”>
<s:Panel title=”Spark Panel with scrolling”
horizontalCenter=”0” top=”20”

width=”300” height=”200”>
<s:layout>
<s:VerticalLayout paddingTop=”10” paddingBottom=”10”
paddingLeft=”10” paddingRight=”10”/>
</s:layout>
<s:Scroller width=”100%” height=”100%”>
<s:VGroup width=”100%” height=”100%”>
<s:Button label=”Button 1”/>
<s:Button label=”Button 2”/>
<s:Button label=”Button 3”/>
<s:Button label=”Button 4”/>
<s:Button label=”Button 5”/>
<s:Button label=”Button 6”/>
<s:Button label=”Button 7”/>
<s:Button label=”Button 8”/>
<s:Button label=”Button 9”/>
</s:VGroup>
</s:Scroller>
</s:Panel>
</s:Application>
16_488959-ch10.indd 33716_488959-ch10.indd 337 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Part II: Designing Flex Applications
338
On the Web
The code in Listing 10.12 is available in the Web site files as ScrollerDemo.mxml in the chapter10
project.
n
Figure 10.17 shows the completed application, with a scrolling region inside the Panel compo-
nent’s content area.

FIGURE 10.17
A scrolling Panel implemented with the Scroller component
Scrollbar created by
the Scroller component
Caution
The Panel itself can also be treated as a viewport for the Scroller, as in this code:
<s:Scroller>
<s:Panel title=”Spark Panel with scrolling”>
content children
</s:Panel>
</s:Scroller>
The result of this code, however, would be to scroll the entire Panel (rather than just its content).
n
Cross-Reference
You can provide custom skins to the Scroller component to replace its default horizontal and vertical
scrollbar components. For more information on skinning of Spark components, see Chapter 15.
n
16_488959-ch10.indd 33816_488959-ch10.indd 338 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 10: Using Layout Containers
339
Summary
In this chapter, I described the use of layout containers, how to size components, and how to use
constraint-based layout. You learned the following:
l
Layout containers are used to position other visual objects on the screen.
l
The MX layout containers include VBox, HBox, and Canvas.
l
The Spark layout containers include Group, HGroup, and VGroup.

l
The HGroup and VGroup containers place their nested components on the screen
dynamically by calculating their cumulative size.
l
The Group container always uses basic layout to place objects based on x and y proper-
ties or with constraint-based properties.
l
The Spark BorderContainer implements styles and properties that enable simple
visual displays without having to create a custom skin.
l
The Panel container creates a dialog-box presentation and supports the same layout
property as the
Application component.
l
Constraint properties enable you to place and size objects with anchors to any of a
container’s borders or center positions.
l
Containers can be sized based on content, absolute dimensions, percentage dimensions,
or constraints.
l
Spark components that have content child objects can be made scrollable by wrapping the
content children inside a
Group, and the Group inside a Scroller component.
16_488959-ch10.indd 33916_488959-ch10.indd 339 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
16_488959-ch10.indd 34016_488959-ch10.indd 340 3/5/10 2:26 PM3/5/10 2:26 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
341
CHAPTER
Using Cascading

Style Sheets
IN THIS CHAPTER
Understanding style sheets
Using inline style declarations
Using style selectors
Using embedded and external
style sheets
Controlling styles with
ActionScript
Creating compiled style
sheet files
Loading compiled style sheets
at runtime
F
lex applications have a default visual appearance that’s determined by
a combination of graphics that are embedded in the Flex SDK, known
as skins, and various visual settings that are set through Cascading
Style Sheet (CSS) declarations.
About Cascading Style Sheets
Web site developers may already be familiar with the concept of CSS,
because this technology has been increasingly used to control the visual
appearance of Web pages since its introduction in 1996.
The CSS recommendation is created and published by the World Wide Web
Consortium (W3C), the same organization that publishes the recommenda-
tions for Hypertext Markup Language (HTML), EXtensible Markup Language
(XML), and other critical Internet technologies.
Web Resource
Information about the WC3’s CSS recommendation and other CSS resources is
available at
www.w3.org/Style/CSS/.

n
It’s up to the vendors who actually create the Web browsers and other prod-
ucts to implement CSS for their own platforms. Web browsers, for example,
implement various subsets of the W3C recommendation; it’s only in recent
years that the major browsers such as Internet Explorer and Firefox have
approached compatibility in their CSS implementations.
The use of CSS to control visual appearance isn’t limited to Web-based
applications. Flex applications that are installed on the desktop with Adobe
AIR use CSS in exactly the same manner as Flex Web applications.
17_488959-ch11.indd 34117_488959-ch11.indd 341 3/5/10 2:27 PM3/5/10 2:27 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Part II: Designing Flex Applications
342
The Flex SDK supports a concept of themes, which determine the overall appearance of an application.
A theme is a combination of CSS declarations and graphical elements, packaged together as precom-
piled SWC files that can be plugged into a Flex project and its applications.
Themes are defined in Flash Builder 4 on a per-project basis. To change the theme for a Flex project,
choose Project
➪ Properties. Then, in the Properties dialog box, choose Flex Theme. As shown in the
following figure, you can select from one of these prepackaged themes:
l
Spark (the default)
l
Wireframe
l
Halo
l
AeonGraphical
The Halo and AeonGraphical themes represent the older Flex 3 default application appearance. When
you use these themes, the older MX components support all of the traditional styles, including borders,

background colors, and others. When you use the new Spark-based themes (Spark and Wireframe),
only the newer styles are supported.
The Flex theme architecture enables graphic designers to create and distribute prepackaged themes.
The Properties dialog box displays an Import button that enables you to add themes to your Flash
Builder workspace. You can download and purchase themes created by third-party graphic designers
through the Adobe Web site at www.adobe.com/go/getflextheme.
Using Flex Themes
17_488959-ch11.indd 34217_488959-ch11.indd 342 3/5/10 2:27 PM3/5/10 2:27 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 11: Using Cascading Style Sheets
343
The Flex framework implements significant parts of the W3C’s CSS recommendation and adds
features that make the technology particularly effective for implementing Flex application
graphic designs.
In this chapter, I describe how to use CSS in Flex to control an application’s visual appearance. I
start by describing how to declare and control style sheets in a number of ways, including how
to use embedded and external CSS declarations, and how to use a variety of CSS selectors (a way
of describing how styles are applied to various parts of a Flex application). At the end of the
chapter, I describe programmatic approaches to managing styles at runtime, including the use of
the
styleManager object.
On the Web
To use the sample code for this chapter, import the chapter11.fxp Flex project archive from the Web site
files into your Flash Builder workspace.
n
What Is a Style Sheet?
A style sheet consists of rules that constitute a set of visual settings. Any particular style sheet can
consist of three parts:
l
The selector. Determines the scope of a set of rules that are declared in the style sheet. A

single selector can declare multiple styles, each requiring a name and a value.
l
The style name. Determines which style is being set.
l
The style value. Determines the new style setting.
MXML-based declarations of styles and nonstyle properties look the same. The following applica-
tion declares a
width property and a backgroundColor style:
<?xml version=”1.0” encoding=”utf-8”?>
<s:Application xmlns:fx=”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
width=”600” backgroundColor=”#9B30FF”>
<s:Label
text=”This application has a purple background
and is 600 pixels wide”/>
</s:Application>
To know that one is a property and the other a style, you’d have to look it up in the product docu-
mentation. You encounter differences between styles and properties when you set their values in
ActionScript or actual style sheet declarations, or when you read about their use in the product
documentation. Table 11.1 describes some of the differences between styles and properties.
17_488959-ch11.indd 34317_488959-ch11.indd 343 3/5/10 2:27 PM3/5/10 2:27 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Part II: Designing Flex Applications
344
TABLE 11.1
Differences Between Styles and Properties
Styles Properties
Documentation is found in the Styles section for
each component.

Documentation is found in the Properties section for
each component.
Styles can be applied to multiple objects through
embedded or external style sheets.
Properties can apply only to a single object.
When set at runtime with ActionScript, styles always
use the
setStyle() method.
Properties can be set at runtime in ActionScript with
simple dot notation.
Multiple style rules can be compiled into SWF files
and loaded at runtime.
Properties cannot be compiled into separate SWF
files.
You can use these ways, among others, to declare styles in Flex:
l
Inline styles. Declared as attributes in an object’s MXML declaration.
l
Embedded style sheets. Declared within an MXML file in an <fx:Style> tag set.
l
External style sheets. Created as text files with a file extension of .css.
l
Compiled style sheets. Created as SWF files and can be loaded at application runtime.
Regardless of how you declare a style, the name of the style and its value are always the same. For
example, a style of
fontSize is always set as a numeric value indicating the font height in terms
of pixels. This style can be set in inline, embedded, external, or compiled style sheets, and its effect
is always the same.
Note
Unlike the HTML implementation of CSS, Flex applications do not support any unit of measurement other than

pixels. If you try to use unit-of-measurement abbreviations like
pt, em, or px, they are either ignored or result
in a compiler error, depending on the context.
n
Using Inline Style Declarations
When you declare an object in MXML, you can declare any of its styles using XML attributes. The
attribute’s name matches the style’s name, and the style’s value is declared in various ways depend-
ing on its data type.
New Feature
Flex 3 didn’t support the CSS ID selector that enables you to apply a style in an embedded or external style
sheet to a single object by its
id property. As described later in this chapter, Flex 4 applications now have this
capability, so you can now choose between using ID selectors and inline style declarations.
n
17_488959-ch11.indd 34417_488959-ch11.indd 344 3/5/10 2:27 PM3/5/10 2:27 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 11: Using Cascading Style Sheets
345
This Label control declares its color style to a value of red using an inline style declaration and
a hexadecimal color code:
<s:Label text=”Hello World” color=”#FF0000”/>
Caution
Many styles have two versions of their names. For example, the fontSize style name uses syntax that’s some-
times described as camel case, due to the use of uppercase characters in the middle of the name. This style also
can be declared in an embedded or external style sheet with the hyphenated name of
font-size. However,
when setting styles in an inline declaration, you must use the camel-case version of the name, because the
hyphenated version isn’t recognized by the MXML parser.
n
Note

One of XML’s fundamental syntax rules is that the order of attribute declaration isn’t meaningful. In the MXML
language, this means that you can declare property, style, and event listener attributes in any order because
the order doesn’t have any effect on the function or performance of the object you’re declaring.
n
Declaring Style Sheets with <fx:Style>
The <fx:Style> element is used to either declare styles within an MXML document or to link
the application to an external style sheet file.
When you type in the starting
<fx:Style> tag in an MXML editor, Flash Builder auto-completes
the tag and adds namespace declarations for all previously declared namespaces in that file. By
default, this means the
<fx:Style> element declares namespaces for Spark and MX components:
<fx:Style>
@namespace mx “library://ns.adobe.com/flex/mx”;
@namespace s “library://ns.adobe.com/flex/spark”;
add style rules here
</fx:Style>
You then add all style declarations within the <fx:Style> element, after the namespace
declarations.
Alternatively, you can use
<fx:Style> to reference an external style sheet file with the tag’s
source attribute:
<fx:Style source=”mystyles.css”/>
The syntax of the style declarations is the same regardless of whether you’re using an embedded or
an external style sheet. Each style declaration consists of a selector, each of which determines the
scope of a set of style declarations.
17_488959-ch11.indd 34517_488959-ch11.indd 345 3/5/10 2:27 PM3/5/10 2:27 PM
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.