CF AJAX Programming

November 23, 2009

AJAX

«»

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>

email

«»

Comments

comments