Dennis Baldwin

Subscribe to Dennis Baldwin: eMailAlertsEmail Alerts
Get Dennis Baldwin: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: ColdFusion on Ulitzer, XML Magazine

CFDJ: Article

Let Macromedia Flex Consume Your CFCs

A more programmatic approach to building RIAs

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>

More Stories By Dennis Baldwin

Dennis Baldwin is a software developer for SensorLogic Inc, an M2M application service provider. He also runs and maintains an online community for Flash and ColdFusion developers at www.devmx.com.

Comments (1) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
JDJ News Desk 08/03/05 02:02:26 PM EDT

Let Macromedia Flex Consume Your CFCs. 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.