Flex Article

Working with Data Binding in Flex

Note: The book excerpt linked to below is from Chapter 18 of Developing Rich Clients with Macromedia Flex by Alistair McLeod and Steven Webster, published by Macromedia Press.

The introduction of Rich Internet Applications (RIAs) has meant the moving of processing—once done on an application server—to the user’s desktop. With that processing, data has also moved over the wire to be processed on client machines before being sent back for storage on the enterprise data stores.

Data binding is an ideal candidate solution for the updating of a user interface from a client-side model, and vice versa. This transfer of data between client-side layers, such as between the client-side model and the view (user interface controls) and vice versa, is something developers might have traditionally implemented by using simple but repetitive manual coding techniques. Thankfully, Flex gives you a powerful feature to aid in this process: data binding. Data binding is the process of tying the data in one object (the source) to another object (the destination).

When the source object is changed, those changes are automatically reflected in the destination object. In this chapter, you’ll learn about the following:

• What Is Data Binding?
• Data Binding Usages
• Data Binding Restrictions
• Creating a Loan Calculator Application with Data Binding

Common Uses for Data Binding

Data binding can be used wherever you want one object to reflect the changes in another. Some common usages include

• User interface controls bound to a web service or remote object request call.
• Web service or remote object results bound to user interface controls.
• User interface controls bound directly to a data model, whether it’s an <mx:Model>, <mx:Object>, or an ActionScript 2.0 class. That model can then be bound to a web service or remote object request.
• Web service or remote object results bound to a data model, bound in turn to user interface controls.
• A master-detail scenario in which selecting an item from a list populates another part of the user interface with the details of that item.

Learn about this and more by downloading and reading the chapter excerpt.

Errata

Below is important errata that the authors have provided for Chapter 18 of the published book.

The authors would like to acknowledge Dan Harfleet for compiling the errata for this chapter. For further information on migration issues between Flex 1.0 and Flex 1.5, the authors suggest reading "Migrating Flex Applications" in the Flex documentation.

• widthFlex and heightFlex attributes (pages 396, 397, 398, 399, 400, 408, 409, 411, 412, and 413) – Setting percentage width and height values: Width and height values can now be set as a percentage, the value being the percentage of the parent container that the component should span. (See "Migrating Flex Applications" in the Flex documentation.)
• slider control (pages 397, 398, and 400) – The slider control is now a standard component within the Flex component library. If you have a slider.swc file, remove it. See Flex LiveDocs for information on <mx:VSlider/> and <mx:HSlider/> (Vertical and Horizontal slider controls).
• width and height should be explicit in the TextArea control (pages 399, 400, 408, 410, 411, 412, and 413) – Parent container sizing rules have changed. Parent containers do not expand to fill their parent automatically; they only expand enough to take up the space needed by its child, therefore you must explicitly set width and height percentages.
• control bar no longer supports scrolling (pages 399, 400, 411, 412 and 413) – The control bar container no longer supports scroll bars. In Flex 1.0, control bars would scroll content which did not fit; in Flex 1.5, the content is clipped.
• label function on the DataGrid control ( see note 5 ) (pages 410, 412, and 413) – The label function for DataGrid control has changed. In Flex 1.0, the labelFunction attribute of DataGridColumn only took one argument, which was the data to be formatted/operated on; now the function takes two arguments, the data and the datagrid column name. This allows the same function to alter its behavior if necessary dependent on the column.

• The example on page 411 to 413 should have the label function changed to:

  function formatBalance( item, columnName )
  {
  .......

Requirements

To complete this tutorial you will need to install the following software:

Flex 1.5

• Try
• Buy

Download the complete chapter:

• Chapter 18: Working with Data Binding (PDF, 227K)

Buy the book:

• Developing Rich Clients with Macromedia Flex

Steven Webster and Alistair McLeod, Developing Rich Clients with Macromedia Flex, © 2005 iteration::two. Reproduced by permission of Pearson Education, Inc. publishing as Peachpit Press. All Rights Reserved.

About the author