Flex Data Driven Controls - Part 1

The Scenario

Let's take a fictitious but practical scenario. The HR department at Edujini Labs to be given a dashboard to:

• Display employee names
• Dispaly employee details

Other complexities like capabilities to edit the employee details, paginate the listing if the list is long et al can be added later on.

Getting Started...

To get started, let's freeze on the following UI:

• For the employee list, we use a simple ComboBox to get started with. Later we'd explore other options
• For the details, we use DataGrid.

The above UI can be generated using the following application definition (You will need Adobe Flex Builder to design it WSISYG or you can download the Adobe Flex SDK and use the MXML compiler to compile it at command line):

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  height="280" width="600" borderThickness="2" borderStyle="solid"
  backgroundColor="#F0F0F0" cornerRadius="8">

  <mx:Label text="Edujini™ Labs Pvt Ltd" fontSize="14"
      fontFamily="Georgia" fontWeight="bold" fontStyle="normal"
      color="#F5A83B" left="20" top="20"/>

  <mx:Label x="21" y="64" text="Edujini Team" fontFamily="Verdana"
      fontSize="10" fontWeight="bold"/>

  <mx:ComboBox x="21" y="90"></mx:ComboBox>

  <mx:DataGrid x="218" y="92" width="368">
    <mx:columns>
      <mx:DataGridColumn headerText="Employee ID" dataField="employeeID"/>
      <mx:DataGridColumn headerText="Employee Name" dataField="employeeName"/>
      <mx:DataGridColumn headerText="Department" dataField="departmentName"/>
    </mx:columns>
  </mx:DataGrid>

  <mx:Label x="21" y="248" text="© 2008, Edujini™ Labs Pvt Ltd"
      ontFamily="Verdana" fontSize="10" fontWeight="bold"/>

</mx:Application>

Note the definition of the DataGrid. It contains a bunch of DataGridColumn definitions. Each DataGridColumn has been specified a headerText - header of the column, and dataField - the property of the object whose value is to be displayed.

To model our data, let's create a class UserProfile in package, say, com.edujinilabs.eduzine.tutorials.flex.core. It comprises of the Employee ID, Employee Name and the Department Name.

package com.edujinilabs.eduzine.tutorials.flex.core
{
  /**
   * Part of the Eduzine (http://eduzine.edujini-labs.com) Articles.
   * Downloads available at http://downloads.edujini-labs.com
   *
   * (C) 2008, Edujini Labs Pvt Ltd
   * http://www.edujini-labs.com
   */
  public class UserProfile
  {
    private var _employeeID : int;
    private var _employeeName: String;
    private var _departmentName: String;

    public function UserProfile(eid: int = 0,
                           name: String = null, deptName: String = null)
    {
      this._employeeID = eid;
      this._employeeName = name;
      this._departmentName = deptName;
    }

    public function get employeeID(): int
    {
      return _employeeID;
    }

    public function set employeeID(eid: int) : void
    {
      this._employeeID = eid;
    }

    public function get employeeName(): String
    {
      return _employeeName;
    }

    public function set employeeName(name: String) : void
    {
      this._employeeName = name;
    }

    public function get departmentName(): String
    {
      return _departmentName;
    }

    public function set departmentName(name: String) : void
    {
      this._departmentName = name;
    }
  }
}

Notice that the property names have been purposely chosen to match the values of dataField of the DataGridColumn's defined earlier.

Data Model

Employee list would be represented using the variable employees of type mx.collections.ArrayCollection. Ensure that it is Bindable. Finally, let's popupate it with some data, as given below. Add the code directly into the MXML Application created.

  <mx:Script>
    <![CDATA[
      import com.edujinilabs.eduzine.tutorials.flex.core.UserProfile;
      import mx.collections.ArrayCollection;

      [Bindable]
      private var employees: ArrayCollection = new ArrayCollection(
      [
        new UserProfile(11, "Shake Sajan", "Product Dev"),
        new UserProfile(24, "Meera", "Training"),
        new UserProfile(23, "Neelam", "Training"),
        new UserProfile(12, "Hari S Nair", "Product Dev"),
        new UserProfile(13, "Abdul Prodhani", "Product Dev"),
        new UserProfile(21, "Ashish Vaish", "Training"),
        new UserProfile(10, "Gaurav Vaish", "Technology"),
        new UserProfile(32, "Jagadish", "Marketing"),
        new UserProfile(33, "Anshu", "Marketing"),
        new UserProfile(22, "Padma Raviee", "Training"),
        new UserProfile(14, "Rajesh", "Technology"),
        new UserProfile(31, "Yashwanth C", "Management"),
        new UserProfile(34, "Ramesh", "Finance")
      ]);
    ]]>
  </mx:Script>

Data Binding

The next step is to bind the employee list to ComboBox and the DataGrid. Update the definition to as following:

<mx:ComboBox x="21" y="90" dataProvider="{employees}"></mx:ComboBox>
<mx:DataGrid x="230" y="92" width="302" dataProvider="{employees}">

Note the special syntax - the variable employees has been enclosed in the curly-braces {}. This the data-binding syntax. It is a two step process:

1. Declare a variable with the attribute Bindable.
2. In MXML, use it within the curly braces.

After binding, the UI should appear as given below:

ComboBox Configuration

Everything looks fine except for that the ComboBox does not exactly display what we require. It displays the String representation of the UserProfile using the toString() method.

All we need to configure is the labelField of the ComboBox to tell it that it must pickup the text to be displayed to the UI from the corresponding property / field of the individual object of the collection. The default value of labelField is label.

Update the definition of the ComboBox used to as follows:

  <mx:ComboBox x="21" y="90" dataProvider="{employees}"
       labelField="employeeName">
  </mx:ComboBox>

Voila! The UI is exactly as what we want:

Summary

In this article, we learnt to:

1. Use data binding in Adobe Flex.
2. Bind data to the Flex controls ComboBox and DataGrid.
3. Display custom objects in the Flex control ComboBox.
4. Display custom objects in the Flex control DataGrid in multiple columns.