• Home
• Tutorials
• Forums
• Reference
• Developers
• Advertise
• About Us

Using Flash Remoting to take your CFForms Farther

Using Flash Remoting to take your CFForms Farther:

NOTE: This tutorial assumes you are already familiar with cfc’s and does not discuss the uses of them. This tutorial also assumes you have used the cfform tag and its related tags and will not discuss those either. If you are unfamiliar with either of those two things please read beginner tutorials on them located here on easycfm.com.

Ok in this tutorial we are going to build three pages. sampleForm.cfm, sampleCFC.cfc, and actionscript.as. I separated them into three pages so that the code bits wouldn’t be to much all at once. And we can focus in on the actionscript and the code. So lets begin by building our cfc.

Open your favorite editor and build a cfc with a cffunction of “getArt”. I am using a development version of ColdfusionMX 7 and in it I have a database called cfartgallery that comes preloaded with it. So my database and query will revolve around this. If you do not have cfmx 7 you can download a development version free from macromedia, If you are using cfmx 6 or earlier this tutorial will not work for you.

Ok that said I have a cfquery in my cffunction that goes like this:

<CFQUERY NAME="SampleQry" DATASOURCE="cfartgallery">
    Select ARTNAME, PRICE, DESCRIPTION
    From Art
</CFQUERY>

So your cfc should look like this when you are done editing it:

<cfcomponent>
     <cffunction name="getArt" access="remote" returntype="query">
          <CFQUERY NAME="SampleQry" DATASOURCE="cfartgallery">
               Select ARTNAME,PRICE,DESCRIPTION,LARGEIMAGE
               From Art
          </CFQUERY>
          <cfreturn SampleQry>
     </cffunction>
</cfcomponent>

That’s it save it as sampleCFC.cfc.

Ok open a new file and in this new file we will build our cfform. We are going to use a grid, but since we will be calling a cfc through Remoting that has our query we need an empty query to take its place until then. So we do the following so our form loads correctly.

<cfset sampleQry = queryNew("ARTNAME,PRICE,DESCRIPTION")>

This will provide us with an empty query until we can call our cfc. If you want you can remove this line later and see what happens to your form. The cfgrid tag when give a query value needs the query in order to show, thus taking this away will cause our form not to load.

Anyway the next couple of lines are important, so much so you will be pulling your hair out if you don’t add these wondering why the stupid thing isn’t working. We are going to use a cfsavecontent tag here and give it a value of “loadData”. Then we are including our yet to be made actionscript.as file with a cfinclude tag. So here is how it should look in your file.

<cfsavecontent variable="loadData">
    <cfinclude template="actionscript.as">
</cfsavecontent>

That is it. Like I said I broke this up into smaller bits. You could have all your actionscript in-between the cfsavecontent lines it would work the same. Or you could even use the cfformitem tag with a type of “script”, but you would call it differently and this way is the easiest for newbies to this to do their script.

Ok now for the cfform itself. You are still adding this to the sampleForm.cfm file.

<cfform format="flash" preloader="true" width="500" height="600">
     <cfformgroup type="panel" width="475" height="475" label="Remote Calling:">
          <cfgrid name="myGrid" query="SampleQry" rowheaders="no" format="flash" width="400" height="300">
               <cfgridcolumn name="ARTNAME" header="Art Name" display="yes">
               <cfgridcolumn name="PRICE" header="Price" values="{DollarFormat(Price)}" display="yes">
          </cfgrid>
          <cfinput type="text" name="decription" height="50" width="400" readonly="true" bind="{myGrid.selectedItem.DESCRIPTION}">
          <cfinput type="button" name="submit" value="Get Data" onClick="#loadData#">
     </cfformgroup>
</cfform>

Ok real quick review of what I did here. If you look at the cfform start tag you will notice I left out the action and the method attributes. You don’t need them anymore with Remoting! Cool huh. Anyway I set the width and the height and inserted a cfformgroup panel. In the panel I placed a cfgrid with the attribute query set to sampleQry with no row headers (I just don’t like them feel free to use them if you want.) and the width and the height and told it to show up in the flash format. I also added two grid columns the Artname and the Price that we will receive from the query. Under that I added a text input area but enlarged it so we can see the description and I bound the grid to the the text box and told it I want to see the description but not edit it as set by the readonly attribute.

Here is the important part of the form. Notice that I have an input button I gave it the #loadData# variable in its onClick attribute. You must enter the pound signs for it to work. Save the file.

Ok now comes the fun part writing the Remoting script for our form. I am going to do this pretty much line by line to give the fullest explanation I can give to you. So bare with me.

Ok here we go (Copy only the code in red not my notes):

<cfoutput>
   var connection:mx.remoting.Connection = mx.remoting.NetServices.createGatewayConnection("http://#cgi.HTTP_HOST#/flashservices/gateway/");

  var myService:mx.remoting.NetServiceProxy;
</cfoutput>

Ok first off that first line after the cfoutput tags should be all one line do not break it up. I know you are scrathing you head about the cfoutput tags in actionscript. When the file gets called to the sampleForm.cfm it will render as cfml and all will be right. You need them as you can see to call your localhost. The first line of code defines the connection in which your flash form is to use to call the cfc. Don’t try to look for this directory it doesn’t exists per say physically. It is a class path that cf uses for all remote request to a cfc. The next variable we pass our code is the myService variable. This variable will hold the actual directions to the cfc. Think of it as sort of a guide. The connection variable is the plane that takes you to your destination and the myService variable is the tour guide once you are there. It will make sense here in a sec.

Ok next line of code:
var responseHandler = {};

Ok now you are probably scratching your heads again. We need a event listener to know when the cfc returns results so we can populate our grid immediately so to do that we need to create an object. Being that actionscript in cf doesn’t allow for the word “new” we have to declare it as an object this way. So this object is our listener.

var myGrid = myGrid;

In coldfusion actionscript you need to declare the root to an item. In this case we have a grid that is going to be populated via actionscript called myGrid. Now not to make this to confusing, but we need to tell actionscript that we are calling myGrid, myGrid otherwise we will be forced to call the root. It more or less saves us a few steps. Any time you have something you want controlled by actionscript in the cfform you need to declare it like this or call root.

responseHandler.onResult = function( results: Object ):Void {
     //when results are back, tell us the results by showing them in the grid.
     myGrid.dataProvider = results;
}

Ok the previous lines of code are giving our object something to do when it hears a certain thing in this case it is when the cfc returns a result. We use the dataProvider attribute of the cfgrid to populate our grid. You also may want to take not that it is a function and that we are using the results object created by the cfc when it returns well our results.

responseHandler.onStatus = function( stat: Object ):Void {
     //if there is any error, show an alert
     alert("Error while calling cfc:" + stat.description);
}

Ok the next thing our listener is listening for is the status of our request to the cfc. If there is an error we want to know so we can fix it hopefully. If you notice it also gets passed and object if the cfc throws an error and doesn’t return results. Instead it will return an error message in the stat object. The lines in the function are pretty self explanatory we want the actionscript to create an alert box and give us the error. Looks a lot like javascript doesn’t it. ;-)

myService = connection.getService("testingsite.sampleCFC", responseHandler );

Here comes probably the hardest part of everything. Ok here is where we give our tour guide (myService) instruction on where we want to go. Notice we are telling it to use the connection to get the service (getService) and then giving it a dot delimited path to our cfc. Sort of giving a tour guide gps locations. Here is the hard part. IF you are on your localhost machine you will need to tell it the path to the cfc from the wwwroot folder. Not the website that you have everything set up in. so if your file path looks like this:

C:\CFusionMX7\wwwroot\testingsite\cfc\sampleCFC.cfc

You would use what I have above.

IF you are testing on a hosted site via ftp and http outside your local machine. Then you would just need the folder that the cfc is in, plus the cfc name.

Example would be cfc.sampleCFC so if you called your cfc through the url it would look like this: http://www.mysite.com/cfc/sampleCFC.cfc

Then we need to declare the listening object for when either the status or result come back from our cfc. So to recap real quick on this line of code.

We are telling myService to connect to our cfc and telling our responseHandler object to listen for the results.

Ok here is the last and probably the easiest line of it all.

myService.getArt();

We are telling myService to invoke the method in our cfc. Pretty simple huh? Ok save that as actionscript.as if you haven’t done so already and load your sampleForm page into the browser of your choice. Notice we have an empty cfgrid that has loaded. Ok now click on the button and watch it populate without ever reloading. If you select an item in the grid the description is given in the text field below the grid and you can’t edit it.

Anyway now you have everything you need to create a remote connection to a cfc in a cfform.