Tutorial: Binding Components To Data With Flex Builder - MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual

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
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 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 58
•
"Bind the product detail component" on page 65
•
"Bind the shopping cart component" on page 70
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 59
•
"Bind the web service to a data model" on page 60
•
"Send the web service request" on page 61
•
"Bind the GridView component to the data" on page 63
•
"Bind the ThumbnailView component to the data" on page 65
58 Chapter 2: Flex Builder Tutorials
21.
"Tutorial: