Flash Builder 4 login Air application using a cfc web service

The following post contains information on how to create a login Air application with Flash Builder 4 using a cfc web service.
You can download the Flash Builder 4 beta from Adobe Labs
More information about the Flex 4.0 SDK can be found here
The requirements are:
– Flash Builder 4 Beta 2
– Coldfusion 8+
– SQL server 2005+

Create a new flex project ‘Login_Webservice_cfc’

We first need to create the application layout. We choose the design view to make our life easier (ctrl+`), then drag and drop a Panel component from the Coponents views.

From the Properties View set the Title as ‘Login’ and set width and height as 250,150 respectively. Set the Panel to always be in the center of the screen by selecting the proper checkboxes from the Constrains area and set both values to ‘0’.

 

After that, drag and drop a form component inside the panel from the componets view and set width and height to 100%. We next need to add two TextInput components; one for the Username and one for the Password inputs.

When you add a form component using the design view, Flash builder adds a FormItem wraper for you. So the code for each of your inputs will be similar to this:

Set the labels and IDs using proper values (for the example I use ‘Username’ and ‘Password’ respectively).
At the end you will need a submit button to handle the form submission. Drag and drop a button from the component view below the two text inputs. Use the ‘SubmitBtn’ as an ID value and the ‘Login’ as label value.
As you can see, you need to remove the label value from the submit button FormItem. Click on it and just remove it.

The Login panel should look like this:
03

and the mxml code like this:

<s:Panel width="250" height="150" title="Login" horizontalCenter="0" verticalCenter="0">
<mx:Form width="100%" height="100%" left="0" top="0">
<mx:FormItem label="Username">
<s:TextInput id="Username"/>
</mx:FormItem>
<mx:FormItem label="Password">
<s:TextInput id="Password"/>
</mx:FormItem>
<mx:FormItem>
<s:Button id="SubmitBtn" label="Login"/>
</mx:FormItem>
</mx:Form>
</s:Panel>

If you build your application you will see that everything looks fine except for the password input that needs to display its value as password rather than as normal text. All you need is to add this as an input attribute:
displayAsPassword=”true

Now we need to connect our application to a Web service. For this example I use a coldfusion component (cfc). This is the code for my coldfusion component (.cfc):

<cfcomponent output="false">
<cffunction access="remote" name="Authenticate" output="false" returntype="struct" hint="This Component authenticates User Accounts">
<cfargument name="Username" required="yes" type="string" />
<cfargument name="Password" required="yes" type="string" />
<cfquery name="Login" datasource="#Session.DSN#">
SELECT * FROM tblLogin
WHERE Username = '#Arguments.Username#'
AND Password = '#Arguments.Password#'
</cfquery>

<cfset ReturnObj = structNew() />
<cfif Login.recordcount gt 0>
<cfset ReturnObj.Success = true />
<cfset ReturnObj.Message = "Login successfull" />
<cfset ReturnObj.ReturnCode = 1 />
<cfset ReturnObj.Username = #Login.AccountName# />
<cfset ReturnObj.Password = #Login.AccountSurname# />
<cfelse>
<cfset ReturnObj.Success = false />
<cfset ReturnObj.Message = "Login incorrect" />
<cfset ReturnObj.ReturnCode = 2 />
</cfif>

<cfreturn ReturnObj>
</cffunction>
</cfcomponent>

Save the file as ‘login.cfc’ on your local web server.
You can see that we ask for two required arguments to be passed: Username and Password and then we create a structure and fill in it with some information. If we validate the user we also put the Name and the surname of the user within the structure.

Now I will use the Flash Builder to call the web service. The Flash builder makes our life easier with new functionality. From the Data/Services View, select ‘Connect to Data/Service’ and choose Web Service (the last one on the right hand side) and click next.

Now add the web service path ‘http://localhost/Login_Webservice_cfc/login.cfc?wsdl’, leave the rest of the settings as they are and click finish. Be aware that if the web service is on a remote machine you need to edit the ‘crossdomain.xml’ file for security reasons.

Now in the Data/Services View you can see the cfc method and the two required arguments.

Username and Password are required arguments and the return type will be Object, because we set the coldfusion function to use ‘struct’ as returntype.

We are almost there!

Drag the Authenticate function from the Data/Services view and drop it on the Submit button. Flash builder does all the hard work for you: it creates the actionscript classes and adds some pieces of code as well within your mxml file. Flash builder would just have made a submit handler for you and you need to edit it a bit.

Your function should look like this:

protected function SubmitBtn_clickHandler(event:MouseEvent):void
{
AuthenticateResult.token = login.Authenticate(Username.text, Password.text);
}

I will edit the code a bit so I can have a result function as well as a custom fault handler function.
I also create some variables to hold the user’s data if the authentication is successful.
The full code will be like this:

<?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/halo" width="100%" height="100%" xmlns:login="services.login.*">
<fx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.utils.ObjectUtil;
import mx.controls.Alert;

private var rs:Object;
private var Success:Boolean;
private var Message:String;
private var ReturnCode:int;
private var FullName:String;
//Failed to connect to the wsdl service
private function GeneralFailed_Handler(e:FaultEvent):void
{
Alert.show(e.fault.faultString, "Error connecting to the service");
}
//Login Handler
private function SubmitBtn_clickHandler(event:MouseEvent):void
{
AuthenticateResult.token = login.Authenticate(Username.text, Password.text);
}
//Result Handler for Account Authentication
private function AuthenticateResult_resultHandler(e:ResultEvent):void
{
//check the result
Alert.show(ObjectUtil.toString(e.result),"Login Results")

rs = new Object();
rs = e.result;
Success = rs['SUCCESS'];
Message = rs['MESSAGE'];
ReturnCode = rs['RETURNCODE'];

if(ReturnCode == 1)
{
FullName = rs['LOGIN']['NAME'] + " " + rs['LOGIN']['SURNAME'];

}else{
Alert.show(Message, "Try Again");
}
}

]]>
</fx:Script>

<fx:Declarations>
<login:Login id="login" fault="GeneralFailed_Handler(event)" showBusyCursor="true"/>

<s:CallResponder id="AuthenticateResult" result="AuthenticateResult_resultHandler(event)"/>
</fx:Declarations>

<s:Panel width="250" height="150" title="Login" horizontalCenter="0" verticalCenter="0">
<mx:Form width="100%" height="100%" left="0" top="0">
<mx:FormItem label="Username">
<s:TextInput id="Username"/>
</mx:FormItem>
<mx:FormItem label="Password">
<s:TextInput id="Password" displayAsPassword="true"/>
</mx:FormItem>
<mx:FormItem>
<s:Button id="SubmitBtn" label="Login" click="SubmitBtn_clickHandler(event)"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
</s:Application>

Now, if you test your application you will see I have put two alert messages, one for a failed login and a general one to display the result of the submission form:

 

I hope you found this interesting and informative! 😀

Enjoy!

Share it!Share on Google+Share on FacebookTweet about this on TwitterShare on LinkedInShare on StumbleUpon

Comments (3)

  1. Kelly
    April 6, 2010 at 5:34 am · Reply

    Very Nice! Thank you!

    I had a problem with the #Login.AccountName# in the CFC in which I forgot to rename it to my database column name. Once I corrected the change it worked great.

    It was a pain working with Flex 3, especially with the CFC generator, but this Flash Builder 4 is amazing so far. Still some glitches, but definitely better than Flex 3.

  2. Ernest Breau
    January 6, 2011 at 6:58 pm · Reply

    I figured out how to get this all to work in a flexmobile project. I would like to know when you have decided that the user is authenticated, where can i store this information for all my views to be able to use it?

    • gio
      March 11, 2011 at 5:49 pm · Reply

      Sorry Ernest for the delay,
      You have the information in your script, simply store it in a variable and use it as you go through your application.
      Cheers, Gio

Leave a reply

Your email address will not be published. Required fields are marked *

Back to Top