- 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
This chapter is from the book
This chapter is from the book
This chapter is from the book
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 <mx: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.
- 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:
- Assign the <fx:Model> tag an ID of groceryInventory. The first line of your <fx:Model> tag should look as shown:
- Switch Flash Builder to Design 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}.
- Save and run the application.
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.
<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.
<fx:Model id=”groceryInventory”>
By assigning an ID to the <mx:Model> tag, you can reference the data with dot syntax. For example, to access the list price of the item, you could simply use groceryInventory.listPrice. In this case, that would resolve to 1.99.
You can set up bindings between elements just as easily in Design view as you can in Source view.
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.
)
You should see the description you entered in the data model when you roll the cursor over the grocery item.
Using a Form Layout Container to Lay Out Simple Controls
Forms are important in most applications that collect information from users. You will be using the Form container to enable the shopper to check out their products from the grocery store. The Form container in Flex will handle the layout of the controls in this form, automating much of the routine work. With a Form container, you can designate fields as required or optional, handle error messages, and perform data checking and validation to be sure the administrator follows designated guidelines. A Form container uses three tags: an <mx:Form> tag, an <mx:FormHeading> tag, and an <mx:FormItem> tag for each item on the form. To start, the checkout form will be built into a separate application, but later in the book, it will be moved into the main application as a custom component.
A FormHeading is a specialized label. Its left edge always aligns with the left side of the form controls (not the labels of the form items.)
When adding controls to a form in Design view, Flash Builder automatically surrounds the control in a FormItem, which is why a label is appearing to the left of the control. If you switch to Source view, you can see the FormItem surrounding the TextInput. Back in Design view, notice how the left edge of the text input is aligned with the left edge of the FormHeading. As noted earlier, this is a feature of the Form and FormHeading classes, and it allows these items to always maintain the left alignment, regardless of the size of the FormItem labels.
)
Each control is surrounded in its own FormItem and has its own label. Since you don’t need a label next to the Continue button, you simply clear the text from the label on that form item.