MACROMEDIA FLEX-FLEX BUILDER, Tutorial, Page: 39 / 56

Tutorial: Binding components to data with Flex Builder 39
Tutorial: Binding components to data with Flex Builder
This tutorial shows you how to use Flex Builder to visually bind Flex components to data. It also
explains how to use the Network Monitor to monitor the data passed between your application
and the Flex server.
In a real-world situation, the Flex Store application would connect to a backend system to retrieve
and display information about the products. The backend system in this tutorial is simulated with
a sample web service installed with the Flex server.
You can complete this tutorial as a stand-alone unit or as the third 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 1 .
The tutorial includes a pre-built set of files so you can complete the tutorial without completing
the layout or components tutorials first. If you completed the components tutorial, you can
overwrite the files in the fbBindings folder with your files in the fbComponents folder.
Tip: This tutorial requires that you type a lot of code. If you’re working with a printed copy of the
tutorial, you may want to paste the code from an electronic version of the tutorial in Using Flex Builder
Help.
In this tutorial, you will accomplish the following tasks:
•
“Bind the view components” on page 39
•
“Bind the product detail component” on page 46
•
“Bind the shopping cart component” on page 51
Bind the view components
The product catalog in the Flex Store layout consists of two custom components, GridView.mxml
and ThumbnailView.mxml, which provide different views of the catalog. Your job is to bind the
two custom components to product data.
In this part of the tutorial, you complete the following tasks:
•
“Specify the web service to use” on page 40
•
“Bind the web service to a data model” on page 41
•
“Send the web service request” on page 42
•
“Bind the GridView component to the data” on page 44
•
“Bind the ThumbnailView component to the data” on page 45