Your SlideShare is downloading. ×
Building AJAX applications with Adobe Spry, ColdFusion, and ...
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building AJAX applications with Adobe Spry, ColdFusion, and ...


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Building AJAX applications with Adobe Spry, ColdFusion, and JQuery
  • 2. Topics
    • AJAX ToolkitMania!
    • ColdFusion 8 Key Concepts
    • Adobe Spry Key Concepts
    • JQuery Key Concepts
  • 3. AJAX ToolkitMania!
    • Every library has core strengths and weaknesses
    • ColdFusion 8
      • Ext-JS datagrid
      • <cfinput> bind expressions
      • FCK WYSIWYG editor
      • Perform data fetch with <cfajaxproxy>
      • Virtual windowing API with <cfwindow>
      • Ability to act as a proxy for a data request from a remote domain via <cfhttp> or <cffeed>
    • Spry
      • AJAX Toolkit for web designers
      • Easy to use HTML tag markup syntax
      • Powerful layout and effects components
      • Easy to deploy form validation via Dreamweaver CS3/CS4
      • Compatible with Adobe AIR
    • JQuery
      • Powerful DOM Maniupulation
      • Robust Plug-in/Extensions library
      • 3 rd party support (even Microsoft likes it!)
      • Compatible with Adobe AIR
  • 4. ColdFusion 8 Key Concepts
    • Interacting with ColdFusion components via <cfajaxproxy>
    • Working with bind expressions
  • 5. <cfajaxproxy>
    • Quickly and efficiently allows you to make hidden data requests to a ColdFusion component
    • Once a proxy has been established, you can define a JavaScript error handler that will be triggered if the CFC method fails for any reason
    • You can also define a success handler that will receive a native Javascript data type returned from your component methods
  • 6. <cfajaxproxy> example <cfajaxproxy cfc=&quot;employee&quot; jsclassname=&quot;cfcEmployee&quot;> <script language=&quot;JavaScript&quot;> errorHandler = function(statusCode,statusMsg) { alert(statusCode + ': ' + statusMsg) } successHandler = function(result) { var str = &quot;&quot;; for (var i=0; i<result.length; i++) { str = str + &quot; &quot; + result[i].LASTNAME + ',' + result[i].FIRSTNAME + ' '; } alert(&quot;Matches: &quot; + str); } getName = function() { var username = prompt(&quot;Enter the user id&quot;,&quot;&quot;); if (username != null) { /* instantiate CFC */ var employeeObj = new cfcEmployee(); /* configure responders */ employeeObj.setErrorHandler(errorHandler); employeeObj.setCallbackHandler(successHandler) /* invoke method */ employeeObj.getbylastname(username); } } </script>
  • 7. Working with BIND expressions
  • 8. Adobe Spry Key Concepts
    • Introduction to Spry
    • Installing Spry
    • Debugging Spry
    • Retrieving Data with Spry
    • Working with Data
    • Working with JSON
    • Spry Widgets
    • UI Widgets
    • Loading Data into Spry Fields
    • Posting Form Data from Spry
  • 9. Introduction to Spry
    • JavaScript library for web designers providing functionality that allows designers and developers to build pages that provide a richer experience for their user
    • Designed to bring AJAX to the web design community
    • Spry's data handling capabilities enable designers to incorporate XML, JSON, and HTML Table data
    • The Spry framework is HTML-centric, and easy to implement for users with basic knowledge of HTML, CSS and JavaScript
    • Adobe has included easy to use design-time widgets for Spry into Dreamweaver CS3
    • Direct support in the Eclipse-based Aptana IDE
    • Can be used with AIR – the Adobe Integrated Runtime
  • 10. Installing Spry
    • Spry is packaged as a zip file, containing a number of JavaScript and CSS files that are necessary for its operation
    • Articles In-depth articles describing how to use Spry
    • Data XML data used in the examples
    • Demos Sample applications
    • Includes Core Javascript files for accessing data
    • Includes_minified Minified copies of the core JavaScript files where all extraneous white space and comments have been removed, resulting in faster download times.
    • Includes_packed Packed copies of the JavaScript files
    • Samples Examples that focus on a specific component of Spry
    • Widgets JS and CSS files for the user-interface components of Spry
    • Best Practice: create a /SPRYAssets/ directory off of your web root and including the contents of includes_minified, as well as all of the .CSS files from the /Widgets/ folder.
    • Note that an older version of Spry comes bundled with ColdFusion 8
  • 11. Debugging Spry
    • A DOM Element inspector
    • A line console for interactive debugging
    • Outputs the contents of any debug.log() invocations that you have in your code.
    • Implementing the debugger
      • SpryDebug.css
      • SpryDebug.js
  • 12. Additional JS Debuggers
    • FireBug plug-in for Mozilla
    • Microsoft Internet Explorer Web Developer toolbar
    • ColdFusion AJAX Debug Log Window (append ?cfdebug to your URL)
  • 13. Retrieving and Displaying Data with Spry
    • Generate data from your application server (ColdFusion) in a Spry compatible format (XML, JSON, HTML)
    • Use the Spry Dataset Constructor to make an http request to your application server that outputs the structured data
    • Define output areas on your page and how they are to formatted
    • Periodically refresh data from the server without a full-page reload
  • 14. Generating data from ColdFusion
    • All of your business logic and code that accesses &quot;back office&quot; resources should be encapsulated within ColdFusion Component (CFC) methods
    <cfcomponent output=&quot;false&quot;> <cfset dsn = &quot;ftajax100-lab&quot;> <cffunction name=&quot;get&quot; access=&quot;public&quot; returntype=&quot;query&quot;> <cfset var q = &quot;&quot;> <cfquery name=&quot;q&quot; datasource=&quot;#dsn#&quot;> select * from [user] </cfquery> <cfreturn q> </cffunction> </cfcomponent>
  • 15. Generating Data from ColdFusion
    • Add additional methods to format your queries into XML, JSON
    • CFC method access type must be set to REMOTE
    <cffunction name=&quot;getASXML&quot; returntype=&quot;xml&quot; access=&quot;remote&quot; output=&quot;false&quot;> <cfset var q = get()> <cfset var xData = &quot;&quot;> <cfxml variable=&quot;xData&quot;> <employees> <cfoutput query=&quot;q&quot;> <employee> <lastname>#q.lastname#</lastname> <firstname>#q.firstname#</firstname> <email></email> </employee> </cfoutput> </employees> </cfxml> <cfreturn xData> </cffunction>
  • 16. Making an HTTP Request to Execute a CFC Method http://[server]/[directory]/employee.cfc?method=getAsXML Additional parameters to CFC methods can be passed in using standard url syntax: http://[server]/[directory]/employee.cfc?method=getAsXML&param1=value1&param2=value2
  • 17. Walkthrough 1 Preparing for Development with Spry
  • 18. Retrieving Data with Spry
    • Use the Spry Data constructor
    • The constructor is defined within the sprydata.js file
    • Additional Spry components must be included, depending on the datatype of the content being fetched
    • Any attempt to load data from a domain other than the one that your GUI is on will result in a security exception
    • Use CF as a proxy, if necessary
    <script language=&quot;JavaScript&quot; src=&quot;/SpryAssets/xpath.js&quot;></script> <script language=&quot;JavaScript&quot; src=&quot;/SpryAssets/sprydata.js&quot;></script> <script language=&quot;JavaScript&quot;> var ds1 = new Spry.Data.XMLDataSet( &quot;/ftajax100/data/users.xml&quot;,&quot;employees/employee&quot;); </script>
  • 19. Working with Spry Data in JavaScript
  • 20. Outputting the contents of Spry Data
    • A Spry dynamic region is an area on the page that displays the data and automatically updates the data display whenever the data set is modified
    • Spry dynamic regions are defined by attaching a spry:region attribute to an html tag. Using spry:region is analogous to using the <cfoutput> tag in ColdFusion
    • Loop through a Spry dataset by attaching a spry:repeat attribute to a nested html tag
  • 21. Outputting the contents of Spry Data <script src=&quot;/SpryAssets/xpath.js&quot; language=&quot;javascript&quot;> </script> <script src=&quot;/SpryAssets/sprydata.js&quot; language=&quot;JavaScript&quot; > </script> <script language=&quot;JavaScript&quot;> var ds1 = new Spry.Data.XMLDataSet (&quot;/ftajax100/data/employees.xml&quot;, &quot;employees/employee&quot;); </script> <div spry:region=&quot;ds1&quot;> <div spry:repeat=&quot;ds1&quot;> {ds1::lastname}, {ds1::firstname} </div> </div> (employees.xml) <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <employees xmlns=&quot;;> <employee id=&quot;1&quot;> <lastname>Drucker</lastname> <firstname>Steve</firstname> </employee> <employee id=&quot;2&quot;> <lastname>Perry</lastname> <firstname>Jason</firstname> </employee> </employees>
  • 22. Working with Data
    • XML (Extensible Markup Language)
    • JSON (JavaScript Object Notation)
    • HTML tables
  • 23. Working with JSON
    • Represents complex data structures as JavaScript variable declarations
    • When outputting JSON for Spry, you must send a content header of application/json
    • Simple to deserialize – use the eval() method
    • Data representation is very lightweight
    • Easier to manipulate, particularly if they you don't have much experience with XML/XPATH
  • 24. Generating JSON from ColdFusion
    • ColdFusion 8 can automatically serialize its native data structures into JSON by using the serializeJSON() function
    • Note the use of <cfoutput> vs. <cfreturn>
    <cffunction name=&quot;getAsJSON&quot; access=&quot;remote&quot; returntype=&quot;void&quot;> <cfargument name=&quot;username&quot; type=&quot;string&quot; default=&quot;&quot;> <cfset var q = &quot;&quot;> <cfquery name=&quot;q&quot; datasource=&quot;#dsn#&quot;> select * from [user] where 0=0 <cfif arguments.username is not &quot;&quot;> and lastname like <cfqueryparam cfsqltype=&quot;cf_sql_varchar&quot; value=&quot;#arguments.username#%&quot;> </cfif> </cfquery> <cfoutput>#serializeJSON(q)#</cfoutput> </cffunction>
  • 25. Retrieving query data serialized as JSON with Spry
    • Include 2 libraries
      • SpryData.js
      • SpryJSONDataSet.js
    • You can only access column data by their indicies
    • You need to specify a filter in order to select only the data, not the column titles.
    • Use the useCache:false option if your data will be changing frequently.
  • 26. Using JSON Data <html><head> <script language=&quot;JavaScript&quot; src=&quot;/SpryAssets/sprydata.js&quot;></script> <script language=&quot;JavaScript&quot; src=&quot;/SpryAssets/SpryJSONDataSet.js&quot;></script> <script language=&quot;JavaScript&quot;> var ds1 = new Spry.Data.JSONDataSet( &quot;employee.cfc?method=getAsJSON&quot;, {path:&quot;DATA&quot;,useCache:false }); </script> </head> <body> <div spry:region=&quot;ds1&quot;> <div spry:repeat=&quot;ds1&quot;> {ds1::2}, {ds1::1} </div> </div> … </body></html>
  • 27. Refactoring query data for JSON
    • In the prior example, query columns were referenced by position – not a best practice
    • Before returning query data as JSON, you reformat it into an array of structures
    <cffunction name=&quot;getAsJSON&quot; access=&quot;remote&quot; output=&quot;true&quot; returntype=&quot;void&quot;> <cfset var aresult = arraynew(1)> <cfset var q = get()> <cfset var stdata = structnew()> <cfloop query=&quot;q&quot;> <cfset stData = structnew()> <cfset stdata.firstname = q.firstname> <cfset stdata.lastname = q.lastname> <cfset => <cfset arrayAppend(aResult,stData)> </cfloop> <cfoutput>#serializejson(aResult)#</cfoutput> </cffunction>
  • 28. Refactoring Query Data for JSON <script language=&quot;JavaScript&quot; src=&quot;/SpryAssets/sprydata.js&quot;></script> <script language=&quot;JavaScript&quot; src=&quot;/SpryAssets/SpryJSONDataSet.js&quot;></script> <script language=&quot;JavaScript&quot;> var ds1 = new Spry.Data.JSONDataSet(&quot;employee.cfc?method=getAsJSON&quot; ,{useCache:false }); </script> <div spry:region=&quot;ds1&quot;> <div spry:repeat=&quot;ds1&quot;> {ds1::LASTNAME}, {ds1::FIRSTNAME} </div> </div>
  • 29. Formatting JSON data into HTML Tables using spry:sort
    • Allows you to sort data by a specific column or columns.
    • Columns can be set to sort on up to three fields and you can set the sort order to either ascending or descending
    • Steps
      • Wrap the entire table in a spry:region tag
      • Placing a spry:repeat into the <tr> tag block that contains your data.
      • Place a spry:sort attribute into the <th> tags to sort the recordset and redraw the table.
  • 30. Using Alternating Row Colors in a dynamic table
    • Deploy the spry:even attribute into the <tr spry:repeat>
    • Applies the specified style class to an object if the output row number is even
    • Conversely, spry:odd will apply a specified style to an object if the row number being output is an odd number.
  • 31. Spry Table <html> <head> <style>.altColor {background-color: yellow;}</style> <script language=&quot;JavaScript&quot; src=&quot;/SpryAssets/sprydata.js&quot;></script> <script language=&quot;JavaScript&quot; src=&quot;/SpryAssets/SpryJSONDataSet.js&quot;></script> <script language=&quot;JavaScript&quot;> var ds1 = new Spry.Data.JSONDataSet(&quot;/ftajax100/walk/employee.cfc?method=getAsJSON&quot;,{useCache:false }); </script> </head> <body> <div spry:region=&quot;ds1&quot;> <table border=&quot;1&quot;> <tr> <th spry:sort=&quot;LASTNAME&quot;>Last Name</th> <th spry:sort=&quot;FIRSTNAME&quot;>First Name</th> </tr> <tr spry:repeat=&quot;ds1&quot; spry:even=&quot;altColor&quot;> <td>{LASTNAME}</td> <td>{FIRSTNAME}</td> </tr> </table> </div> </body></html>
  • 32. Walkthrough Creating Dynamic Tables
  • 33. Spry Widgets
    • Spry also supports a number of data-aware user interface &quot;widgets&quot; that allows you to easily enhance the usability of your web application
      • Form Field Replacements
      • User Assistance Widgets
      • User Interface Widgets
    • Widgets have their own distinct JavaScript library and css file associated with them. Both of these files must be included in order for the widget to function properly.
    • Demos for each of the widgets are available in the /Spry/Articles/ directory.
  • 34. Spry Form Field Widgets
    • Text Field
    • Password
    • TextArea
    • Radio Button
    • Select Box
    • Check Box
    • Confirm Widget
  • 35. Walkthrough 5-4 Using Spry Validation Text Fields
  • 36. Spry UI Widgets
    • Accordion
    • HTML Panel
    • MenuBar
    • Sliding Panels
    • Collapsible Panel
    • Tabbed Panel
  • 37. Tabbed Panels
    • Horizontal / Vertical Orientation
    • Include scripts
      • SpryTabbedPanels.css
      • SpryTabbedPanel.js
  • 38. Tabbed Panels Example <head> . . . <link href=&quot;/SpryAssets/SpryTabbedPanels.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> <script src=&quot;/SpryAssets/SpryTabbedPanels.js&quot; type=&quot;text/javascript&quot;></script> </head> <body> <div class=&quot;TabbedPanels&quot; id=&quot;T1&quot;> <ul class=&quot;TabbedPanelsTabGroup&quot;> <li class=&quot;TabbedPanelsTab&quot; tabIndex=&quot;0&quot;> Tab 1 </li> <li class=&quot;TabbedPanelsTab&quot; tabIndex=&quot;0&quot;> Tab 2 </li> </ul> <div class=&quot;TabbedPanelsContentGroup&quot;> <div class=&quot;TabbedPanelsContent&quot;> Tab 1 content </div> <div class=&quot;TabbedPanelsContent&quot;> Tab 2 content </div> </div> </div> <script type=&quot;text/javascript&quot;> var TabbedPanels1 = new Spry.Widget.TabbedPanels(&quot;T1&quot;); </script> </body>
  • 39. Walkthrough 5-5 Using the Tabbed Panels Widget
  • 40. Spry Effects
  • 41. Spry Effects
  • 42. Additional Spry / ColdFusion 8 Integration Points
    • ColdFusion includes the complete Spry 1.5 framework release in web_root/CFIDE/scripts/ajax/spry directory
    • <cfsprydataset> - outputs Spry dataset syntax on a page
    • ColdFusion <cfinput> tags can use Spry data sets directly in bind expressions
  • 43. <cfsprydataset> Example <cfsprydataset name=&quot;theItems&quot; type=&quot;json&quot; bind=&quot;CFC:Employee.get(empid={myform:empid})&quot; options=&quot;{usecache:false;}&quot;>
  • 44. Binding Spry Data to <cfinput>
  • 45. JQuery
    • Fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development
    • 55K in length
    • <script src=&quot;;></script>
  • 46. JQuery Basics
    • Basic Syntax / Interacting with other libraries
    • Using Selectors and Events
    • Document Manipulation
    • JQuery Effects
    • Writing your own extensions
  • 47. JQuery Basic Syntax <script src=&quot;../scripts/jquery.js&quot; language=&quot;javascript&quot;></script> <script language=&quot;javascript&quot;> jQuery.noConflict(); // avoid name conflict with Spry jQuery(document).ready(function(){ // essentially a body onload // code goes here }); function fnShowHide() { var cStyle = jQuery('#somecontent').css('display'); if (cStyle == 'block') jQuery('#somecontent').css('display','none'); else jQuery('#somecontent').css('display','block'); } </script> </head> <body> <div id=&quot;somecontent&quot;>This is some content</div> <form> <input type=&quot;button&quot; value=&quot;Hide/Show&quot; onClick=&quot;fnShowHide();&quot; /> </form>
  • 48. Using Selectors and Filters
    • Selectors
      • Find the first element with the class &quot;myclass&quot; jQuery(&quot;.myClass&quot;);
      • Find the element named &quot;mydiv&quot; jQuery(&quot;#mydiv&quot;);
      • Find every DIV element jQuery(&quot;div&quot;);
      • Match any of the selectors jQuery(&quot;p.t1,p.t2,div,span&quot;);
    • Filters
      • :even
      • :odd
      • :eq(index)
      • :gt(index)
      • :lt (index)
      • :header
      • :animated
      • :contains(text)
    jQuery(&quot;tr:even&quot;). css (&quot;background-color&quot;, &quot;#bbbbff&quot;);
  • 49. Using Selectors and Filters Example <script language=&quot;javascript&quot; src=&quot;../scripts/jquery.js&quot;></script> <script language=&quot;javascript&quot;> jQuery.noConflict(); jQuery(document).ready(function(){ // code goes here }); function fnSelectAll(obj) { jQuery(&quot;input[name='topping']&quot;).attr(&quot;checked&quot;,obj.checked); } </script> </head> <body> <form> Select toppings:<br /> <input type=&quot;checkbox&quot; name=&quot;selectall&quot; onClick=&quot;fnSelectAll(this)&quot;/>Select All<br /> <input type=&quot;checkbox&quot; name=&quot;topping&quot; value=&quot;1&quot; />Pepperoni<br /> <input type=&quot;checkbox&quot; name=&quot;topping&quot; value=&quot;2&quot; />Onion<br /> <input type=&quot;checkbox&quot; name=&quot;topping&quot; value=&quot;3&quot; />Tomato<br /> <input type=&quot;checkbox&quot; name=&quot;topping&quot; value=&quot;4&quot; />Meatball<br /> <input type=&quot;checkbox&quot; name=&quot;topping&quot; value=&quot;5&quot; />Squirrel<br /> </form>
  • 50. Walkthrough Using Selectors
  • 51. Document Manipulation
    • html() - extract HTML from matching element jQuery(this).html();
    • html(val) - set HTML of matching element jQuery(this).html(&quot;<h1>Steve was here</h1>&quot;);
    • append(content) - append content to matching elements
    • prepend(content) - prepend content to matching elements
    • after(content) - append content to matching elements
    • remove() - remove matching items from DOM
    • insertAfter(expr) - insert objects after matching objects
    • wrap(html) - wrap matching elements with html
    • replaceWith(content) - replace all matched elements with specified content
    • clone - clone matched DOM elements
  • 52. JQuery Effects
    • show()
    • hide()
    • toggle()
    • animate()
    • stop()
    • dequeue()
    • slideDown()
    • slideUp()
    • slideToggle()
    • fadeIn()
    • fadeOut()
    • fadeTo()
    <div id=&quot;somecontent&quot;>This is some content</div> <form> <input type=&quot;button&quot; value=&quot;Hide/Show&quot; onClick=&quot;jQuery('#somecontent').slideToggle('slow')&quot; /> </form>
  • 53. Walkthrough jQuery Effects
  • 54. jQuery background data requests
    • Able to work around browser domain security issues
    • jQuery.ajax(options) Load a remote page using an HTTP request
    • load(url,data,callback) Load HTML from a remote file and inject into the DOM
    • jQuery.get(url,data,callback,ttype) Load a remote page using an HTTP GET request
    • jQuery.getJSON(url,data,callback) Get JSON data
    • jQuery.getScript(url,callback) Loads and executes a JavaScript
    •,data,callback,type) Loads a remote page using HTTP Post
  • 55. Writing your own JQuery Extensions
    • Very simple to author plugins:
    • A thousand plugins available at
  • 56. Putting it all together
    • Output data from CFC's in JSON format
    • Use <cfajaxproxy> to make background server requests to ColdFusion
    • Use <cfgrid> for grid controls
    • Use <cfwindow> and related API for virtual windowing
    • Use Adobe Spry form field, interface widgets, and dynamic tables
    • Get your designers to use Spry via Dreamweaver CS3/CS4
    • Use jQuery for building mashups from different sites (working around cross-site security issues) and for easy DOM manipulation
  • 57. Questions?