32
Chapter 2: Flex Builder Tutorials
8.
With the ViewStack container still selected, set the following property in the Attributes panel:
■
Effects > changeEffect
:
Fade
■
Size > height
:
100%
■
Size > width
:
100%
You can select the Fade value from the pop-up menu. The Fade effect will make the ViewStack
container change from transparent to opaque in 500 milliseconds (the default effect duration).
9.
Save your work.
Position the product detail and shopping cart components
In this part of the tutorial, you position the product detail and shopping cart components on the
right side of the user interface as shown in the mock-ups (see
“Review the approved user interface
mock-ups” on page 27
). You decide to use the existing HBox container to meet this layout
requirement.
The mock-up also shows the product detail and shopping cart components stacked on top of each
other. To meet this layout requirement, you decide to use a VBox container.
1.
In Design view, click inside the HBox container to the right of the Panel container.
Be careful not to click inside the Panel container; the vertical insertion bar should appear
beside the Panel container.
2.
In the Containers category of the Insert bar, click the VBox button.
Flex Builder inserts a VBox container in the file. You want to use the VBox container to stack
the product detail and shopping cart components on top of each other.
3.
With the insertion point still blinking in the VBox container, set the following properties in the
Attributes panel:
■
Size > width:
100%
You want the VBox container to scale based on its content.
4.
Click anywhere in the new VBox container, click the Canvas button in the Containers category
of the Insert bar, and accept the default width and height values in the dialog box that appears.
Flex Builder inserts a Canvas container in the VBox. You want to insert the product detail
component in this container.
5.
With the Canvas container still selected, set the following properties in the Attributes panel:
■
Common > id
:
topCanvas
■
Size > height
:
326
■
Size > width
:
100%
■
Other > vScrollPolicy
:
off
Tip:
If you prefer, you can list all the properties alphabetically by clicking the Show List View button
on the Attributes panel.
Summary of Contents for FLEX BUILDER-USING FLEX BUILDER
Page 1: ...Using Flex Builder...
Page 116: ...116 Chapter 4 Building a Flex User Interface Visually...
Page 144: ...144 Chapter 6 Working with Data...
Page 154: ...154 Appendix A Basic Flex Concepts...