Login System For A Flex Application With ColdFusion Backend Part 2 - Flex - ColdFusion Connectivity
Introduction to Part 2 - Flex - ColdFusion Connectivity
In part 1 of my quest to develop a login system using Flex, ColdFusion, and a database, I discussed how I developed the database, the CFCs, and tested everything. My next step is to create a Flex application and test connecting Flex to the backend CFCs.
If you're new to connecting a Flex application to a CFC, then I recommend you consult these references:
- Adobe Labs, Using ColdFusion MX With Flex 2
- Bruce Phillips Blog, Passing Objects Between Flex and ColdFusion
- Flex 2 Developer's Guide, About RPC Services
- Flex Language Reference, RemoteObject
Before I started on connecting my Flex program to the ColdFusion/Database backend, I thought more about the MemberService.cfc I built in part 1. That MemberService.cfc had a function named getMemberByUserNameAndPassword that returned a query result. I decided to rebuild that function so it would return a Member object if one record was found in the Member table that had a matching username and password. If no records were found or more than one record was found, then the function throws an exception.
Connecting The Flex Front-End To The ColdFusion Backend
In this part of the project, I just want to verify that my Flex program will be able to connect to my ColdFusion backend. So all I've done in this part is create a Flex application with the following mix of mxml and ActionScript code.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initVars()" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.utils.ObjectUtil;
import mx.controls.Alert;
import mx.collections.ArrayCollection ;
[Bindable]
private var aMember:Member;
//called automatically when app is first run
private function initVars():void {
/*
Test method when sending a username and password
that exists in the database
should cause resultGetMemberByUserNameAndPassword
function to be called
*/
MemberService.getMemberByUserNameAndPassword('phil1021','seven');
/*test method when sending username and password that don't exist
should cause the faultGetMemberByUserNameAndPassword function
to be called*/
MemberService.getMemberByUserNameAndPassword('test','testPassword');
} //end function initVars()
/*Called automatically when the result is returned by the
CFC method getMemberByUserNameAndPassword
*/
public function resultGetMemberByUserNameAndPassword(event:ResultEvent):void {
//used for debugging - shows details about result
//returned by the CFC method
Alert.show( ObjectUtil.toString(event.result) );
/*result returned is a Member object
cast the result returned to a Member class
and assign it to our Member object*/
aMember = event.result as Member ;
/*example of how to access the values of the aMember
object */
Alert.show("Member ID: " + aMember.memberID +
"\nPassword: " + aMember.password +
"\nFirst name: " + aMember.firstName +
"\nLast name: " + aMember.lastName +
"\nEmail: " + aMember.email );
} //end function getMemberByUserNameAndPassword
/*
automatically called if the CFC method call causes an error
*/
private function faultGetMemberByUserNameAndPassword(event:FaultEvent):void{
Alert.show( ObjectUtil.toString(event.fault) );
}//end function faultGetMemberByUserNameAndPassword
]]>
</mx:Script>
<!--setup the connection to the ColdFusion CFC
NOTE: path for the source will depend on
where you placed the MemberService.cfc-->
<mx:RemoteObject
id="MemberService"
destination="ColdFusion"
source="brucephillips.GeekNews.MemberService"
showBusyCursor="true"
>
<mx:method name="getMemberByUserNameAndPassword"
result="resultGetMemberByUserNameAndPassword(event)"
fault="faultGetMemberByUserNameAndPassword(event)"/>
</mx:RemoteObject>
</mx:Application>
The RemoteObject tag sets up the connection to the MemberService CFC and its getMemberByUserNameAndPassword method. The function initVars is called automatically when the application completes loading. Inside this function, I call the CFC method twice, one with a valid username and password, and a second time with an invalid user name and password.
If my Flex program can connect successfully to the CFC and the CFC method runs correctly, function resultGetMemberByUserNameAndPassword is called when the result is returned by the method. If my Flex program cannot connect to the CFC or the CFC generates an error, function faultGetMemberByUserNameAndPassword is called.
Since the CFC method getMemberByUserNameandPassword returns an object of type Member, I need to have a ActionScript class that matches the Member CFC. In Flex Builder, you can create an ActionScript class by right-clicking on the CFC in the navigator, select ColdFusion Wizards, select Create AS Class (based on CFC). This will run a wizard that will create an ActionScript 3.0 class based upon your CFC. When doing this note the following.
- The CFC must declare its variables using the cfproperty tag, the type and default value must be specified.
- The path to the CFC that you provide the wizard when creating the ActionScript 3.0 class is CASE SENSITIVE.
If the wizard works correctly, you will now have an ActionScript 3.0 class that mirrors your CFC. So when the result is returned from the CFC method, you can assign the result to a variable of the same type. For example: aMember = event.result as Member ;
Now I can use the variable aMember in my Flex program to access the Member class's fields and these fields will have the values of the Member object returned by the CFC method. So if the firstName field of the Member object returned by the CFC has the value 'Bruce', then the aMember object's firstName field will now have that value.
In function resultGetMemberByUserNameAndPassword, I display two Alert boxes. One Alert box uses the ObjectUtil ActionScript 3.0 class to show as a nicely formatted string the result returned. The other Alert box shows how you can access the specific fields of the Member object.
In function faultGetMemberByUserNameAndPassword, I just use an Alert box to show the error returned by the CFC. If you read the error message, you'll see that it includes the error message specified in the CFC method's cfthrow tag.
Conclusion Part 2
So I've now verified that my Flex program can connect to the CFC backend. You can view a demonstration of the above Flex application; right click on the application to get the source code.
In the next part, I'll create a simple Login form to get the user name and password that we need to pass to the CFC backend.
