JavaScript 2.0 in Dreamweaver CS4

®

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 1

JavaScript 2.0 in Dreamweaver CS4alexei white

Twit tag: #adobemax36

®


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

®


about me

Alexei White• Senior Web Architect, ForeSee Results• Books: Wrox JS Reference, other• [email protected] / @alexsaves / http://ambiguiti.es

®


widgets

®


CS Session ReplayTotally badass.

®


On the shelf

Decent(no, really!)

Good for

beginne

rsProbably out of

print

®


Today’s Point

Fewer “rock stars”.

Better tools.

®


today

3 Goals

®


Goals

1. Where JavaScript is @

®


Goals

2. How Dreamweaver is Helping

®


Goals

3. Understand Spry

®


JavaScript Today

®


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

®


Fall of JavaScript

®


More Change

®


Did this just

happen?

®


Google’s ChromeDevTools

®


KitMate (Webkit + Textmate)

®


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

®


JavaScript Is..

• A necessary skill

• No longer the Wild West

®


JavaScript Developer Complaints

®


Complaints

1. Steep learning curve

®


Complaints

2. DOM & CSS debugging

®


Complaints

3. Poor Tooling

®


Complaints

3. Maintenance

®


Dreamweaver

®


JavaScript In Dreamweaver CS4

®


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)

®


Dreamweaver CS4 JavaScript Features

1. Framework Support & Web Widgets

®


Extension Manager

®


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();

®


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)

®


Extensions and Web Widgets

®



2. Live Preview, Live Code, & Code Navigator

®


Live Code, Live Preview, and Code Navigator

®



3. Pause JavaScript

®


Pause JavaScript

®



4. It’s a Browser, Dummy! (firebug lite)

®


Firebug Lite in LiveView

®



4. BrowserLab

®


Browserlab

®



5. Pain Points

®


What Pains Us?

• Lack of Error Trapping in Live View

• No Breakpoints

• Watches

• Profiling

• Unit testing

®


Unit Testing in Dreamweaver?

Maybe for CS5?

®


Spry

®


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

®


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

®


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

®


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+

®


Spry For Dreamweaver

1. Widgets

®


Spry Widgets

®



2. Effects & Observers

®


Effects

• Standard Effects Supported

• Standard Transitions Supported

• Effect Chaining• Daisy-chain effects via observers

• Effect Clusters• Create your own reusable combinations

®


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();

®


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

®



3. Spry Debugger

®


Debugger

• Similar to Firebug Lite – X browser

• Logging - debug.log()

• Object sniffing• Smart display of properties

• DOM Inspection

• Computed Styles

®



4. Spry Datasets

®


Spry Datasets

Transactional

JavaScript FrameworkStateful Spry

Framework

XMLXML JSONJSON

HTMLHTML

Hands off..Hands off..

CSV/TSVCSV/TSV

®


Types of Datasets

• XML

• HTML

• JSON

• Paged View

• Nested (master/detail)

®


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");

®


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

®


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

®


Unit Testing in Dreamweaver CS4 with DreamUnit

®


Kvestions?

®


JavaScript 2.0 in Dreamweaver CS4

Technology

Transcript of JavaScript 2.0 in Dreamweaver CS4