Post on 19-May-2015
description
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 1
JavaScript 2.0 in Dreamweaver CS4alexei white
Twit tag: #adobemax36
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 2
Related Sessions
• Using the Spry Framework in Dreamweaver CS4 (Arnout Kazemier) Oct 5th 3:30pm 403B• Spry Widgets and Dreamweaver CS4 (BYOL) (Chris Converse) Oct 6th 1:00pm 408A• Ajax for Designers (Greg Rewis) Oct 5th 11:30am 405 + Others• Skinning JavaScript Framework Widgets in Dreamweaver (Joe Lowery) Oct 7th 3:30pm 402A• Best Practices in Cross-Browser Testing with Adobe BrowserLab (Kristin Long) Oct 7th 2:00pm 406A + Others• Roadmap: Web Professional Tools and Services in Creative Suite (Lea Hickman) Oct 7th 5:00pm 504
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 3
about me
Alexei White• Senior Web Architect, ForeSee Results• Books: Wrox JS Reference, other• alexei.white@gmail.com / @alexsaves / http://ambiguiti.es
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 4
widgets
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
CS Session ReplayTotally badass.
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 6
On the shelf
Decent(no, really!)
Good for
beginne
rsProbably out of
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 7
Today’s Point
Fewer “rock stars”.
Better tools.
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 8
today
3 Goals
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 9
Goals
1. Where JavaScript is @
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 10
Goals
2. How Dreamweaver is Helping
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 11
Goals
3. Understand Spry
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 12
JavaScript Today
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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 fr
ameworks
proliferate.
Ajax-based apps
proliferate.
Firebug 0.2
Released
Google buys Upstartle +
XL2Web
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 14
Fall of JavaScript
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 15
More Change
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 16
Did this just
happen?
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 17
Google’s ChromeDevTools
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 18
KitMate (Webkit + Textmate)
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 19
ECMAScript•ECMAScript 2,3 Were Minor Updates
•ECMAScript 4 Totally Scrapped
•ECMAScript 5 (Harmony) – Work in Progress.•More Complete OO features•Getters and Setters•Immutable Objects•Native (safe) JSON•Trying not to “break the web” (3 out of 4 browser rule)•“use strict” mode
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20
JavaScript Is..
• A necessary skill
• No longer the Wild West
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 21
JavaScript Developer Complaints
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 22
Complaints
1. Steep learning curve
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 23
Complaints
2. DOM & CSS debugging
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 24
Complaints
3. Poor Tooling
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 25
Complaints
3. Maintenance
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 26
Dreamweaver
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 27
JavaScript In Dreamweaver CS4
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 28
Changes in the IDE Landscape•Visual Studio Shipping with JQuery.
•Visual Studio 2010 shipping with improved intellisense engine for JavaScript libraries.
•Visual Studio 2010 Supporting robust testing framework for web.
•Aptana provides in-depth code-assist for DOM, CSS, Ajax Frameworks.
•Many developers are using text-based IDE’s for JavaScript: JavaScript IDE Market Share
(http://ajaxian.com/archives/nitobi-survey-results-on-ajax-development)
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 29
Dreamweaver CS4 JavaScript Features
1. Framework Support & Web Widgets
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 30
Extension Manager
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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 asanonymous()
Should bemyUtility(n1,n2);myUtility();
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 32
Documenting JavaScript is Hard
<function pattern="XMLDataSet(xmlsource, xpath, {options})" caseSensitive="true”> <parammenu pattern='{,' name="options" index="2" type="optionArray" allowwhitespaceprefix="true"> <parammenuitem label="sortOnLoad" value="sortOnLoad:" icon="shared/mm/images/hintMisc.gif" datatype="string"/> <optionparammenu pattern="sortOrderOnLoad" label="sortOrderOnLoad" value="sortOrderOnLoad:" icon="shared/mm/images/hintMisc.gif" type="enumerated" datatype="string”> <optionparammenuitem label="ascending" value="ascending" icon="shared/mm/images/hintMisc.gif"/> <optionparammenuitem label="descending" value="descending" icon="shared/mm/images/hintMisc.gif"/> </optionparammenu> </parammenu> </function>
Custom Code Hinting (CodeHints.xml)
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 33
Extensions and Web Widgets
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 34
Extensions and Web Widgets
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 35
Dreamweaver CS4 JavaScript Features
2. Live Preview, Live Code, & Code Navigator
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 36
Live Code, Live Preview, and Code Navigator
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 37
Dreamweaver CS4 JavaScript Features
3. Pause JavaScript
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 38
Pause JavaScript
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 39
Dreamweaver CS4 JavaScript Features
4. It’s a Browser, Dummy! (firebug lite)
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 40
Firebug Lite in LiveView
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 41
Dreamweaver CS4 JavaScript Features
4. BrowserLab
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 42
Browserlab
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 43
Dreamweaver CS4 JavaScript Features
5. Pain Points
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 44
What Pains Us?
• Lack of Error Trapping in Live View
• No Breakpoints
• Watches
• Profiling
• Unit testing
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 45
Unit Testing in Dreamweaver?
Maybe for CS5?
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 46
Spry
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 47
What do you need to know about Spry?
• Thin-Client JavaScript Framework
• HTML-centric.• Decorator pattern• Declarative
• Lightweight widget set• Accordion• Autosuggest• Panels• Menus• Tooltips• Ratings• Tab strip• Datagrid
• Ajax • Rich dataset features
• Effects• Fading• Grow/shrink• Yellow fade (highlight)• Sliding• etc.
• Rich eventing• Unobtrusive• Observers
• Tight Dreamweaver integration
• Well documented
• “Everyman” framework
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 49
False Assumptions about Spry
• Spry is immature
• Spry is just for beginners
• Framework X is “better”
• I can’t build [insert idea] in Spry
• There is an invisible wall
• I have to be using Dreamweaver to use Spry
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 50
Who should consider using Spry?
• Development teams > 1 person
• Mixed skillset teams
• Teams with light JavaScript experience
• Projects with tight timelines
• Teams already using Dreamweaver CS3+
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 51
Spry For Dreamweaver
1. Widgets
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 52
Spry Widgets
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 53
Spry For Dreamweaver
2. Effects & Observers
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 54
Effects
• Standard Effects Supported
• Standard Transitions Supported
• Effect Chaining• Daisy-chain effects via observers
• Effect Clusters• Create your own reusable combinations
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 55
Spry Effects
var fadeEffect= new Spry.Effect.Fade(’myElId', {toggle:true});fadeEffect.start();
Simple Interface
Chaining via ObserversunFade = 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();
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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• onPreEffect• onStep• onPostEffect• onCancel
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 57
Spry For Dreamweaver
3. Spry Debugger
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 58
Debugger
• Similar to Firebug Lite – X browser
• Logging - debug.log()
• Object sniffing• Smart display of properties
• DOM Inspection
• Computed Styles
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 59
Spry For Dreamweaver
4. Spry Datasets
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 60
Spry Datasets
Transactional
JavaScript FrameworkStateful Spry
Framework
XMLXML JSONJSON
HTMLHTML
Hands off..Hands off..
CSV/TSVCSV/TSV
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 61
Types of Datasets
• XML
• HTML
• JSON
• Paged View
• Nested (master/detail)
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 62
Spry Datasets
<script type="text/javascript" src="includes/xpath.js"></script><script type="text/javascript" src="includes/SpryData.js"></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( "products.xml", "dataroot/Products");
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 63
Spry Datasets
<div id="images_div" spry:region="imageDS" > <div spry:repeat="imageDS" class="thumbHolder" id="dv_{ds_RowID}" onClick="imageDS.setCurrentRowNumber({ds_RowID})” > <img src="images/{ImageFile}" id="img_{ds_RowID}" /> </div></div>
<div id="Specials_Detail_DIV" spry:detailregion="imageDS”> <img src="images/{ImageFile}" id="imgbig_{ds_RowID}" /><br /> <h2>{ImageName}</h2> <p><b>{DateTaken}</b> - {ImageDescription}</p></div>
Image Gallery Drill-Down
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 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["@path"].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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 65
Unit Testing in Dreamweaver CS4 with DreamUnit
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 66
Kvestions?
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 67