From BriansWiki

Contents 1 Advanced AJAX Development 1.1 Rakshith N 1.2 Agenda 1.3 AJAX Overview 1.3.1 Traditional Web page: 1.3.2 AJAX web 1.3.3 ColdFusion AJAX Architecture 1.3.4 JSON support 1.3.5 JSO Type mapping 1.4 AJAX Plumbing 1.5 Binding 1.5.1 Four Types 1.6 CFAJAX PROXY 1.6.1 Built in functions 1.6.2 ColdFusion .navigate 1.6.3 AJAX Link 1.6.4 Ajax on load function 1.6.5 ColdFusion Get Element Value 1.6.6 Logger function 1.7 AJAX UI Widgets 1.7.1 Step 1 - layout the app

[edit] Advanced AJAX Development

[edit] Rakshith N

[edit] Agenda

• AJAX Overview
• JSON support
• AJAX Plumbing
• AJAX Widgets

[edit] AJAX Overview

[edit] Traditional Web page:

The browser makes an http request to server.

[edit] AJAX web

JavaScript sits between the Web page and the server, and makes an asynchronous http call and returns data to the JavaScript function.

[edit] ColdFusion AJAX Architecture

UI Widgets and AJAX Plumbing are able to be bound to UI objects. There is also JSON support which can be used to expose CF data types in JSON format

[edit] JSON support

JavaScript Mapping Object Notation Represents data in JavaScript format Based on arrays and object literals of JavaScript JSON is all about arrays of Data in JavaScript FAT FREE XML! {books: [ {isbn:’000230’, title:’xyz’} ] }

• Serialize JSON()

Convert ColdFusion objects into their JSON Format

• De-serialize JASON

Converts JSON objects back into ColdFusion format

• ISJSO()

Checks if data passed is JSO data

[edit] JSO Type mapping

Simple types

• Array
• Struct
• Query
• Row Format
• Column Format

(look these up for syntax)

[edit] AJAX Plumbing

What to expect from AJAX applications: Some area of the page gets updated For that to happen, you need new HRML markup for that region

You can use a CFDiv Tab to define the region and then bind that to the cfm <cfdiv bond="url.foo.cfm"> CFFORM inside CFDiv is submitted asynchronously.

<cfdiv> <cfform action = "onsubmitthiisform.cfm> <cfinput name="isbn"> </cfform> </cfdiv>

NOTE: This has to be on a <cfform>

[edit] Binding

Bind="cfcbookdata,getbookDetails([bookform:isbn.value@change})" React to UI Control events ([bookform:isbn.value@change Retrieves UI Control values Invokes logic and retrieving markup data

[edit] Four Types

• CFC
• JavaScript
• URL
• Plain

[edit] CFAJAX PROXY

Creates a JavaScript Proxy for ColdFusion component Generates Proxy function for every remote function on cfc <cfajaxproxy cfc = "books" jscclassname = "jsbooks"> <script> Var b = new jsbooks

[edit] Built in functions

• Set HTTP Method
• Set Async mode, set sync mode
• Set callback handler
• Set error handler
• Set query format
• Set return format
• Set form (takes the id of the form and serializes it for you - like $Form in prototype)

[edit] ColdFusion .navigate

• Navigates the contents of the tag
• Specify the http method, custom callback and error handle js function
• Submit a form
• ColdFusion.navigate(url, id, callback)

[edit] AJAX Link

Find the data of the link and place it in the referenced window or div.

[edit] Ajax on load function

Calls an AJAX function when markup is loaded after all CF Components are initialized.

[edit] ColdFusion Get Element Value

[edit] Logger function

(This is a lot like the JSDump library for Javasript debugging) You can control this in the CFAdmin. The following methds are exposed:

• ColdFusion.Log.dump
• ColdFusion.Log..info
• ColdFusion.Log..error
• ColdFusion.Log.debug

[edit] AJAX UI Widgets

[edit] Step 1 - layout the app

Use cfLayout tag to create a splitter Populate it with a cfTreeItem amd bind it to you data Setup folder tree to navigate the app

Use dynamic grid to show details Use cfGrid admin bind it to the data and set the cfColumns to the column names

Create the compose tab with a wsywig editor Create a send button and set the onclick event to a function that creates an ExchangeCFC object sets its properties and data from the wsiwig form The TO box uses the autosuggest="cfc:exchange.getcontacts({cfautosuggestvalue})" NOTE: the data returned from Autosuggest must already be formatted and contained in an array Integrates with CFSPRYDATASETS http://www.rakshith.net/blog CFAJAX Import is used to set the specific location to put your app specific CSS skins