Using binding for moving related data -- Flex 2.01

Many applications require a messaging strategy for moving related data between objects. You can use binding with messaging objects, whose sole purpose is to move related data around an application.

For example, suppose you are building a library card catalog system, and you want to let users search a library database. The first thing you do is to provide the users with a search form. At the same time, you create a simple Query object in an ActionScript class. The Query object has fields for author, title, and subject. Because the Query object holds only typed data, it does not need a lot of additional functionality.

The user is going to create only one query at a time, so you declare the Query object as a custom ActionScript component inside an MXML component. You then bind the search form elements into the properties of the Query object, as the following example shows:

<?xml version="1.0"?>
<!-- QueryForm.mxml -->

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:library="*">
    <library:Query id="myQuery">
        <library:author>{authorInput.text}</library:author>
        <library:title>{titleInput.text}</library:title>
        <library:subject>{subjectInput.text}</library:subject>
    </library:Query>

    <mx:Form>
        <mx:FormItem label="Author">
            <mx:TextInput id="authorInput"/>
        </mx:FormItem>
  ...
    </mx:Form>
        <mx:Button label="Submit Query" click="queryBizDelegate.sendQuery(myQuery)"/>
</mx:VBox>

You could also include validators and any other user interface logic that you require in this form. The main idea is that instead of having to know the parameters of the sendQuery() method, you can pass a Query object, which is filled in by using binding, to the form.

Going in the other direction, suppose the library query service returns a result that contains a collection of books. Some separate logic can navigate to the results page, and that page might have a DataGrid control to display all the books that are returned. The service can simply drop off the books at a known location. It does not need to know that there is a view that cares about the result. The following example shows the service result listener:

public function queryResult(event):void {
  queryBizDelegate.acceptResult(event.result);
}

The queryBizDelegate.acceptResult() method stores the result in a well-known location, such as a queryResults property. You can bind the queryResults property to a DataGrid control's dataProvider property so that the view automatically updates whenever new results arrive, as the following example shows:

<mx:DataGrid dataProvider="{queryBizDelegate.queryResults}"/>