Tutorial: Building custom components with Flex Builder
43
12.
Save the component file in the fbComponents folder by pressing S, double-clicking
the fbComponents folder, and naming the component file as follows:
ProductDetail.mxml
In Design view, the component’s layout should look similar to the following figure if you select
the Panel container:
Note:
The component will scale to fit in the space allotted to it in the flexstore.mxml file.
Add the product details
According to the mock-up, the component should display the following information: a
thumbnail image, the product name and price, and a brief product description.
1.
Make sure the component file, ProductDetail.mxml, is open in Flex Builder.
2.
Insert a placeholder image for the product thumbnail by clicking in the upper left corner of the
Canvas container, clicking the Image button in the Controls category of the Insert bar, and
selecting the following image:
fbComponents/mockups/tnImage.png
In the tutorial on data bindings (see
“Tutorial: Binding components to data with Flex Builder”
on page 58
), you modify the
source
property of the Image so that its value is set dynamically
when the user clicks a product in the catalog.
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...
