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.

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>