34
Chapter 2: Flex Builder Tutorials
5.
With the insertion point still blinking in the HBox container, set the value for the following
property in the Attributes panel:
■
Styles > horizontalGap
:
0
6.
Insert the thumbnail view button by clicking inside the HBox container, clicking the Image
button in the Controls category of the Insert bar, and selecting the following image file:
/fbLayout/assets/images/thumb_off.png
7.
Insert the grid view button by clicking inside the HBox container on the right side of the
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
8.
Save your work
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 21
.
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
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...
