Tutorial: Building Custom Components With Flex Builder - MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual

With the insertion point still blinking in the HBox container, set the value for the following
5.
property in the Attributes panel:
Styles > horizontalGap
Insert the thumbnail view button by clicking inside the HBox container, clicking the Image
6.
button in the Controls category of the Insert bar, and selecting the following image file:
/fbLayout/assets/images/thumb_off.png
Insert the grid view button by clicking inside the HBox container on the right side of the
7.
thumbnail view button (without selecting the button), clicking the Image button on the Insert
bar, and selecting the following image file:
/fbLayout/assets/images/list_off.png
Save your work
8.
This completes the layout tutorial. If you like, you can continue building the Flex Store by
completing the components tutorial, which shows you how to build custom components and
insert them in your layout.

Tutorial: Building custom components with Flex Builder

In this tutorial, you learn how to use Flex Builder to create custom components, the building
blocks of Flex applications. The Flex Store application requires the following custom
components:
•
Two catalog components that give the user different views of the product catalog
•
A product detail component that gives the user more detail on a product the user clicks in
the catalog
•
A shopping cart component that lists the products the user wants to purchase
You can complete this tutorial as a stand-alone unit or as the second part of a multipart tutorial.
In either case, you must complete the setup tutorial before you begin. For instructions, see
"Tutorial: Setting up a development environment" on page
The tutorial includes a pre-built set of files so you can complete the tutorial without completing
the layout tutorial first. If you completed the layout tutorial, you can overwrite the files in the
fbComponents folder with your files in the fbLayout folder.
In this tutorial, you will accomplish the following tasks:
•
"Build the grid view component" on page 35
•
"Build the thumbnail view component" on page 38
•
"Build the product detail component" on page 40
•
"Build the shopping cart component" on page 47
•
"Insert the view components in the Flex Store layout" on page 51
•
"Insert the detail and cart components in the layout" on page 53
•
"Activate the catalog view buttons" on page 54
34 Chapter 2: Flex Builder Tutorials
: 0
21.