Macromedia flex builder-using flex builder User Manual

68

Chapter 2:  Flex Builder Tutorials

Display the product detail

After detecting and retrieving the product selection, you can retrieve the product’s data and use it 
in the ProductDetail component.

1.

Open the ProductDetail.mxml file located in the fbBindings folder.

2.

In Code view, enter the following code after the opening 

<mx:Panel>

 tag to declare an object 

variable called dataObject:

<mx:Script>

var dataObject:Object;

</mx:Script>

The variable declaration creates a property of the ProductDetail component. You want to use 
this property in the 

<local:ProductDetail>

 tag in the flexstore.mxml file to pass the product 

data to your custom component.

3.

In Code view, enter the following code after the 

<mx:Script>

 block you just entered:

<mx:Model id="dataModel">

<name>{dataObject.name}</name>
<price>{dataObject.price}</price>
<description>{dataObject.description}</description>
<image>{dataObject.image}</image>

</mx:Model>

You want to store the data passed to the ProductDetail component in this data model. 

4.

Switch to the Design view and click the Refresh button on the Data panel.

The new model appears in the panel.

The next step is to bind the elements of the data model to the display controls.

5.

Select the Label control for the product name and clear the value of the 

text

 property in the 

Attributes panel.

The literal string “Product Name” served as a placeholder until now.

Note: If you’re working in Standard mode, the Label control disappears after you clear the value. 
Click the Expanded button on the Document toolbar to display the control again.

6.

Bind the Label control to the data model by switching to the Bindings panel and clicking the 
Plus (+) button to start a new binding. 

The Add Binding dialog box appears.