Rich-Internet Anwendungen auf Basis von ColdFusion und Ajax Sven Ramuschkat SRamuschkat@herrlich-ramuschkat.de München & Zürich, März 2009
A bit of AJAX history XMLHttpRequest introduced in IE5 used in Outlook Web Access Microsoft Remote Scripting switched to XMLHttpRequest in 2002 Other browsers added support Jesse James Garrett coined the name in 2005 and the web development world went insane... Asynchronous JavaScript And XML Jesse James Garrett of Adaptive Path (Ajax für XMLHttpRequest)
Traditional Web Application Model Browser makes HTTP call Complete HTML updated
Demo 1 Classic ColdFusion Application filling <select>-tags
AJAX Web Application Model JavaScript executes in browser & makes HTTP call User Interface (part-html) updated
Demo 2 Classic AJAX Application using dynamic XML-Content
AJAX Pro and Cons Pros Cons Improves user experience fewer page refreshes Lowers bandwidth usage only data is loaded Separates data, format, style and function Browser history and bookmarking is hard Network latency can cause unresponsiveness Search engines don't read JavaScript JavaScript behavior differs across browsers
AJAX is complicated AJAX is much more than XMLHttpRequest Also User Interface widgets and controls Well over a hundred libraries out there Dojo, Prototype, Scriptaculous, Spry... Popular libraries are complex pieces of code You often need to know a lot of JavaScript
AJAX and ColdFusion 8 Developer Productivity theme Make it easy to use AJAX Provide a rich set of User Interface controls Enable rich input and output Provide a natural way to handle data management
AJAX and ColdFusion 8 New tags for layout and controls JSON serialization for CFC results Ability to bind data and methods to controls Automatically proxy CFCs in JavaScript ColdFusion 8 AJAX UI controls are based on Yahoo! UI toolkit and Ext JS library
ColdFusion AJAX Architecture
JSON Support
What is JSON? JavaScript Object Notation Representation of data in JavaScript JavaScript can understand JSON, it s a native data format Based on array and object literals of JavaScript Array: [ Benjamin, Michael, Scott ] Object: { color : red, doors : 4}
XML vs. JSON
CFML JSON type mapping
JSON Support in ColdFusion 8 SerializeJSON() Converts ColdFusion objects into their JSON data format DeserializeJSON() Converts JSON data into ColdFusion objects IsJSON() Checks if the data passed to the function is in the JSON format
Demo 3 Serialize and Deserialize JSON
AJAX Plumbing
AJAX Plumbing What you expect from AJAX application Some area of the page gets refreshed, no full page refresh For that to happen, you need New HTML markup for that area To invoke logic on the server to fetch the data
AJAX region & data fetch Define AJAX region using <cfdiv> Fetch data for the region using BIND <cfdiv bind= url:foo.cfm >
CFDIV Form submission CFFORM inside CFDIV is submitted asynchronously
Binding Data to form fields Many ColdFusion Ajax features use binding to provide dynamic interactivity To specify a bind expression, use one of the following formats: cfc:componentpath.functionname(parameters) javascript:functionname(parameters) url:url?parameters Bind expression can use bind parameter directly or pass bind parameter <cfdiv bind= url:divsource.cfm?text={titext} > OR <cfselect bind= cfc:art.getartists() display= name value= id >
Demo 4 Using Binding with <cfdiv>-tag to pass Parameters Using Binding to fill <cfselect>-tags via CFC-Methods
The Event Value Use an at sign (@) to trigger different JavaScript events The following code executes the getchoices CFC each time the user presses the mouse button while the pointer is over the book control: bind= cfc:order.getchoices({inputform:book@mousedown})
Bind
Demo 5 Using the Event Value
Get your CFC functions in JavaScript CFAJAXPROXY Creates a JavaScript proxy for a ColdFusion component Generates a proxy function for every remote function on the cfc
Configuring the CFC proxy The proxy provides several JavaScript functions that you use to control the behavior of the proxy. Use the setcallbackhandler and seterrorhandler functions to specify the resulthandler and faulthandler for asynchronous calls. Use the sethttpmethod function to control whether the call uses a GET HTTP request (the default) or a POST request. etc.
Demo 6 Use CFAJAXPROXY to Call CFC-Functions in JavaScript
AJAX Widgets
UI Components cfdiv An HTML div region that can be dynamically populated. Forms in this region submit asynchronously. cflayout cfpod A horizontal or vertical box, a tabbed region, or a set of bordered regions that can include a top, bottom, left, right, and center regions An area of the browser window with an optional title bar and a body that contains display elements. Forms in this region submit asynchronously. cfwindow A pop-up window within the browser. You can also use the ColdFusion.Window.createWindow function to create a pop-up window. Forms in this region submit asynchronously.
Rich Text Editor cftextarea has a new richtext= true attribute Uses FCKeditor to provide WYSIWYG editor Toolbars are configurable Compatible with IE, FireFox, Mozilla, Netscape Full support for Safari is a work in progress
Auto-suggest for input fields autosuggest= attribute on cfinput Takes a list of possible values Can be bound to a dynamic list (array)
cfgrid New format: HTML full AJAX grid Built-in column sorting, paging Cells can be edited, rows can be deleted Grid data retrieved from bound CFC call
Demo 7 Using cfgrid with Paging http://localhost:8500/cf8demos-v2/
Ajax Performance vs. Flex Performance Demo Performance Ajax mit DoJo Flex 3.0 http://localhost:8700/samples/
Questions?