| Data binding enables you to connect controls, such as the text controls that you have already worked with, to an underlying data structure. Data binding is incredibly powerful because if the underlying data changes, the changes will be reflected in the control. For example, suppose that you created a text control that displayed the latest sports scores and was connected to a data structure in Flex. When a score changed in that data structure, the changes would also be reflected in the control that the end user views. In this task, you will connect a basic data structure in an <mx:Model> tag to simple UI controls to display the name, image, and price associated with each grocery item. Later in the book, you will learn more about data models, the effective use of a model-view-controller architecture on the client, and how to actually connect these data structures with server-side data. | | 1. | Be sure that EComm.mxml is open and add an <mx:Model> tag directly below the <mx:Application> tag at the top of the page.
The <mx:Model> tag allows you to build a client-side data model. This tag will convert an XML data structure into a format Flex can use.
| 2. | Directly below the opening <mx:Model> tag, and before the closing <mx:Model> tag, add the following XML data structure. Your <mx:Model> tag should look as shown:
<mx:Model> <groceries> <catName>Dairy</catName> <prodName>Milk</prodName> <imageName>assets/dairy_milk.jpg</imageName> <cost>1.20</cost> <listPrice>1.99</listPrice> <isOrganic>true</isOrganic> <isLowFat>true</isLowFat> <description>Direct from California where cows are happiest!</description> </groceries> </mx:Model>
You have defined a very simple data structure inline inside of an <mx:Model> tag.
| 3. | Assign the <mx:Model> tag an id of groceryInventory. The first line of your <mx:Model> tag should look as shown:
<mx:Model >
By assigning an id to the <mx:Model> tag, you can reference the data using dot syntax. For example, to access the list price of the item, you could simply say grocery Inventory.listPrice. In this case, that would resolve to 1.99.
| 4. | Switch Flex Builder to Design mode.
In Design mode, you can easily set up the bindings between the data structure and the controls. You could also set up the bindings in Source mode.
| | | 5. | Select the Text control in the expanded state and be sure that the Flex Properties view is open. Modify the text property to {groceryInventory.description}.
The data binding is indicated by the curly brackets {}. Whenever the curly brackets are used, you use ActionScript instead of simple strings. Data binding is extremely powerful because the UI control will be updated if the data structure changes, which will become increasingly important as you begin to work with server-side data.
| 6. | Save and run the application.
You should see that the description that you entered in the data model appears when you roll over the grocery item.
|
|
