MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual page 68

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.
Open the ProductDetail.mxml file located in the fbBindings folder.
1.
In Code view, enter the following code after the opening
2.
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
data to your custom component.
In Code view, enter the following code after the
3.
<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.
Switch to the Design view and click the Refresh button on the Data panel.
4.
The new model appears in the panel.
The next step is to bind the elements of the data model to the display controls.
Select the Label control for the product name and clear the value of the
5.
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.
Bind the Label control to the data model by switching to the Bindings panel and clicking the
6.
Plus (+) button to start a new binding.
The Add Binding dialog box appears.
68 Chapter 2: Flex Builder Tutorials
<local:ProductDetail>
<mx:Panel>
tag in the flexstore.mxml file to pass the product
block you just entered:
<mx:Script>
tag to declare an object
property in the
text