Rich-Internet Anwendungen auf Basis von ColdFusion und Ajax

Transcription

1 Rich-Internet Anwendungen auf Basis von ColdFusion und Ajax Sven Ramuschkat München & Zürich, März 2009

2 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)

3 Traditional Web Application Model Browser makes HTTP call Complete HTML updated

4 Demo 1 Classic ColdFusion Application filling <select>-tags

5 AJAX Web Application Model JavaScript executes in browser & makes HTTP call User Interface (part-html) updated

6 Demo 2 Classic AJAX Application using dynamic XML-Content

7 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

8 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

9 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

10 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

11 ColdFusion AJAX Architecture

12 JSON Support

13 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}

14 XML vs. JSON

15 CFML JSON type mapping

16 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

17 Demo 3 Serialize and Deserialize JSON

18 AJAX Plumbing

19 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

20 AJAX region & data fetch Define AJAX region using <cfdiv> Fetch data for the region using BIND <cfdiv bind= url:foo.cfm >

21 CFDIV Form submission CFFORM inside CFDIV is submitted asynchronously

22 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 >

23 Demo 4 Using Binding with <cfdiv>-tag to pass Parameters Using Binding to fill <cfselect>-tags via CFC-Methods

24 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=

25 Bind

26 Demo 5 Using the Event Value

27 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

28 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.

29 Demo 6 Use CFAJAXPROXY to Call CFC-Functions in JavaScript

30 AJAX Widgets

31 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.

32 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

33 Auto-suggest for input fields autosuggest= attribute on cfinput Takes a list of possible values Can be bound to a dynamic list (array)

34 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

35 Demo 7 Using cfgrid with Paging

36 Ajax Performance vs. Flex Performance Demo Performance Ajax mit DoJo Flex 3.0

37 Questions?