WeCodeThings Blog

On my blog on www.cftips.net, I created a simple cfc and connected it with a standard cfm form page. You can see my original blog here.  All it did was demonstrate how get data from a cfc using the standard cfinvoke. The tiny app allowed you to type a last name into an inputbox, then it returned the first name associated with it in the database. 

I’ve since then been asked the questions:

Can you give me an example of how to integrate this simple .CFC file into a Flex app?

Also, what happens with your app when there are two different people with the same last name? How do you handle that?

So here is the answer to those questions:

Here is the DEMO of the application if you would like to see the finished product.

First off, I have a cfc named: “thecfc.cfc”

<cfcomponent>
<cffunction name=”ReturnFirstName” access=”remote” returntype=”query” hint=”This will return the first name when passed a last name”>
 <cfargument name=”LastName” type=”string” required=”Yes”>
 <cfset var get_employees_first_name = “”>
    <CFQUERY name=”get_employees_first_name” datasource=”dsnTest”>
            select tstFirstName
            from tblTest
            where tstLastName = ‘#arguments.LastName#’
    </CFQUERY>
  <CFRETURN get_employees_first_name>
 </cffunction>

<cffunction name=”returnallnames” access=”remote” returntype=”query”>
      <cfset var qryReturn = “”>
      <cfquery name=”allnames” datasource=”dsnTest”>
               SELECT tstID, tstFirstName, tstLastName
                 FROM tblTest
      </cfquery>
<cfreturn allnames>
</cffunction>
</cfcomponent>

Next, I created a Flex 3 project and named my MXML file name: cfcFirstLastNameProject.mxml

I right clicked on the src folder and imported the cfc to Flex.

 

I then created an hbox so it lines up nice, an inputbox, a datagrid, and 2 buttons:

<mx:HBox width=”80%” horizontalAlign=”center“>

      <mx:Label text=”Type Last Name Here“/>

</mx:HBox>

<mx:HBox width=”100%” horizontalAlign=”center“>

      <mx:Label text=”Last Name:“/>

      <mx:TextInput id=”txtLastName“/>

</mx:HBox>

<mx:DataGrid id=”mygrid” width=”487” height=”50%” />

     

<mx:Button label=”Get All Names” id=”btnAllNames” />

<mx:Button label=”Get First Name” id=”btnLastName” />

 

I created my remote object giving it an ID of mycfc with the source pointing to the cfc from the root folder with the destination equal to ColdFusion (case sensitive). Also I create the result and fault functions which I will setup next:

 

<mx:RemoteObject id=”mycfc”

                  destination=”ColdFusion”

                  showBusyCursor=”true”

                  source=”cfctest.thecfc”

                  result=”result(event)”

                  fault=”fault(event)”>

</mx:RemoteObject>

Since I set my result and fault functions in my remote object I have to create the functions that will handle what happens when the data comes back from the cfc. In the Result handler function, I set the id of my datagrid, which is “mygrid”.dataProvider Equal to the event result of the cfc, which is the return data coming back from the cfc. I also setup a fault handler function in case we have an error. That way if there is an error, we can see what the error is placed nicely in an alert box. Here is the script statements:

<mx:Script>

      <![CDATA[

            import mx.controls.Alert;

            import mx.rpc.events.FaultEvent;

            import mx.rpc.Fault;

            import mx.rpc.events.ResultEvent;

            private function result(evt:ResultEvent):void {

                  mygrid.dataProvider = evt.result;

            }

            private function fault(evt:FaultEvent):void {

                  Alert.show(evt.fault.message);                 

            }

      ]]>

</mx:Script>

In my cfc, I have 2 functions. One that will simply return all the names in the database and I have named that function: returnallnames

The second function I created in my cfc is going to accept one argument, which is going to be a last name, and then it returns the first name associated with it. I named that function: “ReturnFirstName”

Now that I have my result and fault functions setup to handle the return data from the cfc, I can now set my buttons have click events which will send the data to the cfc. This is accomplished by calling the remote object which mine has the ID of “mycfc” then using dot notation, calling the cfc function named “returnallnames()”. That should take care of the first function and with the second button, I use the same syntax, “mycfc” dot notation then the name of the function in the cfc, “ReturnFirstName” followed by the argument that I want to pass, which is what you typed in the inputbox, “txtLastName.text”:

<mx:Button label=”Get All Names” id=”btnAllNames” click=”mycfc.returnallnames()”/>

 

<mx:Button label=”Get First Name” id=”btnLastName” click=”mycfc.ReturnFirstName(txtLastName.text)”/>

Now that I’m displaying the data in a datagrid, if there is 2 First Names associated with a last name, then both first names will show up in the datagrid.

That’s all there is to it!

I’ve added All the code for you to download and use if you’d like.

Heres what the entire Flex 3 code looks like:

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” verticalAlign=”top” xmlns:local=”*“>

     

      <mx:Script>

      <![CDATA[

            import mx.controls.Alert;

            import mx.rpc.events.FaultEvent;

            import mx.rpc.Fault;

            import mx.rpc.events.ResultEvent;

            private function result(evt:ResultEvent):void {

                  mygrid.dataProvider = evt.result;

            }

            private function fault(evt:FaultEvent):void {

                  Alert.show(evt.fault.message);                 

            }

      ]]>

      </mx:Script>

 

<mx:RemoteObject id=”mycfc”

                         destination=”ColdFusion”

                         showBusyCursor=”true”

                         source=”cfctest.thecfc”

                         result=”result(event)”

                         fault=”fault(event)”>

</mx:RemoteObject>

      <mx:HBox width=”80%” horizontalAlign=”center“>

            <mx:Label text=”Type Last Name Here“/>

      </mx:HBox>

      <mx:HBox width=”100%” horizontalAlign=”center“>

            <mx:Label text=”Last Name:“/>

            <mx:TextInput id=”txtLastName“/>

      </mx:HBox>

      <mx:DataGrid id=”mygrid” width=”487” height=”50%” />

     

     

      <mx:Button label=”Get All Names” id=”btnAllNames” click=”mycfc.returnallnames()”/>

      <mx:Button label=”Get First Name” id=”btnLastName” click=”mycfc.ReturnFirstName(txtLastName.text)”/>

</mx:Application>

 

Download Files here:
CFC          - Download
Flex          - Download
Database - Download

Here is the DEMO of the application if you would like to see the finished product.