Your SlideShare is downloading. ×
0
Building AJAX applications with Adobe Spry, ColdFusion, and JQuery
Topics <ul><li>AJAX ToolkitMania! </li></ul><ul><li>ColdFusion 8 Key Concepts </li></ul><ul><li>Adobe Spry Key Concepts </...
AJAX ToolkitMania! <ul><li>Every library has core strengths and weaknesses </li></ul><ul><li>ColdFusion 8 </li></ul><ul><u...
ColdFusion 8 Key Concepts <ul><li>Interacting with ColdFusion components via <cfajaxproxy> </li></ul><ul><li>Working with ...
<cfajaxproxy> <ul><li>Quickly and efficiently allows you to make hidden data requests to a  ColdFusion component </li></ul...
<cfajaxproxy> example <cfajaxproxy cfc=&quot;employee&quot; jsclassname=&quot;cfcEmployee&quot;> <script language=&quot;Ja...
Working with BIND expressions
Adobe Spry Key Concepts <ul><li>Introduction to Spry </li></ul><ul><li>Installing Spry </li></ul><ul><li>Debugging Spry </...
Introduction to Spry <ul><li>JavaScript library for web designers providing functionality that allows designers and develo...
Installing Spry <ul><li>Spry is packaged as a zip file, containing a number of JavaScript and CSS files that are necessary...
Debugging Spry <ul><li>A DOM Element inspector </li></ul><ul><li>A line console for interactive debugging </li></ul><ul><l...
Additional JS Debuggers <ul><li>FireBug plug-in for Mozilla  https://addons.mozilla.org/en-US/firefox/addon/1843 </li></ul...
Retrieving and Displaying Data with Spry <ul><li>Generate data from your application server (ColdFusion) in a Spry compati...
Generating data from ColdFusion <ul><li>All of your business logic and code that accesses &quot;back office&quot; resource...
Generating Data from ColdFusion <ul><li>Add additional methods to format your queries into XML, JSON </li></ul><ul><li>CFC...
Making an HTTP Request to Execute a CFC Method http://[server]/[directory]/employee.cfc?method=getAsXML Additional paramet...
Walkthrough 1 Preparing for Development with Spry
Retrieving Data with Spry <ul><li>Use the Spry Data constructor  </li></ul><ul><li>The constructor is defined within the s...
Working with Spry Data in JavaScript
Outputting the contents of Spry Data <ul><li>A Spry dynamic region is an area on the page that displays the data and autom...
Outputting the contents of Spry Data <script src=&quot;/SpryAssets/xpath.js&quot;  language=&quot;javascript&quot;> </scri...
Working with Data <ul><li>XML (Extensible Markup Language) </li></ul><ul><li>JSON (JavaScript Object Notation) </li></ul><...
Working with JSON <ul><li>Represents complex data structures as JavaScript variable declarations  </li></ul><ul><li>When o...
Generating JSON from ColdFusion <ul><li>ColdFusion 8 can automatically serialize its native data structures into JSON by u...
Retrieving query data serialized as JSON with Spry  <ul><li>Include 2 libraries </li></ul><ul><ul><li>SpryData.js </li></u...
Using JSON Data <html><head> <script language=&quot;JavaScript&quot; src=&quot;/SpryAssets/sprydata.js&quot;></script> <sc...
Refactoring query data for JSON <ul><li>In the prior example, query columns were referenced by position – not a best pract...
Refactoring Query Data for JSON <script language=&quot;JavaScript&quot;  src=&quot;/SpryAssets/sprydata.js&quot;></script>...
Formatting JSON data into HTML Tables using spry:sort  <ul><li>Allows you to sort data by a specific column or columns. </...
Using Alternating Row Colors in a dynamic table <ul><li>Deploy the spry:even attribute into the <tr spry:repeat> </li></ul...
Spry Table <html> <head> <style>.altColor {background-color: yellow;}</style> <script language=&quot;JavaScript&quot; src=...
Walkthrough Creating Dynamic Tables
Spry Widgets <ul><li>Spry also supports a number of data-aware user interface &quot;widgets&quot; that allows you to easil...
Spry Form Field Widgets <ul><li>Text Field </li></ul><ul><li>Password </li></ul><ul><li>TextArea </li></ul><ul><li>Radio B...
Walkthrough 5-4 Using Spry Validation Text Fields
Spry UI Widgets <ul><li>Accordion </li></ul><ul><li>HTML Panel </li></ul><ul><li>MenuBar </li></ul><ul><li>Sliding Panels ...
Tabbed Panels <ul><li>Horizontal / Vertical Orientation </li></ul><ul><li>Include scripts </li></ul><ul><ul><li>SpryTabbed...
Tabbed Panels Example <head> . . . <link  href=&quot;/SpryAssets/SpryTabbedPanels.css&quot;  rel=&quot;stylesheet&quot; ty...
Walkthrough 5-5 Using the Tabbed Panels Widget
Spry Effects
Spry Effects
Additional Spry / ColdFusion 8 Integration Points <ul><li>ColdFusion includes the complete Spry 1.5 framework release in w...
<cfsprydataset> Example <cfsprydataset    name=&quot;theItems&quot;    type=&quot;json&quot;    bind=&quot;CFC:Employee.ge...
Binding Spry Data to <cfinput>
JQuery <ul><li>Fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, an...
JQuery Basics <ul><li>Basic Syntax  / Interacting with other libraries </li></ul><ul><li>Using Selectors and Events </li><...
JQuery Basic Syntax <script src=&quot;../scripts/jquery.js&quot; language=&quot;javascript&quot;></script> <script languag...
Using Selectors and Filters <ul><li>Selectors </li></ul><ul><ul><li>Find the first element with the class &quot;myclass&qu...
Using Selectors and Filters Example <script language=&quot;javascript&quot; src=&quot;../scripts/jquery.js&quot;></script>...
Walkthrough Using Selectors
Document Manipulation <ul><li>html() - extract HTML from matching element   jQuery(this).html(); </li></ul><ul><li>html(va...
JQuery Effects <ul><li>show() </li></ul><ul><li>hide() </li></ul><ul><li>toggle() </li></ul><ul><li>animate() </li></ul><u...
Walkthrough jQuery Effects
jQuery background data requests <ul><li>Able to work around browser domain security issues </li></ul><ul><li>jQuery.ajax(o...
Writing your own JQuery Extensions <ul><li>Very simple to author plugins: http://docs.jquery.com/Plugins/Authoring </li></...
Putting it all together <ul><li>Output data from CFC's in JSON format </li></ul><ul><li>Use <cfajaxproxy> to make backgrou...
Questions?
Upcoming SlideShare
Loading in...5
×

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

1,779

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,779
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Building AJAX applications with Adobe Spry, ColdFusion, and ..."

  1. 1. Building AJAX applications with Adobe Spry, ColdFusion, and JQuery
  2. 2. Topics <ul><li>AJAX ToolkitMania! </li></ul><ul><li>ColdFusion 8 Key Concepts </li></ul><ul><li>Adobe Spry Key Concepts </li></ul><ul><li>JQuery Key Concepts </li></ul>
  3. 3. AJAX ToolkitMania! <ul><li>Every library has core strengths and weaknesses </li></ul><ul><li>ColdFusion 8 </li></ul><ul><ul><li>Ext-JS datagrid </li></ul></ul><ul><ul><li><cfinput> bind expressions </li></ul></ul><ul><ul><li>FCK WYSIWYG editor </li></ul></ul><ul><ul><li>Perform data fetch with <cfajaxproxy> </li></ul></ul><ul><ul><li>Virtual windowing API with <cfwindow> </li></ul></ul><ul><ul><li>Ability to act as a proxy for a data request from a remote domain via <cfhttp> or <cffeed> </li></ul></ul><ul><li>Spry </li></ul><ul><ul><li>AJAX Toolkit for web designers </li></ul></ul><ul><ul><li>Easy to use HTML tag markup syntax </li></ul></ul><ul><ul><li>Powerful layout and effects components </li></ul></ul><ul><ul><li>Easy to deploy form validation via Dreamweaver CS3/CS4 </li></ul></ul><ul><ul><li>Compatible with Adobe AIR </li></ul></ul><ul><li>JQuery </li></ul><ul><ul><li>Powerful DOM Maniupulation </li></ul></ul><ul><ul><li>Robust Plug-in/Extensions library </li></ul></ul><ul><ul><li>3 rd party support (even Microsoft likes it!) </li></ul></ul><ul><ul><li>Compatible with Adobe AIR </li></ul></ul>
  4. 4. ColdFusion 8 Key Concepts <ul><li>Interacting with ColdFusion components via <cfajaxproxy> </li></ul><ul><li>Working with bind expressions </li></ul>
  5. 5. <cfajaxproxy> <ul><li>Quickly and efficiently allows you to make hidden data requests to a ColdFusion component </li></ul><ul><li>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 </li></ul><ul><li>You can also define a success handler that will receive a native Javascript data type returned from your component methods </li></ul>
  6. 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. 7. Working with BIND expressions
  8. 8. Adobe Spry Key Concepts <ul><li>Introduction to Spry </li></ul><ul><li>Installing Spry </li></ul><ul><li>Debugging Spry </li></ul><ul><li>Retrieving Data with Spry </li></ul><ul><li>Working with Data </li></ul><ul><li>Working with JSON </li></ul><ul><li>Spry Widgets </li></ul><ul><li>UI Widgets </li></ul><ul><li>Loading Data into Spry Fields </li></ul><ul><li>Posting Form Data from Spry </li></ul>
  9. 9. Introduction to Spry <ul><li>JavaScript library for web designers providing functionality that allows designers and developers to build pages that provide a richer experience for their user </li></ul><ul><li>Designed to bring AJAX to the web design community </li></ul><ul><li>Spry's data handling capabilities enable designers to incorporate XML, JSON, and HTML Table data </li></ul><ul><li>The Spry framework is HTML-centric, and easy to implement for users with basic knowledge of HTML, CSS and JavaScript </li></ul><ul><li>Adobe has included easy to use design-time widgets for Spry into Dreamweaver CS3 </li></ul><ul><li>Direct support in the Eclipse-based Aptana IDE </li></ul><ul><li>Can be used with AIR – the Adobe Integrated Runtime </li></ul>
  10. 10. Installing Spry <ul><li>Spry is packaged as a zip file, containing a number of JavaScript and CSS files that are necessary for its operation </li></ul><ul><li>Articles In-depth articles describing how to use Spry </li></ul><ul><li>Data XML data used in the examples </li></ul><ul><li>Demos Sample applications </li></ul><ul><li>Includes Core Javascript files for accessing data </li></ul><ul><li>Includes_minified Minified copies of the core JavaScript files where all extraneous white space and comments have been removed, resulting in faster download times. </li></ul><ul><li>Includes_packed Packed copies of the JavaScript files </li></ul><ul><li>Samples Examples that focus on a specific component of Spry </li></ul><ul><li>Widgets JS and CSS files for the user-interface components of Spry </li></ul><ul><li>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. </li></ul><ul><li>Note that an older version of Spry comes bundled with ColdFusion 8 </li></ul>
  11. 11. Debugging Spry <ul><li>A DOM Element inspector </li></ul><ul><li>A line console for interactive debugging </li></ul><ul><li>Outputs the contents of any debug.log() invocations that you have in your code. </li></ul><ul><li>Implementing the debugger </li></ul><ul><ul><li>SpryDebug.css </li></ul></ul><ul><ul><li>SpryDebug.js </li></ul></ul>
  12. 12. Additional JS Debuggers <ul><li>FireBug plug-in for Mozilla https://addons.mozilla.org/en-US/firefox/addon/1843 </li></ul><ul><li>Microsoft Internet Explorer Web Developer toolbar http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en </li></ul><ul><li>ColdFusion AJAX Debug Log Window (append ?cfdebug to your URL) </li></ul>
  13. 13. Retrieving and Displaying Data with Spry <ul><li>Generate data from your application server (ColdFusion) in a Spry compatible format (XML, JSON, HTML) </li></ul><ul><li>Use the Spry Dataset Constructor to make an http request to your application server that outputs the structured data </li></ul><ul><li>Define output areas on your page and how they are to formatted </li></ul><ul><li>Periodically refresh data from the server without a full-page reload </li></ul>
  14. 14. Generating data from ColdFusion <ul><li>All of your business logic and code that accesses &quot;back office&quot; resources should be encapsulated within ColdFusion Component (CFC) methods </li></ul><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. 15. Generating Data from ColdFusion <ul><li>Add additional methods to format your queries into XML, JSON </li></ul><ul><li>CFC method access type must be set to REMOTE </li></ul><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. 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. 17. Walkthrough 1 Preparing for Development with Spry
  18. 18. Retrieving Data with Spry <ul><li>Use the Spry Data constructor </li></ul><ul><li>The constructor is defined within the sprydata.js file </li></ul><ul><li>Additional Spry components must be included, depending on the datatype of the content being fetched </li></ul><ul><li>Any attempt to load data from a domain other than the one that your GUI is on will result in a security exception </li></ul><ul><li>Use CF as a proxy, if necessary </li></ul><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. 19. Working with Spry Data in JavaScript
  20. 20. Outputting the contents of Spry Data <ul><li>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 </li></ul><ul><li>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 </li></ul><ul><li>Loop through a Spry dataset by attaching a spry:repeat attribute to a nested html tag </li></ul>
  21. 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. 22. Working with Data <ul><li>XML (Extensible Markup Language) </li></ul><ul><li>JSON (JavaScript Object Notation) </li></ul><ul><li>HTML tables </li></ul>
  23. 23. Working with JSON <ul><li>Represents complex data structures as JavaScript variable declarations </li></ul><ul><li>When outputting JSON for Spry, you must send a content header of application/json </li></ul><ul><li>Simple to deserialize – use the eval() method </li></ul><ul><li>Data representation is very lightweight </li></ul><ul><li>Easier to manipulate, particularly if they you don't have much experience with XML/XPATH </li></ul>
  24. 24. Generating JSON from ColdFusion <ul><li>ColdFusion 8 can automatically serialize its native data structures into JSON by using the serializeJSON() function </li></ul><ul><li>Note the use of <cfoutput> vs. <cfreturn> </li></ul><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. 25. Retrieving query data serialized as JSON with Spry <ul><li>Include 2 libraries </li></ul><ul><ul><li>SpryData.js </li></ul></ul><ul><ul><li>SpryJSONDataSet.js </li></ul></ul><ul><li>You can only access column data by their indicies </li></ul><ul><li>You need to specify a filter in order to select only the data, not the column titles. </li></ul><ul><li>Use the useCache:false option if your data will be changing frequently. </li></ul>
  26. 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. 27. Refactoring query data for JSON <ul><li>In the prior example, query columns were referenced by position – not a best practice </li></ul><ul><li>Before returning query data as JSON, you reformat it into an array of structures </li></ul><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. 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. 29. Formatting JSON data into HTML Tables using spry:sort <ul><li>Allows you to sort data by a specific column or columns. </li></ul><ul><li>Columns can be set to sort on up to three fields and you can set the sort order to either ascending or descending </li></ul><ul><li>Steps </li></ul><ul><ul><li>Wrap the entire table in a spry:region tag </li></ul></ul><ul><ul><li>Placing a spry:repeat into the <tr> tag block that contains your data. </li></ul></ul><ul><ul><li>Place a spry:sort attribute into the <th> tags to sort the recordset and redraw the table. </li></ul></ul>
  30. 30. Using Alternating Row Colors in a dynamic table <ul><li>Deploy the spry:even attribute into the <tr spry:repeat> </li></ul><ul><li>Applies the specified style class to an object if the output row number is even </li></ul><ul><li>Conversely, spry:odd will apply a specified style to an object if the row number being output is an odd number. </li></ul>
  31. 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. 32. Walkthrough Creating Dynamic Tables
  33. 33. Spry Widgets <ul><li>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 </li></ul><ul><ul><li>Form Field Replacements </li></ul></ul><ul><ul><li>User Assistance Widgets </li></ul></ul><ul><ul><li>User Interface Widgets </li></ul></ul><ul><li>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. </li></ul><ul><li>Demos for each of the widgets are available in the /Spry/Articles/ directory. </li></ul>
  34. 34. Spry Form Field Widgets <ul><li>Text Field </li></ul><ul><li>Password </li></ul><ul><li>TextArea </li></ul><ul><li>Radio Button </li></ul><ul><li>Select Box </li></ul><ul><li>Check Box </li></ul><ul><li>Confirm Widget </li></ul>
  35. 35. Walkthrough 5-4 Using Spry Validation Text Fields
  36. 36. Spry UI Widgets <ul><li>Accordion </li></ul><ul><li>HTML Panel </li></ul><ul><li>MenuBar </li></ul><ul><li>Sliding Panels </li></ul><ul><li>Collapsible Panel </li></ul><ul><li>Tabbed Panel </li></ul>
  37. 37. Tabbed Panels <ul><li>Horizontal / Vertical Orientation </li></ul><ul><li>Include scripts </li></ul><ul><ul><li>SpryTabbedPanels.css </li></ul></ul><ul><ul><li>SpryTabbedPanel.js </li></ul></ul>
  38. 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. 39. Walkthrough 5-5 Using the Tabbed Panels Widget
  40. 40. Spry Effects
  41. 41. Spry Effects
  42. 42. Additional Spry / ColdFusion 8 Integration Points <ul><li>ColdFusion includes the complete Spry 1.5 framework release in web_root/CFIDE/scripts/ajax/spry directory </li></ul><ul><li><cfsprydataset> - outputs Spry dataset syntax on a page </li></ul><ul><li>ColdFusion <cfinput> tags can use Spry data sets directly in bind expressions </li></ul>
  43. 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. 44. Binding Spry Data to <cfinput>
  45. 45. JQuery <ul><li>Fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development </li></ul><ul><li>http://jquery.com </li></ul><ul><li>55K in length </li></ul><ul><li><script src=&quot;http://code.jquery.com/jquery-latest.js&quot;></script> </li></ul>
  46. 46. JQuery Basics <ul><li>Basic Syntax / Interacting with other libraries </li></ul><ul><li>Using Selectors and Events </li></ul><ul><li>Document Manipulation </li></ul><ul><li>JQuery Effects </li></ul><ul><li>Writing your own extensions </li></ul>
  47. 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. 48. Using Selectors and Filters <ul><li>Selectors </li></ul><ul><ul><li>Find the first element with the class &quot;myclass&quot; jQuery(&quot;.myClass&quot;); </li></ul></ul><ul><ul><li>Find the element named &quot;mydiv&quot; jQuery(&quot;#mydiv&quot;); </li></ul></ul><ul><ul><li>Find every DIV element jQuery(&quot;div&quot;); </li></ul></ul><ul><ul><li>Match any of the selectors jQuery(&quot;p.t1,p.t2,div,span&quot;); </li></ul></ul><ul><li>Filters </li></ul><ul><ul><li>:even </li></ul></ul><ul><ul><li>:odd </li></ul></ul><ul><ul><li>:eq(index) </li></ul></ul><ul><ul><li>:gt(index) </li></ul></ul><ul><ul><li>:lt (index) </li></ul></ul><ul><ul><li>:header </li></ul></ul><ul><ul><li>:animated </li></ul></ul><ul><ul><li>:contains(text) </li></ul></ul>jQuery(&quot;tr:even&quot;). css (&quot;background-color&quot;, &quot;#bbbbff&quot;);
  49. 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. 50. Walkthrough Using Selectors
  51. 51. Document Manipulation <ul><li>html() - extract HTML from matching element jQuery(this).html(); </li></ul><ul><li>html(val) - set HTML of matching element jQuery(this).html(&quot;<h1>Steve was here</h1>&quot;); </li></ul><ul><li>append(content) - append content to matching elements </li></ul><ul><li>prepend(content) - prepend content to matching elements </li></ul><ul><li>after(content) - append content to matching elements </li></ul><ul><li>remove() - remove matching items from DOM </li></ul><ul><li>insertAfter(expr) - insert objects after matching objects </li></ul><ul><li>wrap(html) - wrap matching elements with html </li></ul><ul><li>replaceWith(content) - replace all matched elements with specified content </li></ul><ul><li>clone - clone matched DOM elements </li></ul>
  52. 52. JQuery Effects <ul><li>show() </li></ul><ul><li>hide() </li></ul><ul><li>toggle() </li></ul><ul><li>animate() </li></ul><ul><li>stop() </li></ul><ul><li>dequeue() </li></ul><ul><li>slideDown() </li></ul><ul><li>slideUp() </li></ul><ul><li>slideToggle() </li></ul><ul><li>fadeIn() </li></ul><ul><li>fadeOut() </li></ul><ul><li>fadeTo() </li></ul><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. 53. Walkthrough jQuery Effects
  54. 54. jQuery background data requests <ul><li>Able to work around browser domain security issues </li></ul><ul><li>jQuery.ajax(options) Load a remote page using an HTTP request </li></ul><ul><li>load(url,data,callback) Load HTML from a remote file and inject into the DOM </li></ul><ul><li>jQuery.get(url,data,callback,ttype) Load a remote page using an HTTP GET request </li></ul><ul><li>jQuery.getJSON(url,data,callback) Get JSON data </li></ul><ul><li>jQuery.getScript(url,callback) Loads and executes a JavaScript </li></ul><ul><li>jQuery.post(url,data,callback,type) Loads a remote page using HTTP Post </li></ul>
  55. 55. Writing your own JQuery Extensions <ul><li>Very simple to author plugins: http://docs.jquery.com/Plugins/Authoring </li></ul><ul><li>A thousand plugins available at http://plugins.jquery.com/ </li></ul>
  56. 56. Putting it all together <ul><li>Output data from CFC's in JSON format </li></ul><ul><li>Use <cfajaxproxy> to make background server requests to ColdFusion </li></ul><ul><li>Use <cfgrid> for grid controls </li></ul><ul><li>Use <cfwindow> and related API for virtual windowing </li></ul><ul><li>Use Adobe Spry form field, interface widgets, and dynamic tables </li></ul><ul><li>Get your designers to use Spry via Dreamweaver CS3/CS4 </li></ul><ul><li>Use jQuery for building mashups from different sites (working around cross-site security issues) and for easy DOM manipulation </li></ul>
  57. 57. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×