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

1,745

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,745
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 https://addons.mozilla.org/en-US/firefox/addon/1843
    • Microsoft Internet Explorer Web Developer toolbar http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
    • 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>#q.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;http://www.foo.com/employees&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 stdata.email = q.email> <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
    • http://jquery.com
    • 55K in length
    • <script src=&quot;http://code.jquery.com/jquery-latest.js&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
    • jQuery.post(url,data,callback,type) Loads a remote page using HTTP Post
  • 55. Writing your own JQuery Extensions
    • Very simple to author plugins: http://docs.jquery.com/Plugins/Authoring
    • A thousand plugins available at http://plugins.jquery.com/
  • 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?

×