Zero To Dojo

0 to Production

December 3, 2008
Peter Higgins
SpringOne Americas

Me.

© SitePen, Inc. 2008. All Rights Reserved

Show of Hands?


Quick Start


Notes about Dojo

Long Standing Development
Large, Active Developer Base
Friendly Professional Community
Liberally Licensed, Clean IP


Notes about Dojo

Comprised of Base, Core,
Dijit, and DojoX
Uni ed Tools and
Components
Extras: ShrinkSafe, Build
Utils
D.O.H.


Base


Using Dojo Base

<html>
<head>

<title>Hello, Dojo</title>


<script type=quot;text/javascriptquot;
src=quot;http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.jsquot;>
</script>

</head>
<body>
</body>
</html>

Aka: dojo.js (26KB of Joy)
Ajax: dojo.xhr, dojo.xhrGet, dojo.xhrPost ...
Events: normalization, keys, Objects or Nodes
DOM/CSS: dojo.byId, dojo.style, dojo.place, dojo.attr
Animation: dojo.fadeIn/Out, dojo.animateProperty
Query/NodeList: CSS3 Selectors. aka: All of the Above
Advanced JS: dojo.delegate, .hitch, .partial, .exists ...
dojo.declare
Native JS: forEach, map, lter, some, every, indexOf ...
Browser Sni ng: dojo.isIE < 7, isFF, isWebKit ...


Patterns in Dojo
// style and add class to a node:
dojo.addClass(“someNode”, “someClass”);
dojo.style(“someNode”, { opacity:0.5, lineHeight:”1.3em” });
dojo.attr(“someNode”, { id:”newId” });

// or chained
dojo.query(“#someNode”)
.addClass(“someClass”)
.attr({ id:”newId” })
.style({ opacity:0.5, lineHeight:”1.3em” })

// connect:
dojo.connect(dojo.byId(“foo”), “onclick”, function(e){...});
// or connect:
dojo.query(“#foo”).connect(“onclick”, function(e){ ... });
// or sugar:
dojo.query(“#foo”).onclick(function(e){ ... });


Simple OO, Simulated Inheritance
dojo.declare(“some.Person”, null, {
name: ”default”,
constructor: function(args){
dojo.mixin(this, args);
}
});

dojo.declare(“some.Employee”, some.Person, {
employeeId: 0
});

var bob = new some.Person({ name:”Bob Bobson” });
var joy = new some.Employee({ name:”Joy”, employeeId:24 });


Package System == modular code
And more... Works with Dojo and custom code

Local:
dojo.require(“dojo.io.script”);
dojo.require(“my.Widget”);
Robust:
dojo.registerModulePath(“external”, “/external/js”);
dojo.require(“external.Thinger”);
Easy:
dojo.provide(“my.Widget”);
Ready: dojo.addOnLoad, .addOnUnLoad ...


The Core


More Patterns
Use at will - everything additive.
No dependency tracking - just dojo.require(“it”)
Few, if any, “rules”
Scale: Grows to t your needs


Added Joy - a require() away
dojo.data - Uni ed Data API
dojo.dnd - Drag and Drop API
dojo.fx / dojo.NodeList-fx - Additional Advanced FX
dojo.i18n - Internationalization tools
dojo.string, dojo.date, dojo.regexp - Common utility
dojo.io.iframe, dojo.io.script, dojo.rpc - Advanced IO

... more: dojo.behavior, dojo.html, dojo.gears,
dojo.cookie, dojo.parser, dojo.jaxer ...


Additional Debugging

FireBug Lite Shipped
console.* provided in less
sane browsers
Load with djCon g =
{ isDebug:true }
if(dojo.con g.isDebug){ .. }


The Dojo Widget Framework


Take Your Pick
Compartmentalized Behavior using Existing Markup
Fully dynamic, reusable Templated components
Extend existing or Create ...


Includes Suite of Widgets

Layouts - Accordions, Tabs
Form - Validation and
more ...
WYSIWYG Editor
Tree, Sliders, ProgressBar ...


Setup is Easy
<html>
<head>
<title>index.html</title>

<link rel=”stylesheet”
href=”dojotoolkit/dijit/themes/tundra/tundra.css”>

<script type=quot;text/javascriptquot;

src=quot;dojotoolkit/dojo/dojo.jsquot;></script>
</head>
<body class=”tundra”>
</body>
</html>

Flexible Instantiation
// load the resource:
dojo.require(“dijit.dijit”); // Base Dijit
dojo.require(“dijit.Dialog”); // Dialog Code

// create programatically:
var myDialog = new dijit.Dialog({
title:”Login”
}, “formArea”);


<div id=”formArea” dojoType=”dijit.Dialog” title=”Login”>
<p>...</p>
</div>

// access the instance:
dijit.byId(“formArea”).show(); // myDialog.show();

CSS Driven Skinning

Three full themes:
Tundra
Soria
Nihilo

Fully customizable

Even easier with
constraints:
Embedded WebKit ?


Full Localization (i18n) Support


Full Accessibility (a11y) Support

Screen reader support

High contrast mode support

Keyboard navigation

... with every Dijit


Custom Widgets
dojo.provide(“my.Widget”);
dojo.require(“dijit._Widget”);
dojo.require(“dijit._Templated”);

// define:
dojo.declare(“my.Widget”, [dijit._Widget, dijit._Templated], {
value:”default”,
templatePath: dojo.moduleUrl(“my.templates”, “Widget.html”,
postCreate: function(args){
// init code
}
});

// instantiate:
new my.Widget({ value:”bar” }, “someNode”);
// declarative way:
<input id=”someNode” dojoType=”my.Widget” value=”Foo”>


Custom Extensions

Leverage the Dijit widget
system for speci c purposes

Reuse Existing a11y and i18n
code in Dijit


Custom Widgets: Subclassing
dojo.require(“dijit.Dialog”);

// “subclassing”:
dojo.declare(“my.Dialog”, dijit.Dialog, {

canShow: true,

show: function(){
if(this.canShow){
// then call inherited:
this.inherited(arguments);
}
}

});

var showable = new my.Dialog({ canShow: false });


Ultra Rapid Prototyping
<div id=”foo” dojoType=”dijit.Dialog” title=”Hello”>
<p> ... </p>

<script type=”dojo/method” event=”hide”>
// override instance’s hide() method ... test.
</script>

<script type=”dojo/connect” event=”show”>
// monitor instance’s show() method ...
</script>

</div>


Helping Designers
/* Convenience Rules added to <html> element */
.mybox {
width:250px;
}

/* love the quirks: */
.dj_ie6 .mybox {
margin-right:1px
}

.dj_ie7 .mybox {
margin-right:2px;
}

.dj_quirks .mybox {
margin:3px;
}


Extensions, Extras, Experiments
Extend Dijit:
dojox.widget, dojox.layout, dojox.form
Additional FX: dojox.fx
Morph, Text, Extras ...
Image Gadgets:
FlickrBadge, Lightbox (Nano), SlideShow ...
Comet: dojox.cometd
Advanced IO:
RPC, REST, SMD, ScriptFrame ...


... there’s more: DojoX GFX

Cross-browser vector graphics
GFX API, Charting: 2d / 3d, GFX Animation


DojoX: DataGrid

Fully dojo.data-Ready
Lazy Row Selection,Virtual Scrolling
Simpliﬁed Use: Layout Ready, Easy instantiation


dojox.data Stores
AndOrReadStore GoogleSearchStore
AppStore HtmlStore
AtomReadStore jsonPathStore
CouchDBRestStore jsonRestStore
CssRuleStore OpmlStore
CsvStore QueryReadStore
FileStore ServiceStore
FlickrRestStore / S3Store
FlickrStore WikipediaStore
GoogleFeedStore XmlStore


Other Goodies
dojox.av - Audio / Video helpers
dojox.dtl - django templating system implementation
dojox.o , dojox.storage - O ine helpers
dojox.lang - Advanced JS techniques
dojox.xmpp - Full protocol implementation
dojox.validate - Regexps + Functions

... much, much more!


Simple Gems: Google Analytics
Why Write This?

<script type=quot;text/javascriptquot;>
var gaJsHost = ((quot;https:quot; == document.location.protocol) ?
quot;https://ssl.quot; : quot;http://www.quot;);
document.write(unescape(quot;%3Cscript src='quot; + gaJsHost + quot;google-
analytics.com/ga.js' type='text/javascript'%3E%3C/script%3Equot;));
</script>
<script type=quot;text/javascriptquot;>
var pageTracker = _gat._getTracker(quot;UA-xxxxxx-xquot;);
pageTracker._trackPageview();
</script>


Simple Gems: Google Analytics with Dojo
Just Write This:

// load the resource
dojo.require(“dojox.analytics.Urchin”);


<div dojoType=”dojox.analytics.Urchin”
acct=”12345-UA-23”></div>

// or in script:
new dojox.analytics.Urchin({ acct:”UA-xxxxx-x” });

in Production


Dojo Build System
Reduce number of HTTP requests
Template Interning and resource concatenation
Reduce JavaScript le size:
Remove Comments and whitespace
Variable obfuscation (ShrinkSafe)
CSS Optimization
Comment Removal
@import “...” concatenation
StripConsole options


Advanced Builds
Stubs Dojo (6k dojo.js)
Custom Base
“Layers”
Automatic dependency tracking
Cross-dependent layers
RestoreRequire
X-Domain Dojo - Local CDN
BuildExclude syntax


D.O.H - Unit test Suite

Supports Build Up, Tear Down, sync or async Testing
doh.robot - Automated UI Unit testing


Resources


Basic Documentation
Full API Docs:
http://api.dojotoolkit.org
Full On-Line Docs:
http://docs.dojocampus.org
O ine Docs:
http://sitepen.com/labs/toolbox
Tutorials, Blogs, Examples:
http://dojocampus.org


Additional Documentation

Dojo Dead Trees!


That’s


Questions?


Zero To Dojo

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Zero To Dojo

Ähnlich wie Zero To Dojo (20)

Mehr von Peter Higgins

Mehr von Peter Higgins (7)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Zero To Dojo