Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript 2.0 in Dreamweaver CS4

6,886 views

Published on

Why and how you should do team-based JavaScript development in Dreamweaver CS4.

Published in: Technology, Design
  • Be the first to comment

JavaScript 2.0 in Dreamweaver CS4

  1. 1. JavaScript 2.0 in Dreamweaver CS4 alexei white Twit tag: #adobemax36
  2. 2. Related Sessions <ul><li>Using the Spry Framework in Dreamweaver CS4 (Arnout Kazemier) Oct 5 th 3:30pm 403B </li></ul><ul><li>Spry Widgets and Dreamweaver CS4 (BYOL) (Chris Converse) Oct 6 th 1:00pm 408A </li></ul><ul><li>Ajax for Designers (Greg Rewis) Oct 5 th 11:30am 405 + Others </li></ul><ul><li>Skinning JavaScript Framework Widgets in Dreamweaver (Joe Lowery) Oct 7 th 3:30pm 402A </li></ul><ul><li>Best Practices in Cross-Browser Testing with Adobe BrowserLab (Kristin Long) Oct 7 th 2:00pm 406A + Others </li></ul><ul><li>Roadmap: Web Professional Tools and Services in Creative Suite (Lea Hickman) Oct 7 th 5:00pm 504 </li></ul>
  3. 3. about me Alexei White <ul><li>Senior Web Architect, ForeSee Results </li></ul><ul><li>Books: Wrox JS Reference, other </li></ul><ul><li>alexei.white@gmail.com / @alexsaves / http://ambiguiti.es </li></ul>
  4. 4. widgets
  5. 5. CS Session Replay Totally badass.
  6. 6. On the shelf Decent (no, really!) Good for beginners Probably out of print
  7. 7. Today’s Point Fewer “rock stars”. Better tools.
  8. 8. today 3 Goals
  9. 9. Goals 1. Where JavaScript is @
  10. 10. Goals 2. How Dreamweaver is Helping
  11. 11. Goals 3. Understand Spry
  12. 12. JavaScript Today
  13. 13. Rise of JavaScript (Thanks Brenden!) Brenden Eich – Mocha / LiveScript Microsoft IE3 + JScript (+ VBScript for some reason.) ECMA-262 “ECMAScript” IE 5.0 XMLHttpRequest JavaScript shunned! Firefox 1.0 Tim O’Reilly says “Web2.0” Everybody freaks out. Google Maps. Minds blown. Jesse James Garret says “AJAX” More freaking out. Ajax frameworks proliferate. Ajax-based apps proliferate. Firebug 0.2 Released Google buys Upstartle + XL2Web
  14. 14. Fall of JavaScript
  15. 15. More Change
  16. 16. Did this just happen?
  17. 17. Google’s ChromeDevTools
  18. 18. KitMate (Webkit + Textmate)
  19. 19. ECMAScript <ul><li>ECMAScript 2,3 Were Minor Updates </li></ul><ul><li>ECMAScript 4 Totally Scrapped </li></ul><ul><li>ECMAScript 5 (Harmony) – Work in Progress. </li></ul><ul><ul><li>More Complete OO features </li></ul></ul><ul><ul><li>Getters and Setters </li></ul></ul><ul><ul><li>Immutable Objects </li></ul></ul><ul><ul><li>Native (safe) JSON </li></ul></ul><ul><ul><li>Trying not to “break the web” (3 out of 4 browser rule) </li></ul></ul><ul><ul><li>“ use strict” mode </li></ul></ul>
  20. 20. JavaScript Is.. <ul><li>A necessary skill </li></ul><ul><li>No longer the Wild West </li></ul>
  21. 21. JavaScript Developer Complaints
  22. 22. Complaints 1. Steep learning curve
  23. 23. Complaints 2. DOM & CSS debugging
  24. 24. Complaints 3. Poor Tooling
  25. 25. Complaints 3. Maintenance
  26. 26. Dreamweaver
  27. 27. JavaScript In Dreamweaver CS4
  28. 28. Changes in the IDE Landscape <ul><ul><li>Visual Studio Shipping with JQuery. </li></ul></ul><ul><ul><li>Visual Studio 2010 shipping with improved intellisense engine for JavaScript libraries. </li></ul></ul><ul><ul><li>Visual Studio 2010 Supporting robust testing framework for web. </li></ul></ul><ul><ul><li>Aptana provides in-depth code-assist for DOM, CSS, Ajax Frameworks. </li></ul></ul><ul><ul><li>Many developers are using text-based IDE’s for JavaScript: </li></ul></ul>JavaScript IDE Market Share ( http://ajaxian.com/archives/nitobi-survey-results-on-ajax-development )
  29. 29. Dreamweaver CS4 JavaScript Features <ul><li>Framework Support </li></ul><ul><li>& Web Widgets </li></ul>
  30. 30. Extension Manager
  31. 31. Documenting JavaScript is Hard function() { myUtility = function() { if (arguments.length == 2) return arguments[0]*arguments[1]; else return Math.random(); } }(); Non deterministic Might be read as anonymous() Should be myUtility(n1,n2); myUtility();
  32. 32. Documenting JavaScript is Hard <function pattern=&quot;XMLDataSet(xmlsource, xpath, {options})&quot; caseSensitive=&quot;true”> <parammenu pattern='{,' name=&quot;options&quot; index=&quot;2&quot; type=&quot;optionArray&quot; allowwhitespaceprefix=&quot;true&quot;> <parammenuitem label=&quot;sortOnLoad&quot; value=&quot;sortOnLoad:&quot; icon=&quot;shared/mm/images/hintMisc.gif&quot; datatype=&quot;string&quot;/> <optionparammenu pattern=&quot;sortOrderOnLoad&quot; label=&quot;sortOrderOnLoad&quot; value=&quot;sortOrderOnLoad:&quot; icon=&quot;shared/mm/images/hintMisc.gif&quot; type=&quot;enumerated&quot; datatype=&quot;string”> <optionparammenuitem label=&quot;ascending&quot; value=&quot;ascending&quot; icon=&quot;shared/mm/images/hintMisc.gif&quot;/> <optionparammenuitem label=&quot;descending&quot; value=&quot;descending&quot; icon=&quot;shared/mm/images/hintMisc.gif&quot;/> </optionparammenu> </parammenu> </function> Custom Code Hinting (CodeHints.xml)
  33. 33. Extensions and Web Widgets
  34. 34. Extensions and Web Widgets
  35. 35. Dreamweaver CS4 JavaScript Features 2. Live Preview, Live Code, & Code Navigator
  36. 36. Live Code, Live Preview, and Code Navigator
  37. 37. Dreamweaver CS4 JavaScript Features 3. Pause JavaScript
  38. 38. Pause JavaScript
  39. 39. Dreamweaver CS4 JavaScript Features 4. It’s a Browser, Dummy! (firebug lite)
  40. 40. Firebug Lite in LiveView
  41. 41. Dreamweaver CS4 JavaScript Features 4. BrowserLab
  42. 42. Browserlab
  43. 43. Dreamweaver CS4 JavaScript Features 5. Pain Points
  44. 44. What Pains Us? <ul><ul><li>Lack of Error Trapping in Live View </li></ul></ul><ul><ul><li>No Breakpoints </li></ul></ul><ul><ul><li>Watches </li></ul></ul><ul><ul><li>Profiling </li></ul></ul><ul><ul><li>Unit testing </li></ul></ul>
  45. 45. Unit Testing in Dreamweaver? Maybe for CS5?
  46. 46. Spry
  47. 47. What do you need to know about Spry? <ul><ul><li>Thin-Client JavaScript Framework </li></ul></ul><ul><ul><li>HTML-centric. </li></ul></ul><ul><ul><ul><li>Decorator pattern </li></ul></ul></ul><ul><ul><ul><li>Declarative </li></ul></ul></ul><ul><ul><li>Lightweight widget set </li></ul></ul><ul><ul><ul><li>Accordion </li></ul></ul></ul><ul><ul><ul><li>Autosuggest </li></ul></ul></ul><ul><ul><ul><li>Panels </li></ul></ul></ul><ul><ul><ul><li>Menus </li></ul></ul></ul><ul><ul><ul><li>Tooltips </li></ul></ul></ul><ul><ul><ul><li>Ratings </li></ul></ul></ul><ul><ul><ul><li>Tab strip </li></ul></ul></ul><ul><ul><ul><li>Datagrid </li></ul></ul></ul><ul><ul><li>Ajax </li></ul></ul><ul><ul><ul><li>Rich dataset features </li></ul></ul></ul><ul><ul><li>Effects </li></ul></ul><ul><ul><ul><li>Fading </li></ul></ul></ul><ul><ul><ul><li>Grow/shrink </li></ul></ul></ul><ul><ul><ul><li>Yellow fade (highlight) </li></ul></ul></ul><ul><ul><ul><li>Sliding </li></ul></ul></ul><ul><ul><ul><li>etc. </li></ul></ul></ul><ul><ul><li>Rich eventing </li></ul></ul><ul><ul><ul><li>Unobtrusive </li></ul></ul></ul><ul><ul><ul><li>Observers </li></ul></ul></ul><ul><ul><li>Tight Dreamweaver integration </li></ul></ul><ul><ul><li>Well documented </li></ul></ul><ul><ul><li>“ Everyman” framework </li></ul></ul>
  48. 48. What’s in a Framework? Jquery Dojo GWT Spry Multi-format Ajax Yes. XML, HTML, JSON Yes. 25 formats. Yes. JSON, HTML Yes. XML, HTML, JSON, CSV, TSV Visual Effects Yes Yes Yes Yes Event Handling Yep Yep Yep Yep CSS Selectors Yep Yep Yep Yes Widgets Many Many Many Some Community Huge. Irc, blogs, etc. Big. Medium. Small. Forums, Some blogs, Adobe Exchange/Marketplace Flavor Lightweight, ‘bare bones’ scripting framework. Full-featured Client scripting framework Full-stack - Java Decoration. Separation of concerns
  49. 49. False Assumptions about Spry <ul><ul><li>Spry is immature </li></ul></ul><ul><ul><li>Spry is just for beginners </li></ul></ul><ul><ul><li>Framework X is “better” </li></ul></ul><ul><ul><li>I can’t build [insert idea] in Spry </li></ul></ul><ul><ul><li>There is an invisible wall </li></ul></ul><ul><ul><li>I have to be using Dreamweaver to use Spry </li></ul></ul>
  50. 50. Who should consider using Spry? <ul><ul><li>Development teams > 1 person </li></ul></ul><ul><ul><li>Mixed skillset teams </li></ul></ul><ul><ul><li>Teams with light JavaScript experience </li></ul></ul><ul><ul><li>Projects with tight timelines </li></ul></ul><ul><ul><li>Teams already using Dreamweaver CS3+ </li></ul></ul>
  51. 51. Spry For Dreamweaver 1. Widgets
  52. 52. Spry Widgets
  53. 53. Spry For Dreamweaver 2. Effects & Observers
  54. 54. Effects <ul><ul><li>Standard Effects Supported </li></ul></ul><ul><ul><li>Standard Transitions Supported </li></ul></ul><ul><ul><li>Effect Chaining </li></ul></ul><ul><ul><ul><li>Daisy-chain effects via observers </li></ul></ul></ul><ul><ul><li>Effect Clusters </li></ul></ul><ul><ul><ul><li>Create your own reusable combinations </li></ul></ul></ul>
  55. 55. Spry Effects var fadeEffect= new Spry.Effect.Fade(’myElId', {toggle:true}); fadeEffect.start(); Simple Interface Chaining via Observers unFade = function(element,effect) { fadeEffect= new Spry.Effect.Fade(element.id,{toggle:true,finish:unFade}); fadeEffect.start(); }; var fadeEffect= new Spry.Effect.Fade('thanksDiv',{toggle:true,finish:unFade}); fadeEffect.start(); var fadeEffect2= new Spry.Effect.Fade(’myElId', {duration:2000,from:0,to:100}); fadeEffect2.start(); var growEfct= new Spry.Effect.Grow(’myElId', {useCSSBox:true, growCenter:true}); growEfct.start();
  56. 56. Spry Effects var fadeEffect= new Spry.Effect.Fade('thanksDiv', {toggle:true}); var counter = 0; fadeEffect.onStep = function(effect) { this.element.innerHTML = counter++; } fadeEffect.start(); More Observers Other Observers <ul><ul><li>onPreEffect </li></ul></ul><ul><ul><li>onStep </li></ul></ul><ul><ul><li>onPostEffect </li></ul></ul><ul><ul><li>onCancel </li></ul></ul>
  57. 57. Spry For Dreamweaver 3. Spry Debugger
  58. 58. Debugger <ul><ul><li>Similar to Firebug Lite – X browser </li></ul></ul><ul><ul><li>Logging - debug.log() </li></ul></ul><ul><ul><li>Object sniffing </li></ul></ul><ul><ul><ul><li>Smart display of properties </li></ul></ul></ul><ul><ul><li>DOM Inspection </li></ul></ul><ul><ul><li>Computed Styles </li></ul></ul>
  59. 59. Spry For Dreamweaver 4. Spry Datasets
  60. 60. Spry Datasets Transactional JavaScript Framework Stateful Spry Framework XML JSON HTML Hands off.. CSV/TSV
  61. 61. Types of Datasets <ul><ul><li>XML </li></ul></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>JSON </li></ul></ul><ul><ul><li>Paged View </li></ul></ul><ul><ul><li>Nested (master/detail) </li></ul></ul>
  62. 62. Spry Datasets <script type=&quot;text/javascript&quot; src=&quot;includes/xpath.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;includes/SpryData.js&quot;></script> Creating an XML Dataset Create a View <div spry:region=“products”> <h2 spry:sort=“ProductName”>Sort by Name</h2> <h2 spry:sort=“UnitPrice”>Sort by Price</h2> <div spry:repeat=“products”> <p>{ProductName} – {UnitPrice}</p> </div> </div> var products = new Spry.Data.XMLDataSet( &quot;products.xml&quot;, &quot;dataroot/Products&quot;);
  63. 63. Spry Datasets <div id=&quot;images_div&quot; spry:region=&quot;imageDS&quot; > <div spry:repeat=&quot;imageDS&quot; class=&quot;thumbHolder&quot; id=&quot;dv_{ds_RowID}&quot; onClick=&quot;imageDS.setCurrentRowNumber({ds_RowID})” > <img src=&quot;images/{ImageFile}&quot; id=&quot;img_{ds_RowID}&quot; /> </div> </div> <div id=&quot;Specials_Detail_DIV&quot; spry:detailregion=&quot;imageDS” > <img src=&quot;images/{ImageFile}&quot; id=&quot;imgbig_{ds_RowID}&quot; /><br /> <h2>{ImageName}</h2> <p><b>{DateTaken}</b> - {ImageDescription}</p> </div> Image Gallery Drill-Down
  64. 64. Spry Data Set API var myFilterFunc = function(dataSet, row, rowNumber) { // Filter out all rows with paths that begin // with the letter 's'. if (row[&quot;@path&quot;].search(/^s/) != -1) return row; // Return the row to keep it in the data set. return null; // Return null to remove the row from the data set. } // Filter the data. dsPhotos.filterData(myFilterFunc); // Remove the filter. dsPhotos.filterData(null); Programmatic Filter
  65. 65. Unit Testing in Dreamweaver CS4 with DreamUnit
  66. 66. Kvestions?

×