coldfusion 8 developer tutorial phần 3 pot

Normally, you either need to have that in another AJAX library, or you have to use the old method that we mentioned earlier.. The cssSrc attribute specifi es the URL, relative to the web

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 fi les 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 fi les Using this tag, we can substitute custom styles for these tags This will be coded as in the given example The cssSrc attribute specifi es the URL, relative to the web root of the directory that contains the CSS fi les 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 fi les, and image fi les required by the CSS fi les,

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 modifi cation 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 modifi ed by the cfAjaxImport tag

Tag Attribute Value Used For

cfform Forms that are in cfpod, cfwindow, or cfl ayoutarea tag

bodies cfgrid AJAX format cfgrid tags

cfi nput-autosuggest cfi nput tags that use the autosuggest attribute

cfi nput-datefi eld HTML format cfi nput tags that use the datefi eld attribute

cfl ayout-border cfl ayout tags with a type attribute value of border

cfl ayout-tab cfl ayout tags with a type attribute value of tab

cfsprydataset-JSON cfsprydataset tags that generate Spry JSON data sets

cfsprydataset-XML cfsprydataset tags that generate Spry XML data sets

cftextarea HTML format cftextarea tags

cftooltip cftooltip tags

cftree HTML format cftree tags

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 fi le as the content of the container It will not load a fi le 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>&nbsp;</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">

<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>&nbsp;</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 fi nd 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

fi rst 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 fi rst time it came to my attention If

we are going to work with Spry AJAX pages, then we need to convert data to Spry-based 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>

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

•

•

•

•

•

•

•

•

•

Client Debugging with Firefox and Firebug

Client Debugging with CFDebug in the browser

Logging to the Client debugger

Customization for AJAX component CFCs and Scripting

Auto-wired AJAX Links

OnLoad JavaScript function triggering

Overview of JSON features

Sending CFC targeted data via form Post versus URL type data

•

•

•

•

•

•

•

•

Where to buy this book

You can buy ColdFusion 8 Developer Tutorial from the Packt Publishing website: http://www.packtpub.com/coldfusion-8-developer-tutorial/book Free shipping to the US, UK, Europe and selected Asian countries For more information, please read our shipping policy

Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet book retailers

www.PacktPub.com