WeCodeThings Blog

Here is a DEMO of the application if you would like to see the finished product:
Flex 3 Insert Record into a Database using Remote Object CFC ColdFusion

Here is how to setup and insert a record into a database using Flex 3 with Remote Object / Flash Remoting with ColdFusion CFC.

Here is my Remote Object:
<mx:RemoteObject id=”mycfc”

                 destination=”ColdFusion”

                 showBusyCursor=”true”

                 source=”cfctest.thecfc”

                 result=”result(event)”

                 fault=”fault(event)”>
<mx:method name=”insertrecord” result=”confirminsert(event)”/>

</mx:RemoteObject>

 I want to setup a method that will allow me to insert a record into the database.  In my CFC, I have a function called “insertrecord” that simply inserts a record:

<cffunction name=“insertrecord” access=“remote” returntype=“void”>

      <cfargument name=“FirstName” type=“string” required=“Yes”>

      <cfargument name=“LastName” type=“string” required=“Yes”>

    <cfquery datasource=“mysqlcf_flexdemo”>

INSERT INTO tblTest (tstFirstName, tstLastName)

      VALUES

(<cfqueryparam value=“#arguments.FirstName#” cfsqltype=“cf_sql_varchar”>,

 <cfqueryparam value=“#arguments.LastName#” cfsqltype=“cf_sql_varchar”>)     

    </cfquery>

  <cfreturn>

 </cffunction>

 I then setup a function in ActionScript called “confirminsert” which will be my result of my method within my remote object.  Within “confirminsert”, I am going to pass the event. This function will get called after the Insert has taken place.

private function confirminsert(evt:ResultEvent):void

{

Alert.show(txtFirstName.text + ” “ + txtLastName.text + ” was inserted into the database”, “Insert Successful”);

     txtFirstName.text = “”;

     txtLastName.text = “”;

      mycfc.recordcount();

}

 

Before the confirminsert function gets ran, I like to setup a startinsert function that will do some error handling for us. This is the first function that will get called from the actual insert button. It first looks to make sure that both input boxes are not blank and if they are not blank, then initiate the insert by calling:

mycfc.insertrecord(txtFirstName.text,txtLastName.text); This line will actually insert the record, when this is called, the insert takes place and then the result is then run from our “confirminsert” function.

The errorString can be placed on any object and can give an instruction as to why the insert failed. If the insert was successful, then we need to clear the errorString by using txtFirstName.errorString = ‘ ‘; syntax.

private function startinsert(evt:Event):void

{

if (txtFirstName.text != “” && txtLastName.text != “”)

// All statements inside { } are guarded by IF.

           {

            mycfc.insertrecord(txtFirstName.text,txtLastName.text);

            txtFirstName.errorString = ”;

            txtLastName.errorString = ”;

            }

      else

            {

 Alert.show(“check to make sure you have entered both the first AND the last name”);

 txtFirstName.errorString = “First Name Cannot be Left Blank”;

 txtLastName.errorString = “Last Name Cannot be Left Blank”;

            }

}

Lastly, create first name and last name input boxes and a button with a click event calling the “startinsert(event)” function that we’ve already created.

 

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

     <mx:Label text=”First Name:” />

     <mx:TextInput id=”txtFirstName” />

</mx:HBox>

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

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

     <mx:TextInput id=”txtLastName“/>

</mx:HBox>

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

<mx:Button label=”Insert Name” id=”btninsert”

           click=”startinsert(event)”/>

</mx:HBox>

 

 

Here is a DEMO of the application if you would like to see the finished product:
Flex 3 Insert Record into a Database using Remote Object CFC ColdFusion

DOWNLOAD files here:
CFC     - Download
Flex     - Download

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.