How to Connect to Data With Flex4

The following is an excerpt from Getting Started with Flex 4 that shows you how to retrieve data from a database and display it in your DataGrid. This portion shows you how to create a data service that uses Flash Remoting to call methods of a PHP class, a ColdFusion component, or a Java class.

---

Step 1: Create a Flex Data Service

Use the Data menu and the Service Wizard (Connect to Data/Service) to create a service for your application server. For ColdFusion and Java, specify the service file you put on your application server (see Figure 1-9 for a PHP example). For Java, select the “No password required” checkbox, select the employeeService destination, and change the service package to services.employeeservice.

Note: For ColdFusion developers: RDS must be enabled on your server for Flash Builder to create a data service. If you have RDS configured to use a password, you will get an Authentication Required dialog box where you must enter the password or the username and password. For Java developers: The testdrive application was configured to use RDS with no password. You are changing your generated service package so it matches that used in the solution files, which you can use with PHP, ColdFusion, or J2EE servers.




Flash Builder introspects the server-side class file and creates a corresponding client-side class with the same operations. You can see your new data service in the Data/Services view (Figure 1-10).

Note: For PHP developers: Flash Builder uses the Zend Framework to introspect the service. If this is your first time importing a PHP service, Flash Builder asks you to install the Zend Framework. For ColdFusion and Java developers: Some of the symbols and data types you see will be different from those shown in Figure 1-10.




Step 2: Connect the getEmployees() Service Operation to the DataGrid

Either drag the operation from the Data/Services view onto the DataGrid or select Bind to Data from the Data menu. Configure the return type by autodetecting it from sample data and have it create an array of Employee objects, as shown in Figure 1-11.




Note: For Java developers: An array of Employee objects will already be specified as an existing data type. For PHP and ColdFusion developers: Before Flash Builder can bind the results of the operation to a component, you must specify the action to be taken with the data returned from the operation. You are telling it to create an array of Employee objects, so Flash Builder creates an Employee ActionScript class file with matching properties and uses that. You can also write your PHP classes and ColdFusion component methods to return strongly typed objects instead of general objects.

The DataGrid component has also been updated so that it now has a column for each of the properties contained in the return data objects, as shown in Figure 1-12.




The columns property of the DataGrid object is set equal to an array of DataGridColumn objects where each DataGridColumnObject has properties to specify what data it should display, how big it should be, what its header text should be, and more. The columns will be displayed in the order in which they are defined:

<mx:columns>
    <mx:DataGridColumn headerText="office"
        dataField="office"/>
    <mx:DataGridColumn headerText="departmentid" 
        dataField="departmentid"/>
  ...

Step 3: Look at the Generated Code in Your MXML File

The DataGrid object has a new creationComplete attribute, which specifies that when the creationComplete event occurs, the empDg_creationCompleteHandler() function is called and the event object is passed to it. The DataGrid creationComplete event is broadcast after the DataGrid has been created and all of its properties are set, including its size and position. The event object passed to the function is an instance of the Event class (in this case a FlexEvent) and has properties containing information about the event that occurred:

<mx:DataGrid x="36" y="114"
id="empDg" 
creationComplete="empDg_creationCompleteHandler(event)"
dataProvider="{getEmployeesResult.lastResult}">

An instance of your EmployeeService data service is created inside the Declarations block. You place tags for all nonvisual objects inside the Declaration tag set. The green color of the tag indicates it is a compiler tag associated with compiler instructions and not an instance of a class:

<employeeservice:EmployeeService
id="employeeService" 
fault="alert.show(event.fault.faultString + '\n' +
event.fault.faultDetail)" showBusyCursor="true"/>

The empDg_creationCompleteHandler() function inside the Script block calls the getEmployees() method of this data service. You place all ActionScript code (which can only include property and method declarations) inside the Script compiler tag:

protected function
empDg_creationCompleteHandler(event:FlexEvent):void
{
 getEmployeesResult.token = employeeService.getEmployees();
}

When this code is executed, Flash Player makes a call to the server. This happens asynchronously in the background; the user can still interact with the application.

When you make a service call, you need to specify what Flash Player should do when it gets a result or error back from the server. You specified a fault handler for the data service itself, and it will display errors returned from calls to any of its operations in a pop-up box, an instance of the alert component:

<employeeservice:EmployeeService
  id="employeeService" 
  fault="alert.show(event.fault.faultString
  + '\n' + event.fault.faultDetail)"
  showBusyCursor="true"/>

A CallResponder object handles successful results:

<s:CallResponder id="getEmployeesResult"/>

This object has a lastResult property, which is automatically populated with the data when it is returned to Flash Player from the server. Now you need to associate it with the service call.

When a service call is initiated, an instance of the AsyncToken class is created. To associate the CallResponder object with the service call, set the CallResponder’s token property equal to AsyncToken generated at the time the service call is made. Now when data is returned from the server, the CallResponder object handles it. In addition to getting its lastResult property set, CallResponder also has result and fault events for which you can set handlers:

getEmployeesResult.token = employeeService.getEmployees();

Finally, the dataProvider property of the DataGrid is bound to the lastResult property of the CallResponder object. This means that whenever the value of getEmployeesResult.lastResult changes at runtime, the DataGrid’s dataProvider property is updated and the DataGrid will repopulate itself with the new data:

<mx:DataGrid x="36" y="114" id="empDg"
  creationComplete="empDg_creationCompleteHandler(event)"
  dataProvider="{getEmployeesResult.lastResult}">

Step 4: Configure DataGrid Columns and Run the Application

Select the DataGrid component in Design mode, click the Configure Columns button in the Properties view, and use the wizard (shown in Figure 1-13) to get the DataGrid to appear as shown in Figure 1-14.







When you run the application, you should now see data from the database displayed in the DataGrid. Be sure to sort the data and resize and reorder the columns. You can change the width of an individual column using the Configure Columns button.

When you finish this exercise, your code should look like the following:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  minWidth="955" minHeight="600"
  xmlns:employeeservice="services.employeeservice.*">
  <fx:Script>
    <![CDATA[
      import mx.controls.alert;
      import mx.events.FlexEvent;

      protected function 
        empDg_creationCompleteHandler(event:FlexEvent):void
      {
        getEmployeesResult.token = 
          employeeService.getEmployees();
      }
    ]]>
  </fx:Script>
  <fx:Declarations>
    <s:CallResponder id="getEmployeesResult" />
    <employeeservice:EmployeeService id="employeeService"
      fault="alert.show(event.fault.faultString + '\n' +
      event.fault.faultDetail)"
      showBusyCursor="true"/>
  </fx:Declarations>

  <s:Label x="36" y="36" text="XYZ Corporation Directory" 
    color="maroon" fontSize="20" fontWeight="bold"/>
  <s:Button x="36" y="85" label="Employees" id="empBtn"/>
  <s:Button x="124" y="85" label="Departments" 
    id="deptBtn"/>
  <mx:DataGrid x="36" y="114" id="empDg"
    creationComplete="empDg_creationCompleteHandler(event)"
    dataProvider="{getEmployeesResult.lastResult}" 
    width="650">
     <mx:columns>
        <mx:DataGridColumn headerText="Last Name" 
          dataField="lastname"/>
        <mx:DataGridColumn headerText="First Name" 
          dataField="firstname"/>
        <mx:DataGridColumn headerText="Title"
          dataField="title" width="170"/>
        <mx:DataGridColumn headerText="Cell Phone" 
          dataField="cellphone"/>
        <mx:DataGridColumn headerText="Email" 
          dataField="email" width="130"/>
     </mx:columns>
  </mx:DataGrid>
</s:Application>

This application contains a single page that displays a list of employees. In the next section, you will create additional “pages” to view employee details and a list of departments.