CF AJAX Programming

ColdFusion 8 Developer Tutorial

Adobe ColdFusion is an application server, renowned for rapid development of dynamic websites, with a straightforward language (CFML), powerful methods for packaging and reusing your code, and AJAX support that will get developers deep into powerful web applications quickly.
This book is the most intense guide to creating professional ColdFusion applications available. Packed with example code, and written in a friendly, easy-to-read style, this book is just want you need if you are serious about ColdFusion. This book will give you clear, concise and, of course, practical guidance to take you from the basics of ColdFusion 8 to the skills that will make you a ColdFusion developer to be reckoned with.

also read:

• HTML Tutorials
• CSS Tutorials
• JavaScript Tutorials

ColdFusion expert John Farrar will teach you about the basics of ColdFusion programming, application architecture, and object reuse, before showing you a range of topics including AJAX library integration, RESTful Web Services, PDF creation and manipulation, and dynamically generated presentation files that will make you the toast of your ColdFusion developer town.
This book digs deep with the basics, with real-world examples of the how and whys, to get more done faster with ColdFusion 8. This book also covers the new features of ColdFusion 8 Update 1.

What This Book Covers

Chapter 1 describes how to enhance basic HTML pages with the power and simplicity of ColdFusion. It also explains the difference between static HTML pages and dynamic ColdFusion pages.
Chapter 2 describes how to create object classes and instantiate object instances. It also describes the object constructors. This chapter explains how to connect to a database through the internal methods of our objects.
Chapter 3 helps us in understanding how to manage multiple products through common forms for listing, editing, and adding data. This chapter explains integrating and streamlining the workflow of web forms and CFC database processing.
In Chapter 4, we will learn how to use the web server memory to create engaging and interactive web applications by using variable scopes. We will also learn how to share some information, and how to protect the rest of the information in a controlled manner. In Chapter 5, we will learn about the basics of custom tags. We will also learn how to integrate cfinclude for libraries of segments. This chapter also includes skinning a website by using custom tags, the use of nested tags, and so on.
Chapter 6 includes wrapping of the ThickBox gallery functions into a custom tag for simple functional reuse and wrapping of a Google map library into our code with a custom tag for simplified interactive maps. This chapter helps us in understanding how to create a multi-state form list wrapped in a custom tag.
In Chapter 7, we will see how to use the authentication that comes standard with CF. This chapter explains how to control the site content based on current user permissions.
In Chapter 8, we will see how AJAX is different from HTML and regular server-oriented web pages. This chapter includes the comparison of HTML, server, and browser technology sites. It also explains about the ColdFusion widgets.
In Chapter 9, we will see the benefit received from the combined power of tag-based encapsulation with AJAX functionality.
Chapter 10 explains about binding, proxy connections, JSON features, Spry data integration, and debugging.
In Chapter 11, we will have a look at the different ways in which we can reorganize pages of PDF documents into a new PDF file from one or more separate PDF source documents.
Chapter 12 explains how to create Verity search collections, how to initialize the Verity indexes, how to interface with the indexes. This chapter also explains how to interface with PDF content for more control when calling documents.
Chapter 13 discusses files, emails, and images. This chapter helps in understanding how some of the common ColdFusion features empower developers to shift the web pages to web applications in many ways.
In Chapter 14, we will learn how to interact with other web servers and create features on our site that will allow others to interact with us.
Chapter 15 gives a broad introduction to ColdFusion’s way of generating dynamic reports. This chapter also gives a brief introduction to the ColdFusion Report Builder tool.
Chapter 16 shows the unique presentation capabilities built into ColdFusion. It gives practical examples to help build custom presentations with dynamic content on demand. Appendix A covers some important details of setting up a development environment. It
also includes some important tips for better productivity.
Appendix B includes some links and resources that are aimed at giving us a good starting base of information. It also explains a group of libaries that prove to be very significant.

CF AJAX Programming

This chapter deals with AJAX programming in ColdFusion. ColdFusion acts a great platform not just because of its code features, but because of its characteristics as to how the code interacts with other features. ColdFusion is a language with depth and power. Yet, as we developers know, it seems real power always requires a bit of custom code. In this chapter, we will have a look at the following topics:

• Binding


• Proxy connections


• JSON features


• Spry data integration


• Debugging

Binding

When it comes to programming, the two most commonly used features are CFAJAXProxy and binding. The binding feature allows us to bind or tie things together by using a simpler technique than we would otherwise have needed to create. Binding acts as a double-ended connector in some scenarios. You can set the bind to pull data from another ColdFusion tag on the form. These must be AJAX tags with binding abilities.
There are four forms of bindings, on page, CFC, JavaScript, and URL. Let’s work through each style so that we will understand them well. We will start with on page binding. Remember that the tag has to support the binding. This is not a general ColdFusion feature, but we can use it wherever we desire.

On Page Binding

We are going to bind ‘cfdiv’ to pull its content to show on page binding. We will set the value of a text input to the div. Refer to the following code. ColdFusion AJAX elements work in a manner different from how AJAX is written traditionally. It is more customary to name our browser-side HTML elements with id attributes. This is not the case with the binding features. As we can see in our code example, we have used the name attribute. We should remember to be case sensitive, since this is managed by JavaScript. When we run the code, we will notice that we must leave the input field before the browser registers that there has been a change in the value of the field. This is how the event model for the browser DOM works.

	<cfform id="myForm" format="html">
		This is my edit box.<br />
		<cfinput type="text" name="myText">
	</cfform>
	<hr />
	And this is the bound div container.<br />
	<cfdiv bind="{myText}"></cfdiv>

Notice how we use curly brackets to bind the value of the ‘myText’ input box. This inserts the contents into ‘div’ when the text box loses focus.

This is an example of binding to in-page elements. If the binding we use is tied to a hidden window or tab, then the contents may not be updated.

CFC Binding

Now, we are going to bind our div to a CFC method. We will take the data that was being posted directly to the object, and then we will pass it out to the CFC. The CFC is going to repackage it, and send it back to the browser. The binding will enable the modified version of the content to be sent to the div. Refer to the following CFC code:

	<cfcomponent output="false">
		<cffunction name="getDivContent" returntype="string"
			access="remote">
			<cfargument name="edit">
				<cfreturn "This is the content returned from the CFC for
					the div, the calling page variable is '<strong>#arguments.edit#</
					strong>'.">
		</cffunction>
	</cfcomponent>

From the previous code, we can see that the CFC only accepts the argument and passes it back. This could have even returned an image HTML segment with something like a user picture. The following code shows the new page code modifications.

	<cfform id="myForm" format="html">
		This is my edit box.<br />
		<cfinput type="text" name="myText">
	</cfform>
	<hr />
	And this is the bound div container.<br />
	<cfdiv bind="cfc:bindsource.getDivContent({myText})"></cfdiv>

The only change lies in how we bind the cfdiv element tag. Here, you can see that it starts with CFC. Next, it calls bindsource, which is the name of a local CFC. This tells ColdFusion to wire up the browser page, so it will connect to the CFC and things will work as we want. You can observe that inside the method, we are passing the bound variable to the method. When the input field changes by losing focus, the
browser sends a new request to the CFC and updates the div. We need to have the same number of parameters going to the CFC as the number of arguments in our CFC method. We should also make sure that the method has its access method set to remote. Here we can see an example results page.

It is valid to pass the name of the CFC method argument with the data value. This can prevent exceptions caused by not pairing the data in the same order as the method arguments. The last line of the previous code can be modified as follows:

	<cfdiv bind="cfc:bindsource.getDivContent(edit:{myText})"></cfdiv>

JavaScript Binding

Now, we will see how simple power can be managed on the browser. We will create a standard JavaScript function and pass the same bound data field through the function. Whenever we update the text box and it looses focus, the contents of the div will be updated from the function on the page. It is suggested that we include all JavaScript rather than put it directly on the page. Refer to the following code:

	<cfform id="myForm" format="html">
		This is my edit box.<br />
		<cfinput type="text" name="myText">
	</cfform>
	<hr />
	And this is the bound div container.<br />
	<cfdiv bind="javascript:updateDiv({myText})"></cfdiv>
	<script>
		updateDiv = function(myEdit){
			return 'This is the result that came from the JavaScript function
			with the edit box sending "<strong>'+myEdit+'</strong>"';
		}
	</script>

Here is the result of placing the same text into our JavaScript example.

URL Binding

We can achieve the same results by calling a web address. We can actually call a static HTML page. Now, we will call a .cfm page to see the results of changing the text box refl ected back, as for CFC and JavaScript. Here is the code for our main page with the URL binding.

	<cfform id="myForm" format="html">
		This is my edit box.<br />
		<cfinput type="text" name="myText">
	</cfform>
	<hr />
	And this is the bound div container.<br />
	<cfdiv bind="url:bindsource.cfm?myEdit={myText}"></cfdiv>

In the above code, we can see that the binding type is set to URL. Earlier, we used the CFC method bound to a file named bindsource.cfc. Now, we will bind through the URL to a .cfm file. The bound myText data will work in a manner similar to the other cases. It will be sent to the target; in this case, it is a regular server-side page. We require only one line. In this example, our variables are URL variables. Here is the handler page code:

	<cfoutput>
		'This is the result that came from the server page with the edit
		box sending "<strong>#url.myEdit#</strong>"'
	</cfoutput>

This tells us that if there is no prefix to the browse request on the bind attribute of the <cfdiv> tag, then it will only work with on-page elements. If we prefix it, then we can pass the data through a CFC, a URL, or through a JavaScript function present on the same page. If we bind to a variable present on the same page, then whenever the bound element updates, the binding will be executed.

Bind with Event

One of t he features of binding that we might overlook its binding based on an event. In the previous examples, we mentioned that the normal event trigger for binding took place when the bound field lost its focus. The following example shows a bind that occurs when the key is released.

	<cfform id="myForm" format="html">
		This is my edit box.<br />
		<cfinput type="text" name="myText">
	</cfform>
	<hr />
	And this is the bound div container.<br />
	<cfdiv bind="{myText@keyup}"></cfdiv>

This is similar to our first example, with the only difference being that the contents of the div are updated as each key is pressed. This works in a manner similar to CFC, JavaScript, and URL bindings. We might also consider binding other elements on a click event, such as a radio button. The following example shows another feature. We can pass any DOM attribute by putting that as an item after the element id. It must be placed before the @ symbol, if you are using a particular event. In this code, we change the input in order to have a class in which we can pass the value of the class attribute and change the binding attribute of the cfdiv element.

	<cfform id="myForm" format="html">
		This is my edit box.<br />
		<cfinput type="text" name="myText" class="test">
	</cfform>
	<hr />
	And this is the bound div container.<br />
	<cfdiv bind="{myText.class@keyup}.{myText}"></cfdiv>

Here is a list of the events that we can bind.

• @click


• @keyup


• @mousedown


• @none

The @none event is used for grids and trees, so that changes don’t trigger bind events.

Extra Binding Notes

If you h ave an ID on your CFForm element, then you can refer to the form element based on the container form. The following example helps us to understand
this better.

	Bind = "url:bindsource.cfm?myEdit={myForm:myText}"

The ColdFusion 8 documents give the following guides in order to specify the binding expressions.

1. cfc: componentPath.functionName (parameters)

   The component path cannot use a mapping. The componentPath value
   must be a dot-delimited path from the web root or the directory that
   contains the page.



2. javascript: functionName (parameters)


3. url: URL?parameters


4. ULR?parameters


5. A string containing one or more instances of {bind parmeter}, such as {firstname}.{lastname}@{domain}

The following table represents the supported formats based on attributes and tags:

Multiple Radio Buttons or Check Boxes and Multiple Select

We can also do binding of multiple radio buttons or check boxes. This is done by giving the same name attribute to the radio button collection or to the check box. We can use unique IDs to allow the use of the HTML <label></label> tags for extending the selection to the contents of for tags, based on the usage of the matching ID of the check boxes or radio buttons. In HTML, the use of a for tag would appear like the following, thus making the user interface better.

	<label for='firstRadio'>
		<input id='firstRadio' value='1' type='radio'>
	</label>

When we have check boxes or multiple select, the results of the bind are treated like a list. If more than one item is selected, they are stored by separating them with commas similar to any other returning form data.

Spry Binding

Spry is an independent AJAX library that works with the browser DOM. Spry uses the same curly bracket type of parameters for binding. There are some differences in implementation though. Another thing that you can bind to your forms is the Spry data in what is called a Spry dataset. You would do that as shown in this example:

	{spryDataset.dataField}

If we wish to bind deeper into a Spry dataset in more detail, we can use standard Spry dataset notation to refer to the data.

To include a literal brace character in a bind expression, excape the character with a backslash.

CFAJAXProxy

This is another very popular AJAX programming feature. This tag allows us to bind AJAX component changes to CFCs, JavaScript, and URLs without the requirement of an AJAX component to pass through it. It also allows us to interact with CFCs directly from JavaScript without binding to any other AJAX component. The JavaScript interface is created for us, and we can reuse the CFC as if it was present locally inside the browser JavaScript. It is very simple and acts as a good solution. Let’s take a look at how it works.

CFAJAX Proxy Binding

We are going to build two text boxes that do arithmetic. The application only adds or subtracts. The first line of our code binds to the radio button set with the name calcType. We will bind to the click event. When either of the buttons is clicked, the call is made to the JavaScript function doCalc() passing the value of the radio button selected. Then the JavaScript function extracts the values of the two boxes and makes sure that they are fl oating-point numbers. If we didn’t convert them, it would see them as text, and append the first text item to the second text item, or we would get some sort of error in subtraction. Then the results are stored and displayed with the alert function.

	<cfajaxproxy bind="javascript:doCalc({calcType@click})">
		<cfform id="myForm" format="html">
			Enter Two Numbers.<br />
			<cfinput type="text" name="number1" id="number1"><br />
			<cfinput type="text" name="number2" id="number2"><br />
			<label for="calcAdd">
			<cfinput type="radio" value="add"
				name="calcType" id="calcAdd">
				Add</label><br />
			<label for="calcSubtract">
				<cfinput type="radio" value="subtract"
					name="calcType" id="calcSubtract">
					Subtract</label><br />
		< /cfform>
		<script>
			doCalc = function(thisCalc){
				var myResult = 0;
				var number1 = parseFloat(document.getElementById('number1').
					value);
				var number2 = parseFloat(document.getElementById('number2').
					value);
				switch(thisCalc){
					case 'add':
						myResult = number1 + number2;
						break;
					case 'subtract':
						myResult = number1 - number2;
						break;
				}
			alert(myResult);
		}
		</script>

This is what we would see if we entered ’23’ and ’11’ and had selected the subtract
radio button:

We could have sent the results to either a CFC or URL as we did earlier. We do not need to have visible results in this example either, but it was just to show what was going on. We can see that one of the uses of CFAJAXProxy is to bind.

CFC Proxy Class Objects

An other use of CFAJAXProxy is to extend the remote methods of a CFC into the currently loaded AJAX page on the browser. This function is not binding, but rather an actual proxy. This means that we will extend the functionality of the remote methods right into the web page without writing extensive code. We will be converting our math webpage to support multiplication and division. We could do this easily in the browser. But we want to show the power of extending CFCs, so we will add these two functions in our CFC and work with them from there.

	<cfajaxproxy bind="javascript:doCalc({calcType@click})">
		<cfajaxproxy cfc="serverMath" jsclassname="remoteMath">
			<cfform id="myForm" format="html">
				Enter Two Numbers.<br />
				<cfinput type="text" name="number1" id="number1"><br />
				<cfinput type="text" name="number2" id="number2"><br />
				<label for="calcAdd">
				<cfinput type="radio" value="add"
					name="calcType" id="calcAdd">
				Add</label><br />
				<label for="calcSubtract">
				<cfinput type="radio" value="subtract"
					name="calcType" id="calcSubtract">
					Subtract</label><br />
				<label for="calcMultiply">
				<cfinput type="radio" value="multiply"
					name="calcType" id="calcMultiply">
					Multiply</label><br />
				<label for="calcDivide">
				<cfinput type="radio" value="divide"
					name="calcType" id="calcDivide">
					Divide</label><br />
			</cfform>
			<script>
				jsMath = new remoteMath();
				doCalc = function(thisCalc){
				var myResult = 0;
				var number1 = parseFloat(document.getElementById('number1').
					value);
				var number2 = parseFloat(document.getElementById('number2').
					value);
				switch(thisCalc){
					case 'add':
						myResult = number1 + number2;
						break;
					case 'subtract':
						myResult = number1 - number2;
						break;
					case 'multiply':
						myResult = jsMath.doMultiply(number1,number2);
						break;
					case 'divide':
						myResult = jsMath.doDivide(number1,number2);
						break;
				}
				alert(myResult);
				}
			</script>

The first modification to our code is to use the CFAJAXProxy tag in order to generate a proxy connection to the remote CFC component. We use an alias name of remoteMath for this component. This becomes a JavaScript class that helps in creating a local object that proxies between this page and our CFC. We then add two more radio buttons so that we have an interface for doing the multiplication function and the division function in our example. The next new line is where we create an object called jsMath in this example. This is not actually JavaScript math, but a JavaScript object that uses the remoteMath class to build an object for communicating with the CFC. Lastly, we check the value of the selected radio button. Then we use our jsMath object, and communicate with the remote server. The name of the remote method is the same as we use on our object and then we pass the argument parameters to the server. The return value is put in our myResult variable just as we did from JavaScript in add and subtract. If we use the same numbers and click Divide, the following result will be obtained. Here is the screenshot of the page in action and the CFC code.

	<cfcomponent output="false">
		<cffunction name="doDivide" access="remote">
			<cfargument name="number1">
			<cfargument name="number2">
			<cfreturn arguments.number1 / arguments.number2>
		</cffunction>
		<cffunction name="doMultiply" access="remote">
			<cfargument name="number1">
			<cfargument name="number2">
			<cfreturn arguments.number1 * arguments.number2>
		</cffunction>
	</cfcomponent>

Now in a real-world application, we might be looking for some data or updating a database if we were doing this type of proxy function interaction. The point is that all the coupling and AJAXing is done with little code. It is truly a remarkable work as the Adobe engineers have worked hard for this connectivity. This is how ColdFusion has become better than ever before!
One thing that we have not yet dealt with is the callback functions. There are two standard types of callback object methods in remote CFC proxy classes, the setCallbackHandler() method and the setErrorHandler() method. We are going to modify our code so that the results are automatically sent to these handlers with our CFC interaction. Here is the final code for our examples.

	<cf ajaxproxy bind="javascript:doCalc({calcType@click})">
		<cfajaxproxy cfc="serverMath" jsclassname="remoteMath">
			<cfform id="myForm" format="html">
				Enter Two Numbers.<br />
				<cfinput type="text" name="number1" id="number1"><br />
				<cfinput type="text" name="number2" id="number2"><br />
				<label for="calcAdd">
				<cfinput type="radio" value="add"
					name="calcType" id="calcAdd">
					Add</label><br />
				<label for="calcSubtract">
				<cfinput type="radio" value="subtract"
					name="calcType" id="calcSubtract">
					Subtract</label><br />
				<label for="calcMultiply">
				<cfinput type="radio" value="multiply"
					name="calcType" id="calcMultiply">
					Multiply</label><br />
				<label for="calcDivide">
				<cfinput type="radio" value="divide"
					name="calcType" id="calcDivide">
					Divide</label><br />
			</cfform>
			<script>
				jsMath = new remoteMath();
				doCalc = function(thisCalc){
				var number1 = parseFloat(document.getElementById('number1').value);
				var number2 = parseFloat(document.getElementById('number2').value);
				jsMath.setCallbackHandler(showResult);
				jsMath.setErrorHandler(showError);
				switch(thisCalc){
					case 'add':
						showResult(number1 + number2);
						break;
					case 'subtract':
						showResult(number1 - number2);
						break;
					case 'multiply':
						jsMath.doMultiply(number1,number2);
						break;
					case 'divide':
						jsMath.doDivide(number1,number2);
						break;
				}
				}
				showResult = function(result){
					alert(result);
				}
				showError = function(statusCode,statusMsg){
					alert("status: "+statusCode+"\n"+statusMsg);
				}
			</script>

We set the callback handers inside our doCalc() function for the jsMath object. These methods are default names in the ColdFusion AJAX plumbing. It should be noted that we do not want to create remote methods with these names in our CFCs. We removed the variable that we were using and have now created another function called showResult() for handling the addition and subtraction. Now, let us look at the multiply case statement block and the divide case statement block for our code. There is no evidence as to how the output from these calls is being handled. This is why we have declared the setCallbackHandler() and setErrorHandler() methods. In those methods, we put the name of the callback handler functions without their parents. This is a standard way to handle the referencing of a callback handler in JavaScript. We can see that the standard parameters are passed to the error handler. Run the modified code and pass in a zero for the bottom number, and
this is what you will see. We could produce much more elaborate code for handling the error. We could pass structured code back to the success method, and do much more there also. We kept this example as simple as possible to help us understand the power and features of how ColdFusion AJAX programming works for both binding and proxy functions.

This handles all the data type conversions between ColdFusion and browser JavaScript variables and structure. This makes ColdFusion the easiest and fastest application for doing AJAX. Also, this platform provides a high level of power and ease to developers.

Client Debugging

There are a number of tools that can make AJAX programming more effective. We will look at Firebug and the built-in debugger that is a part of ColdFusion.

Firebug

One of the best tools available for AJAX development is Firebug. This tool is a plugin for Firefox with many abilities. The one we will look at specifically here is the ability to drill down into the DOM structure of a browser page. We are going to look at how this tool works. First, we will have a look at the previous example and take the radio button for our divide selection. Here is a screenshot of the page in which we run firebug. Refer to http://www.getfirebug.com/ for the features of this plug-in.

We see the Inspect menu item at the top. If we click on it, then we will be able to click on the radio button besides the Divide text. This in turn will give us the following in our console view.

If we then go to the right pane of firebug and click on the DOM item, we will get the structure details of the object. There are several types of objects that are explained in detail in ColdFusion and this gets loaded with AJAX pages. These can be entered by clicking on the Console tab present in the left panel. Then as you can see, you have an entry line at the bottom where you can enter any DOM object name or any JavaScript function, and it will allow us to see what is available with that item. If you’re going to dive deeper into AJAX, these are the tools to make the journey much simpler. If you don’t have a library loaded that supports it, you can still use the common DOM element shortcut. This means that for the radio button above with the id calcDivide, we could use the full DOM of document.getElementById
(calcDivide) or we can use the shortcut version $(‘calcDivide’), and press Enter.

Now, we do n’t see the item within the context of the HTML page. We just see the item we have requested. If we were calling an existing JavaScript structure or a simple value, we would see that too. With a similar item, we can click on it, and then have a look at the DOM model for that particular item as we did earlier. The additional items that the ColdFusion AJAX includes are listed here. We would just
enter them in the prompt line as we did for the radio button ID.

• ColdFusion.Layout.getBorderLayout (name)


• ColdFusion.Grid.getGridObject (name)


• ColdFusion.Layout.getTabLayout (name)


• ColdFusion.Tree.getTreeObject (name)


• ColdFusion.Window.getWindowObject (name)

To get more information about these topics, you can look at the ColdFusion documents that consist of EXT and YUI library files. The name of course is the same as you assigned while creating the item. Also, we need to remember that JavaScript is case sensitive.

Built-In Debugging

This is a very useful feature. All you have to do is to change the URL in the address bar to get this working. Now, if you are running ColdFusion on a live site, this feature should be shut off in the ColdFusion Administrator. Here is the URL with and without debugging. The only difference is we have added an extra variable to the URL. Just add it to the last variable after the question mark in the URL.

http://localhost/cfb/code/chapter_10/bind_7.cfm
http://localhost/cfb/code/chapter_10/bind_7.cfm?cfdebug

Here is the screenshot of the debugging window.

We can see that there are a number of features to this debugging window. We can Collapse the window to get it out of the way. It can also be dragged around the screen to move it out of the way, if collapsing is not enough. It is dragged by holding the mouse button down over the dark grey area where the title is. We can toggle to obtain information on the type of debugging. This will also toggle the information that is already present. When we have more information, it will create a scroll bar so as to move through the log. The pause and clear buttons are great features.

Logging Features

Not only is deb ugging built in, but the system is designed to allow us to send logging to the window so that it becomes easier. Let’s open our Firebug console and log the element we were looking at earlier. There are a number of logging features, and it is a better way for managing our build or debugging interaction with the logger.

Here, we observe that we do not get as many details as we used to get in the DOM panel of the Firebug console. Remember that the $() shortcut is a part of Firebug. Normally, you either need to have that in another AJAX library, or you have to use the old method that we mentioned earlier. Here are the types of log functions that are included with the debugger.

• ColdFusion.Log.dump


• ColdFusion.Log.debug


• ColdFusion.Log.error


• ColdFusion.Log.info

The ColdFusion .Log.dump has a special function whereas the remaining three only change the tag that is before the log item. One thing that can be done is to design custom tags and CFCs, so that they have a ‘test’ mode that can be run. This would allow them to interact with the debugging tools and make a more sustainable product. This would mean there would be more quality assurance for all our software.

Customization

When it comes to coding, there are many things that can be done. This is a two-fold scenario. The primary way to customize is more on design than on coding. If we are inclined, we can actually go as far as replacing all the code of core AJAX functions. Generally, before going that far, it might be a better idea to look at individual libraries and see if there is something present already that can help us achieve
our goals.
We are going to look at another tag in ColdFusion 8 known as <CFAjaxImport/>. Most of the look-and-feel of the AJAX tags is controlled by CSS files. Using this tag, we can substitute custom styles for these tags. This will be coded as in the given example. The cssSrc attribute specifies the URL, relative to the web root of the directory that contains the CSS files used by ColdFusion AJAX features, with
the exception of the rich text editor. This directory must have the same directory structure, and contain the same CSS files, and image files required by the CSS files, as the web_root/CFIDE/scripts/ajax/resources directory.

	<cfAjaxImport cssSrc="/mySite/myCSS/">

We can also change the scriptSrc attribute. Similar to CSS styles, you need to include structure of the same scripts as found in the /cfide/scripts/ directory. This is where hackers can extend the core power that ships in ColdFusion. If you use this attribute, you will not be able to use it more than once in a request. Another important thing about this tag is the ability to declare the AJAX tags that need modification. As developers, we often forget, as we think about code, the challenge of designing a site to the owner’s satisfaction. We are often negligent in this aspect. The following table shows the tags that can be put in the tag attribute list to set what is modified by the cfAjaxImport tag.

Automatically Wired AJAX Links

This function allows you to connect the links inside a cfdiv, cflayoutarea, cfpod, or cfwindow control to the containing control. This code would load the local file as the content of the container. It will not load a file from a remote site to protect it from cross-site script attacks.

	<cfdiv height="600" width="600" name="ajaxDiv">
		<cfoutput>
			<a href="#AjaxLink('LinkOne.cfm')#">Link One</a>
			<br />
			<a href="#AjaxLink('LinkTwo.cfm')#">Link Two</a>
		</cfoutput>
	</cfdiv>

Execute JavaScript after Loading Content

There are two times when content is loaded. First, when the page is loaded and then when the content within a section such as a cfdiv, cflayoutarea, cfpod, or cfwindow is loaded. You want the browser DOM to be created before any JavaScript is called. This function helps in ensuring that the code isn’t run prematurely. Here is an example of how to run the command when the whole page is loaded.

	<html>
	<head>
	<title>Enter Mail Login Details</title>
	<script>
		init = function() {
			ColdFusion.Window.show('loginwindow');
		}
	</script>
	</head>
	<body>
		<cfwindow name="loginwindow" title="Enter Login Details"
			draggable="false" closable="false" resizable="false"
			width="450" height="200">
			<cfoutput>
				<form action="#cgi.script_name#" method="post" name="loginform">
					<table width="400" class="loginTable" cellpadding="5">
						<tr>
							<td>username:</td>
							<td><input type="text" name="username"></td>
						</tr>
						<tr>
							<td>password:</td>
							<td><input type="password" name="password"></td>
						</tr>
						<tr>
							<td> </td>
							<td><input type="submit" name="login" value="Login"></td>
						</tr>
					</table>
				</form>
			</cfoutput>
		</cfwindow>
		<cfoutput>
			<form action="#cgi.script_name#" method="post" name="changePasswor
				dForm">
				<table width="400">
					<tr>
						<td>old password:</td>
						<td><input type="password" name="password"></td>
					</tr>
					<tr>
						<td>new password:</td>
						<td><input type="password" name="password"></td>
					</tr>
					<tr>
						<td> </td>
						<td><input type="submit" name="login" value="Login"></td>
					</tr>
				</table>
			</form>
		</cfoutput>
		<cfset AjaxOnLoad("init")>
	</body>
	</html>

This example is a little longer than our previous examples. But it makes sure that the user is logged in before he or she attempts to change a password. It’s not a complete example but is intended to explain in a real-world application how to use the tag for illustration purposes. There are missing pieces. So DO NOT use it as it is!

Other Cool Commands

There are three JSON functions built into ColdFusion. Most of the time, you will find this is used in CF8 AJAX, where it is handled automatically. Yet, if you are working with Yahoo data or sending something to jQuery, then you might require the ability to work with JSON data along with built-in functions. You can dump the results with CFDump on the server side, and with the debugging dump function.

• JSONencrypt() converts to JavaScript object notation


• JSONdecrypt() converts from JavaScript object notation


• isJSON() checks to see if a variable’s content is in a valid JSON format

Spry is an AJAX library created by ADOBE. It does many amazing things. The first time I came across the curly bracket data alias style of coding that we use in ColdFusion AJAX was in Spry. Shortly thereafter, I also found similar practice in ActionScript coding. This may not have been the first time it came to my attention. If we are going to work with Spry AJAX pages, then we need to convert data to Sprybased
data for in-browser usage. The ins and outs of Spry could end up being as much text as we have on CFAJAX, if not more.

• CFSpryDataset()

Post for CFAJAX Calls

We will complete this chapter with a tip on how to send data to the browser via Post, instead of sending it via standard URL variables. We can send more data through a Post than we can though URL style variables.

	<html>
	<head>
		<script type="text/javascript">
			function cfcViaPost()
			{	
				Var pickyObject = new pickyCFC();
				pickyObject.setHTTPMethod("POST");
				pickyObject.doSomething();
			}
		</script>
	</head>
	<body>
		<cfajaxproxy cfc="pickyCFC">
			<cfinput type="button" name="test" onclick="cfcViaPost();">
	</body>
	</html>

also read:

• DOJO Tutorials
• jQuery Tutorials

Summary

It seems to me like there were so many subjects it was hard to tell where to stop. With that said you should think there is still plenty of content that isn’t contained in this chapter. We have covered the following:

• Binding between object data and container objects


• Binding between CFCs and container objects


• Binding between URLs and container objects


• Binding between JavaScript and container objects


• How to make binding objects event sensitive


• Binding on multi-item objects like radio buttons, check boxes or multi-select boxes


• CFAJAXproxy for binding objects to JavaScript functions


• CFAJAXproxy to extend connectivity of CFCs to JavaScript class objects


• Success and Exception Handling on CFC proxy class objects execution