In previous articles I've written about the power of integrating Flash and ColdFusion to build Rich Internet Applications (RIAs). In this paradigm Flash provides the user interface while ColdFusion is responsible for handling the business logic and sending data to Flash either through Flash Remoting or Web Service calls. In this article I'd like to shift focus a bit and provide a more programmatic approach to building RIAs. By this I mean using XML to create the Flash interface. The answer lies in Macromedia's Flex.

This article will walk you through a simple application that retrieves employee records from a database so the user can update them. This is by no means a new concept, but I'd like to try a different approach. Forget about HTML, or even Flash forms for that matter, and see what Flex has to offer. If you've done any ColdFusion component development then I want to challenge you to experiment with Flex as your presentation tier. We'll dig into this concept in greater detail but let's first configure the application.

Walking Through the Example Application
You can download the source code for the example application at www.db75.com/dev/mxdj/mxdj_0605.zip. Please refer to the Readme.txt file included in the zip archive. This file has all the information necessary to get the example application up and running.

Once you've deployed the files to their proper locations and updated flex-config.xml, you should be able to access EmployeeForm.mxml through its fully qualified name, i.e., http://localhost:8080/flex/EmployeeForm.mxml. Once Flex compiles this file you should see something similar to Figure 1.

Let's open EmployeeForm.mxml so we can walk through the code and get a general understanding of what's going on. You can review the mxml code in the following code.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
creationComplete="getEmployeeList();">

<mx:Script>
<![CDATA[

var selectedEmployeeID:Number;
var selectedIndex:Number;

// Gets the list of employees and is bound to the combo box
function getEmployeeList():Void
{
employeeWS.getEmployeeList.send();
}

// Get the employee when the selection is made in the datagrid
function getEmployee(event):Void
{
selectedEmployeeID = event.target.selectedItem.EMP_ID;
selectedIndex = event.target.selectedIndex;
employeeWS.getEmployee(selectedEmployeeID).send();
}

// Update the employee info
function updateEmployee():Void
{
var employeeObj:Object = new Object();
employeeObj.first_name = first_name.text;
employeeObj.last_name = last_name.text;
employeeObj.email = email.text;
employeeObj.id = selectedEmployeeID;
employeeWS.updateEmployee(employeeObj).send();
employeeDG.replaceItemAt(selectedIndex,
{FIRSTNAME:employeeObj.first_name,
LASTNAME: employeeObj.last_name});
}
]]>
</mx:Script>

<mx:WebService
serviceName="EmployeeService"
id="employeeWS"
showBusyCursor="true"
fault="mx.controls.Alert.show('Error Loading Data');" />

<mx:Panel title="Employee Form">

<mx:DataGrid dataProvider="{employeeWS.getEmployeeList.result}" id="employeeDG"
width="100%" change="getEmployee(event);">
<mx:columns>
<mx:Array>
<mx:DataGridColumn columnName="EMP_ID" width="0" />
<mx:DataGridColumn columnName="FIRSTNAME" headerText="First Name" />
<mx:DataGridColumn columnName="LASTNAME" headerText="Last Name" />
</mx:Array>
</mx:columns>
</mx:DataGrid>

<mx:Form>

<mx:FormItem label="First Name">
<mx:TextInput id="first_name" width="200"
text="{employeeWS.getEmployee.result[0].FIRSTNAME}" />
</mx:FormItem>

<mx:FormItem label="Last Name">
<mx:TextInput id="last_name" width="200"
text="{employeeWS.getEmployee.result[0].LASTNAME}" />
</mx:FormItem>

<mx:FormItem label="Email">
<mx:TextInput id="email" width="200"
text="{employeeWS.getEmployee.result[0].EMAIL}" />
</mx:FormItem>

<mx:FormItem>
<mx:Button label="Update" click="updateEmployee();"/>
</mx:FormItem>

</mx:Form>

<mx:ControlBar />
</mx:Panel>
</mx:Application>