zero to dojo

0 to Production

December 3, 2008Peter HigginsSpringOne Americas

© SitePen, Inc. 2008. All Rights Reserved

Me.


Show of Hands?


Quick Start


Notes about Dojo

Long Standing DevelopmentLarge, Active Developer BaseFriendly Professional CommunityLiberally Licensed, Clean IP


Notes about Dojo

Comprised of Base, Core, Dijit, and DojoXUni!ed Tools and ComponentsExtras: ShrinkSafe, Build UtilsD.O.H.


Base

<html><head>

<title>Hello, Dojo</title>

<script type="text/javascript"

src="http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js"></script>

</head><body></body>

</html>

Using Dojo Base

http://o.aolcdn.com/dojo/1.2/dojo/dojo.js

http://o.aolcdn.com/dojo/1.2/dojo/dojo.js


Aka: dojo.js (26KB of Joy)

Ajax: dojo.xhr, dojo.xhrGet, dojo.xhrPost ...Events: normalization, keys, Objects or NodesDOM/CSS: dojo.byId, dojo.style, dojo.place, dojo.attrAnimation: dojo.fadeIn/Out, dojo.animatePropertyQuery/NodeList: CSS3 Selectors. aka: All of the AboveAdvanced JS: dojo.delegate, .hitch, .partial, .exists ...

dojo.declare

Native JS: forEach, map, !lter, some, every, indexOf ... Browser Sni"ng: dojo.isIE < 7, isFF, isWebKit ...


// 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 chaineddojo.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){ ... });

Patterns in Dojo


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

Simple OO, Simulated Inheritance


And more...

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 ...

Package System == modular codeWorks with Dojo and custom code


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 APIdojo.dnd - Drag and Drop APIdojo.fx / dojo.NodeList-fx - Additional Advanced FXdojo.i18n - Internationalization toolsdojo.string, dojo.date, dojo.regexp - Common utilitydojo.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 MarkupFully dynamic, reusable Templated componentsExtend existing or Create ...


Includes Suite of Widgets

Layouts - Accordions, Tabs

Form - Validation and more ...

WYSIWYG Editor

Tree, Sliders, ProgressBar ...

<html><head><title>index.html</title><link rel=”stylesheet”

href=”dojotoolkit/dijit/themes/tundra/tundra.css”>

<script type="text/javascript" src="dojotoolkit/dojo/dojo.js"></script></head><body class=”tundra”></body>

</html>

Setup is Easy

// load the resource:dojo.require(“dijit.dijit”); // Base Dijitdojo.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();

Flexible Instantiation


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


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 Widgets


Custom Extensions

Leverage the Dijit widget system for speci!c purposes

Reuse Existing a11y and i18n code in Dijit


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

Custom Widgets: Subclassing


<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>

Ultra Rapid Prototyping


/* 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;}

Helping Designers


Extensions, Extras, Experiments

Extend Dijit:dojox.widget, dojox.layout, dojox.form

Additional FX: dojox.fxMorph, Text, Extras ...

Image Gadgets:FlickrBadge, Lightbox (Nano), SlideShow ...

Comet: dojox.cometdAdvanced IO:

RPC, REST, SMD, ScriptFrame ...


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

... there’s more: DojoX GFX


Fully dojo.data-ReadyLazy Row Selection, Virtual Scrolling

Simplified Use: Layout Ready, Easy instantiation

DojoX: DataGrid


dojox.data StoresAndOrReadStoreAppStoreAtomReadStoreCouchDBRestStoreCssRuleStoreCsvStoreFileStoreFlickrRestStore / FlickrStoreGoogleFeedStore

GoogleSearchStoreHtmlStorejsonPathStorejsonRestStoreOpmlStoreQueryReadStoreServiceStoreS3StoreWikipediaStoreXmlStore


Other Goodies

dojox.av - Audio / Video helpersdojox.dtl - django templating system implementationdojox.o#, dojox.storage - O$ine helpersdojox.lang - Advanced JS techniquesdojox.xmpp - Full protocol implementationdojox.validate - Regexps + Functions

... much, much more!


Simple Gems: Google Analytics

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

Why Write This?

https://ssl

https://ssl

http://www

http://www

Simple Gems: Google Analytics with Dojo

// load the resourcedojo.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” });

Just Write This:


in Production


Dojo Build System

Reduce number of HTTP requestsTemplate Interning and resource concatenation

Reduce JavaScript !le size:Remove Comments and whitespace

Variable obfuscation (ShrinkSafe)

CSS OptimizationComment 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 CDNBuildExclude syntax


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

D.O.H - Unit test Suite


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

http://api.dojotoolkit.org

http://api.dojotoolkit.org

http://docs.dojocampus.org

http://docs.dojocampus.org

http://sitepen.com/labs/toolbox

http://sitepen.com/labs/toolbox

http://dojocampus.org

http://dojocampus.org


Dojo Dead Trees!

Additional Documentation


That’s


Questions?

zero to dojo

Technology