For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book Chapter 10 [ 215 ] 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. • • • For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book CF AJAX Programming [ 216 ] 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. For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book Chapter 10 [ 217 ] 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. • • • • For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book CF AJAX Programming [ 218 ] 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 cfdiv cfdiv tags 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 cfmenu cfmenu tags cfpod cfpod tags 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 cfwindow cfwindow 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> For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book Chapter 10 [ 219 ] 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> For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book CF AJAX Programming [ 220 ] <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 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() • • • • For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book Chapter 10 [ 221 ] 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 • • • • • • • • • For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book CF AJAX Programming [ 222 ] 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 • • • • • • • • For More Information: www. packtpub.com/coldfusion - 8 - developer - tutorial / book 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 . www. packtpub.com /coldfusion - 8 - developer - tutorial / book 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 Information: www. packtpub.com /coldfusion - 8 - developer - tutorial / book Chapter 10 [ 215 ] ColdFusion. Layout.getTabLayout (name) ColdFusion. Tree.getTreeObject (name) ColdFusion. Window.getWindowObject. in ColdFusion. If you use this attribute, you will not be able to use it more than once in a request. • • • • For More Information: www. packtpub.com /coldfusion - 8 - developer - tutorial / book