- Introducing Simple Controls
- Displaying Images
- Building a Detail View
- Using Data Binding to Link a Data Structure to a Simple Control
- Using a Form Layout Container to Lay Out Simple Controls
- What You Have Learned
Using Data Binding to Link a Data Structure to a Simple Control
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 control reflects the changes. For example, suppose you create a text control that displays the latest sports scores; also suppose it is connected to a data structure in Flex. When a score changes in that data structure, the control that the end user views reflects the change. In this exercise, you will connect a basic data structure in an <fx:Model> tag to simple UI controls to display the name, image, and price for 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 connect these data structures with server-side data.
- Be sure that FlexGrocer.mxml is open, and add an <fx:Model> tag after the comment in the <fx:Declarations> tag pair at the top of the page.
The <fx:Model> tag allows you to build a client-side data model. This tag converts an XML data structure into a format that Flex can use.
- Directly below the opening <fx:Model> tag and before the closing <fx:Model> tag, add the following XML data structure. Your <fx:Model> tag should look as shown:
<fx: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> </fx:Model>
You have defined a very simple data structure inline inside an <fx:Model> tag.
- Assign the <fx:Model> tag an ID of groceryInventory. The first line of your <fx:Model> tag should look as shown:
<fx:Model id="groceryInventory">
By assigning an ID to the <fx:Model> tag, you can reference the data with dot syntax. For example, to access the list price of the item, you could use groceryInventory.listPrice. In this case, that would resolve to 1.99.
- Switch Flash Builder to Design view.
You can set up bindings between elements just as easily in Design view as you can in Source view.
- Select the RichText control in the expanded state and be sure that the Flex Properties view is open. Modify the text property to {groceryInventory.description}.
Data binding is indicated by the curly brackets {}. Whenever the curly brackets are used, you use ActionScript instead of simple strings. Effective use of data binding will become increasingly important as you begin to work with server-side data.
- Save and run the application.
You should see the description you entered in the data model when you roll the cursor over the grocery item.