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.
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...
