44
Chapter 2: Flex Builder Tutorials
3.
With the Image still selected in the file, change the following properties in the Attributes panel:
■
Size > height
:
140
■
Size > width
:
150
■
Size > x
:
0
■
Size > y
:
0
4.
Insert a Label component for the product name by clicking anywhere inside the VBox
container, clicking the Label button on the Insert bar, and specifying the following properties
in the Attributes panel:
■
Common > text
:
Product Name
■
Common > styleName
:
title
In the tutorial on data bindings, you modify the
text
property so that its value is set
dynamically when the user clicks a product in the catalog.
The title style is defined in the flexstore.css file attached to the flexstore.mxml file (see
“Import
your CSS styles” on page 29
). Your custom component will have access to this style sheet when
the component is used in the flexstore.mxml file.
5.
Insert another Label component for the product price by switching to Code view (View >
Code), clicking immediately after the existing
<mx:Label>
tag and clicking the Label button on
the Insert bar.
Flex Builder inserts a
<mx:Label>
tag.
6.
Click anywhere in the new
<mx:Label>
tag, click the Refresh button on the Attributes panel to
display the tag properties, and specify the following properties:
■
Common > text
:
$129.98
■
Common > styleName
:
price
7.
Switch back to Design view and insert a Text component to display the product description by
clicking inside the Panel container outside and below the HBox container, clicking the Text
button on the Insert bar (not to be confused with the Label button), and specifying the
following properties in the Attributes panel:
■
Common > htmlText
:
product copy
■
Size > height
:
100%
■
Size > width
:
100%
8.
Save your work.
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...