SherifAbdou - The Design Blog » ColdFusion

Creating Customs Tags in Coldfusion; An example

Sherif — Tue, 21 Oct 2008 01:18:04 +0000

In this example I will show you how to create a Custom tag in ColdFusion. The idea of a Custom tag is to allow you to package chunks of code into reusable modules that you can then reuse through out your project. They are similar to UDF (User Defined Functions) with the exception that Custom tags are self-contained, have a specific purpose and goal-oriented. In addition, one does not have to understand how exactly the Custom Tag works, all you do is plug in the variables and watch the tag do it’s work.

Now to put Custom tags to good use, you will want them to accept variables and return variables. You do that by using the ATTRIBUTES scope, and the CALLER Scope. The ATTRIBUTES scope accepts variables and the CALLER scope is what returns the variables. These only pertain to Custom tags and should not be used anywhere else ex: UDF, or inside a CFC. The only place these scopes should be used is in a Custom Tag.

In addition, your Custom tags should be placed in the specified folder that can be found in the ColdFusion admin panel. If you cannot access the ColdFusion admin panel due to being on a shared host service then you place the Custom Tags in the current folder of where your tag is used. For Example if I have a folder called admin, and in the admin i have login.cfm and I am using a Custom Tag then the custom tag would be in the same folder as the login.cfm file.

After you place them in the right folder then you can use the tag like this . To have the template accept attributes and return attributes you do

 
<cf_nameOfTemplate myName="#myInputName#" returnedVariable="myNameReturned">
//you can then use it like this
<cfoutput>
#myNameReturned#
cfoutput>

Inside the Custom Tag, you would have something like this

 
<cfparam name="ATTRIBUTES.myName" type="string">
 
//notice the variableName type
 
<cfparam name="returnedVariable" type="variableName">

To return the variable you can do something like this

 
<cfset CALLER[ATTRIBUTES.returnedVariable]=Attributes.myName>

This is just scratching the surface of Custom Tags, I will explain more as this week progresses but this should give you enough rope to try some stuff on your own.

Here is the source and a working example. Click Here for the Example
Custom Tag

 name="ATTRIBUTES.returnVariable" type="variablename">
 name="ATTRIBUTES.searchName" type="string">
 name="ATTRIBUTES.datasourceName" type="string" default="cfartgallery">
 
 
 name="myQuery" datasource="#ATTRIBUTES.datasourceName#">
	SELECT Description ,ArtName
    FROM ART
    WHERE Description LIKE '%#ATTRIBUTES.searchName#%' OR ARTNAME LIKE '%#ATTRIBUTES.searchName#%'
>
 
 Caller[ATTRIBUTES.returnVariable] = myQuery>

Main Index.cfm


 xmlns="http://www.w3.org/1999/xhtml">
>
 http-equiv="Content-Type" content="text/html; charset=utf-8" />
>Untitled Document>
>
>
 
>
	 type="text" name="mySearchName"/>
     type="submit" value="Search"/>
>
/>
 isDefined("FORM.mySearchName")>
  searchName="#mySearchName#" returnVariable="myReturnedQuery">
 
 border="2" align="center">
    	>
        	>
            	ArtName
            >
            >
            	Description
            >
        >
 query="myReturnedQuery">
	    >
        	>
            	#artName#	
            >
            >
            #Description#
            >
        >
 
>
 >
>
>
>

Passing Paramaters using HTTPService in Flex to ColdFusion

Sherif — Mon, 22 Sep 2008 04:17:37 +0000

This Example involves passing parameters from Flex to ColdFusion and then having ColdFusion Process what we need and sending it back to flex via flashvars. The HTTPService class is much slower than say using the RemoteObject class or even the WebService class but If you are not doing any heavy lifting like this example then you should not be seeing any performance difference. Instead of a CFC file we use a CFM file and the parameters being passed are actually in the URL of the CFM file and not to a function. For Example when You Enter your name it will be like http://mySite.com/myFile.cfm?yourName=ColdFusion. Click Here for the Example and the Source Code is Enabled.

RemoteObject Class in Flex and ColdFusion Example

Sherif — Sun, 21 Sep 2008 21:45:47 +0000

This Example uses the RemoteObject Class/MXML Tag in Flex to send some parameters to a ColdFusion CFC file, the ColdFusion CFC file then processes the parameters that Flex sent it then sends the results back which we display in Flex. The Example is simple and straightforward and you can use this as a stepping stone to create bigger applications. You can, for example query up a Database from ColdFusion then have flex send some parameters which ColdFusion can take and determine for example to delete,insert,filter, something from the Database. A couple of things you need to take note of. 1) You must set the destination=”ColdFusion” or you will get this error:

[RPC Fault faultString="[MessagingError message='The MessageAgent's destination must be set to send messages.']” faultCode=”InvokeFailed” faultDetail=”Couldn’t establish a connection to ””]

Also When you drill down to the CFC file make sure that you are Starting from where the root of your site is and to also include the src Folder in flex. So For Example myExample.src.ThisIsTheCFCFile, DO NOT put the .cfc Extension. Here is the Example, just type in Your First Name and Last Name and click Submit. Click Here for the Example and Right Click For the Source

Stopping and Starting ColdFusion 8 Services in Windows Via a Batch File

Sherif — Wed, 16 Jul 2008 16:56:12 +0000

For me Jrun takes almost 500K memory when it is fully loaded, which is a waste of memory since I am not always programming ColdFusion so I decided to write 2 Batch Files to Start and Stop all ColdFusion 8 Services. Here is the Code
@echo off echo Starting ColdFusion 8 echo ====================================================== net start "ColdFusion 8 Application Server" net start "ColdFusion 8 ODBC Agent" net start "ColdFusion 8 ODBC Server" net start "ColdFusion 8 Search Server" echo ====================================================== echo ColdFusion 8 Started

@echo off echo Stopping ColdFusion 8 echo ====================================================== net stop "ColdFusion 8 Application Server" net stop "ColdFusion 8 ODBC Agent" net stop "ColdFusion 8 ODBC Server" net stop "ColdFusion 8 Search Server" echo ====================================================== echo ColdFusion 8 Stopped

The Files If you do not want to create them Click Here

BlogStats Component Example Using Flex, ColdFusion, and LCDS

Sherif — Wed, 09 Jul 2008 15:44:10 +0000

This component is similar to the WordPress Blog stats that shows you how many users visit your site a day. View Source is Enabled, only problem with it is it uses Application.cfc thus if I restart my server then all data is lost. If You want you can tie in a database end and have it work. If your download it then make sure to set the Gateway Instances. Gateway ID: BlogStats , Type:DataServicesMessaging and just navigate to the CFC file that is under exhd/cfc/BlogStats.cfc. Here is the example, to see it work in real time open two tabs, go into one tab and refresh say twice then navigate to the other tab and there should be a delay of around 8 seconds before it updates the count. http://sherifabdou.com/cfusion/BlogStatsExample/BlogStats.cfm

understanding flex data management by using coldfusion livecycle

Sherif — Sun, 06 Jul 2008 06:15:05 +0000

The Purpose of the Flex Data Management is to push data live and synchronize everything across the board with no HTTPservice requests or anything else that you have to do, everything happens in real time so you do not have to worry about a client not seeing up to date information. Ben Forta has a better explanation In this Tutorial I will show you how you can set it up and make everything work.
Here is the example. http://sherifabdou.com/cfusion/DataPushSample/DataPushSample.swf. This is more complicated than what I am going over but the Source View is available so you can download it and try it out. To understand the power of Data Management, you need to open the example in two tabs. Now In one Tab Click on the DataGrid to edit the Database and in the other Tab click on the same item you clicked in tab 1 to also edit it. Now You have two windows open, change the Description in the first tab and in the second tab but have them both be different descriptions. Now go back to the first tab and click save. Now go to the Second tab, if you did it correctly you should get a screen similar to this.
- This Prevents the whole idea of racing where one information could be different from the other if two people are editing it at the same time
First thing you need is the ColdFusion 8 Extensions for Eclipse.

Next go to where you installed Coldfusion 8 which in my case is C:\Coldfusion8\wwwroot\ and inside the wwwroot directory create a folder called cfusion. Open Flex Builder and make sure that your workspace is under C:\Coldfusion8\wwwroot\cfusion. Next thing is Create a project named DataPushSample and create a folder under src called exhd then sub folder cfc and action. It should look like this at the end

Next Set up Eclipse to connect to the RDS Server by going to Window–>Show View–>Other–>ColdFusion–>RDS Dataview

Now the RDS DataView should open, click on localhost to connect and type in your RDS Password when prompted. Next Thing you should do is click on cfartgallery then expand the Tables Folder and then Left Click on the APP.ART table then Select ColdFusion Wizard then Click on Create CFC

Now You will then get a popup, make sure to follow and type in the exact same thing as in the picture below

So Now comes the Hard part, for some reason the Wizard screws up everything so you have to manually do everything. Now for the CFC Package Name and why it is cfusion.DataPushSample…, the Reason for this is you need to have the package name from the wwwroot and start to drill down. For Example, if you created under wwwroot a Folder called flex and a subfolder called coldfusion and in that ColdFusion folder is your workspace then the CFC Package name would have to be flex.coldfusion.DataPushSample.src.exhd.cfc. You must keep drilling down until you reach the cfc folder.
For the Actionscript part ignore the src folder and just go on as if making a regular actionscript file so if the Actionscript file was stored in DataPushSample/src/exhd/action. Package level name would only be exhd.action

Click Finish and Everything Should have been created and read to go
From Here on I will assume that you installed Coldfusion in C:\coldfusion8
Go to C:\coldfusion8\wwwroot\WEB-INF\flex\
Open up the Services-config.xml File , Look for this channel

20

false

–>

Uncomment that whole block so in the end it looks like this
Open data-management-config.xml
Add the following destination below the adapters tag

 
    
    
 
        
 
        
 
            
            cfusion.DataPushSample.src.exhd.cfc.ARTAssembler
 
            
            application
 
            
            true
 
            
            false
 
            
 
            
 
            
 
            
 
                
                remote
 
            
 
                
                false
 
                
                false
 
                
                false
 
                
 
              
 
                
 
                    
                    false
                    
                    true
 
                    
                    true

Here is what it should look like data-management-config.xml

Now there are 4 import things that must be included with every destination so it works

You need to have a destination id so you can connect
cfusion.DataPushSample.src.exhd.cfc.ARTAssembler
You must specify where the Assembler component is which as stated before you have to drill down from the wwwroot folder.
application needs to be application
this needs to be the Primary key in your Table.

Next thing you must do is either restart your computer or restart the coldfusion8 server for these setting to take effect, otherwise it will never work.
If everything up until now worked then you should be able to test out your Application.

In the DataPushSample.mxml add the following

       <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initApp()" viewSourceURL="srcview/index.html">
    <mx:Script>
        [CDATA[
            import exhd.action.ART;
            import mx.collections.ArrayCollection;
            [Bindable]
            private var myGridData:ArrayCollection = new ArrayCollection();
            /**
             * @private
             * This Is a Dummy Variaiable, You MUST Include it otherwise Flex
             * 
             *Will not Compile the Class and You will get an Error of
             * [RPC Fault faultString="Error during update: The OLDBEAN argument passed to the update 
             * function is not of type foo." faultCode="null" faultDetail="null"]
             */             
             private var dummyVariableToCompile:ART = new ART();
             private function initApp():void
             {
                 myDataService.fill(myGridData);
 
             }
 
 
        ]]>
    mx:Script>
    <mx:DataService destination="cfartgallery" autoCommit="true" id="myDataService" />
 
    <mx:Text text="If You Are Not Convinced that it works, You can always refresh the page to see that it has been commited to the DataBase"/>
    <mx:HBox>
 
 
    <mx:Panel title="DataBase That Uses DataService to Update in RealTime" >
        <mx:DataGrid dataProvider="{myGridData}" width="500" height="600" editable="true">
        <mx:columns>
            <mx:DataGridColumn dataField="ARTID" editable="false"/>
            <mx:DataGridColumn dataField="ARTISTID" editable="false"/>
            <mx:DataGridColumn dataField="ARTNAME" editable="true"/>
            <mx:DataGridColumn dataField="DESCRIPTION" editable="true"/>
            <mx:DataGridColumn dataField="PRICE" editable="true"/>
            <mx:DataGridColumn dataField="LARGEIMAGE" editable="true"/>
            <mx:DataGridColumn dataField="MEDIAID" editable="true"/>
        mx:columns>
    mx:DataGrid>
 
    mx:Panel>
 
 
    <mx:Panel title="Dummy Sync to show it works" >
        <mx:DataGrid dataProvider="{myGridData}" width="500" height="600"/>
    mx:Panel>
 
 
        mx:HBox>
 
mx:Application>

Now If Everything went according to plan then you should be able to debug it should work if you are on a development server, otherwise you may need to do server mappings.

Log on to the ColdFusion Adminstrator panel, go to Server Settings–>Mappings. Under Logical Path Enter /cfusion. Under Directory Path enter /var/www/vhosts/yoursitename.com/httpdocs/cfusion. Click Add Mapping. It should look like this

Most Common Errors and Their Solution

[RPC Fault faultString="Error invoking fill-method 'fill' for destination artgalleryDS: Unable to invoke CFC - Error invoking CFC fill operation:Could not find the ColdFusion Component or Interface cfusion.DataPushSample.src.cfc.ARTAssembler." faultCode="Server.Processing" faultDetail="null"]
This Either means You need to do the ColdFusion Mapping, or you gave the wrong path wrong in the data-management-config.xml file. Double check this

[RPC Fault faultString="Error during update: The OLDBEAN argument passed to the update
 function is not of type foo." faultCode="null" faultDetail="null"]

This would mean that you did not Include the Art.as file in flex, this needs to be included somehow otherwise Flex will not compile it. Easiest solution is to drop this in the main mxml file.
```
 private var dummyVariableToCompile:ART= new ART();
```

Hardcoding The endpoint for AIR and ColdFusion Remoting.

Sherif — Thu, 05 Jun 2008 17:58:22 +0000

If you are using Adobe AIR with ColdFusion Remoting and you notice that your file dropped the first letter from its name and you get and error sort of like this

RPC Fault faultString= “Send failed”
faultCode=”Client.Error.MessageSend”
faultDetail= “Channel.Connect.Failed error NetConnection.Call.Failed:

then include

<mx:RemoteObject
	  		 endpoint="http://localhost:8500/flex2gateway"/>

Understanding the RemoteClass Metadata and its use in Flex and ColdFusion

Sherif — Mon, 02 Jun 2008 17:17:12 +0000

Here is an example of how to use the RemoteClass metadata in Flex to map Actionscript objects that map directly onto ColdFusion Component that is found on a remote server. The data then can be converted to an Actionscript class with the appropriate properties and referenced in another actionscript class or MXML. My Workspace is under wwwroot/

Download Example

;
 
package vo
{
/**
* @private
* What we need to do is map on this actionscript file
* the coldufusion component, this is done by using the Remote
* Class Metadata tag. so [RemoteClass(alias="from(wwwroot Folder).path.to.coldFusionCFC")]
* Everything has to match exactly between the variables declared here and the coldFusion arguments
* that will be declared in the CFC file otherwise it will not work at all. ALso we want this class to be
* Bindable so we can show some information to know that it works
*/
[RemoteClass(alias="RemoteClassExample.src.cfc.cfcVO")]
[Bindable]
public class ColdFusionFlexVO
{
/**
* @private
* What we will be creating are simple variables to
* prove the point, this can be used for a registration form for example.
* Make Sure when you write in the Coldfusion component you use the same
* exact name, case does matter.
* Now Go to the cfcVO.cfc file under cfc
*/
public var firstName:String;
public var lastName:String;
public var emailAddress:String;
public var password:String;
 
 
public function ColdFusionFlexVO()
{
}
public function toString():String
{
var result:String= " ";
result += "First Name : "+ firstName +"\n" +
"Last Name : " + lastName + "\n" +
"Email Address : " + emailAddress +"\n" +
"Passwrod : " + password;
return result;
}
 
}
}

-- What we need now is to give an alias to the cfcomponent tag which is basically where this file is stored-->
<cfcomponent output="false" alias="RemoteClassExample.src.cfc.cfcVO" style="rpc">
	--Create The Properties that will be used, Match them exactly with these
		 public var firstName:String;
		 public var lastName:String;
		 public var emailAddress:String;
		 public var password:String;
		 Including the type -->
	<cfproperty name="firstName" type="string"/>
	<cfproperty name="lastName" type="string"/>
	<cfproperty name="emailAddress" type="string"/>
	<cfproperty name="password" type="string"/>
 
 
	--Now We place the arguments that we will be using which is what we will
	passing in when we create a remote object in flex, the return type is the name
	of the coldfusion cfc file which is cfcVO-->
	<cffunction name="returnVOClassObject" returntype="cfcVO" access="remote">
		<cfargument  name="firstName" required="true" type="string"/>
		<cfargument  name="lastName" required="true" type="string"/>
		<cfargument  name="emailAddress" required="true" type="string"/>
		<cfargument  name="password" required="true" type="string"/>
 
		--Now set the property to the argument and return it-->
		<cfset this.firstName = arguments.firstName />
		<cfset this.lastName = arguments.lastName />
		<cfset this.emailAddress = arguments.emailAddress />
		<cfset this.password = arguments.password />
 
		--Return the entire cfc, which will mean that we are really returning a COldFusionFlexVO-->
		<cfreturn this>
		--Move on to the MXML File-->
	cffunction>
cfcomponent>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	 creationComplete="onCreateComplete()">
	<mx:Script>
		[CDATA[
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import vo.ColdFusionFlexVO;
			/**
			 * @Private
			 * Create the class and pass to it values so we see that it works
			 */
			 [Bindable]
			 private var remoteVO:ColdFusionFlexVO;
 
 
			 private function onCreateComplete():void
			 {
			 	remoteSend.returnVOClassObject("Adobe","Flex","Adobe@flex.net","ColdFusion");
			 }
			 private function onResultEvent(event:ResultEvent):void
			 {
			 	remoteVO = event.result as ColdFusionFlexVO; //where our ColdFusionFlexVO class will be populated
			 	myText.text = remoteVO.toString();
			 }
			 private function onFaultEvent(event:FaultEvent):void
			 {
			 	mx.controls.Alert.show(event.fault.toString(),"Fault");
			 }
		]]>
	mx:Script>
 
	--The Remote Object-->
	<mx:RemoteObject id="remoteSend" destination="ColdFusion" source="RemoteClassExample.src.cfc.cfcVO">
		<mx:method name="returnVOClassObject" result="onResultEvent(event)"
		            fault="onFaultEvent(event)">
 
		mx:method>
	mx:RemoteObject>
 
	<mx:TextArea id="myText" width="200" height="200"/>
 
mx:Application>

Flex and ColdFusion Remoting Simple DataBase Example

Sherif — Sun, 01 Jun 2008 23:54:44 +0000

Here is a simple of Example of how you can use the RemoteService class in Flex and ColdFusion to populate a datagrid. The database that is being used is the one that comes with ColdFusion 8 (cfartgallery). Download the File and Import it via The import function in Eclipse. Make sure your workspace is under the wwwroot Folder otherwise you will have to make adjustments.

Download FCRExample

Simple Login Form Example using Flex and ColdFusion WebService

Sherif — Thu, 29 May 2008 00:45:54 +0000

Here is how you can use Flex and Coldfusion wsdl to check credentials of a login form. This is very simple, it does not include a database and the username and password are coded in the Cfc file. The Username is Adobe and the Password is Flex. my workspace is under wwwroot in the ColdFusion 8 Folder.

Download the Example