Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development

  • Print
  • + Share This
This chapter is from the book Using Data Binding to Link a Data Structure to a Simple Control

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.

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

  3. 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:
  4. <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.

  5. Assign the <fx:Model> tag an ID of groceryInventory. The first line of your <fx:Model> tag should look as shown:
  6. <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.

  7. Switch Flash Builder to Design view.
  8. You can set up bindings between elements just as easily in Design view as you can in Source view.

  9. 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}.
  10. 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.

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

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.

  • Create a new MXML application in your current project by choosing File > New > MXML Application. Name the application Checkout, and choose spark.layouts.BasicLayout as the Layout for the new application. Then click Finish.
  • Switch to Design view, and drag a Form from the Layout folder of the Components view to the top left of the window. A dialog box will appear asking for the Width and Height of the form. Leave the default values as they are.
  • Drag a FormHeading component from the Layout folder in the Components view into the newly created form. Double-click the FormHeading, and change it to Customer Information.
  • 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.)

  • Drag a TextInput control from the Controls folder of the Components view and drop it just below the FormHeading. The TextInput and a label to the right of the TextInput both appear. Double-click the label, and change it to Customer Name.
  • 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.

  • Drag four more TextInputs to the form from the Components view. Change the labels of these to Address, City, State, and Zip. Drag a DateField below all the TextInputs, and change its label to Delivery Date. Drag a button below the DateField, and set its label to be an empty string (simply remove the default text). Double-click the button and change the button’s text to Continue.
  • Figure xx-xx

    Figure 20

    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.

  • Save and run the application.
    • + Share This
    • 🔖 Save To Your Account