Getting Started with Dojo Toolkit

Getting started with Dojo Toolkit

Cologne.jsUser Group Meeting, Cologne (@cowoco)

Thomas Koch(@tomy_koch)

10. August 2010

Dojo Toolkit: About

• Dojo is JS Framework– Pure client-side JS (in contrast to GWT etc.)

– Includes Dev.Tools: build, test

– Open source, active communityhttp://www.dojotoolkit.org/

• Dojo features– OO-style class based development

– Modularisation (via concept of packages)

– Support for data and GUI MVC

– Wide range of builtin widgets

10.08.2010 Thomas Koch 2

http://www.dojotoolkit.org/

Dojo Toolkit: Features

• Development: APIs for robust Web Applications– Event handling, DOM manipulation– CSS Querying, Animations, …

• Communication: Ajax and even more– Data abstraction layer, JSON-RPC, Comet, XMPP etc.

• Integration: with many server-side developments– including DWR, Django, TurboGears, Google, Jaxer …

• User interface: re-usable gui components– Standard gui widgets (button, slider, table, tree, menu …)– vector graphics, charting, …– theming, drag’n drop, …– i18N, a11y

• Widely used: Dojo Widgets (aka Dijits)


Dojo Sneak Preview: Theme Tester


http://localhost/dojo/dojo-1.5/dijit/themes/themeTester.html

GETTING STARTEDDojo quick-start


Basic Dojo Page

• minimal Dojo

– load the dojo base stuff: dojo.js

– define a config (optional!)

• djConfig : dictionary used by dojo bootstrap process– Locale, debug, baseURL, parseOnLoad, …

• Example

10.08.2010

<html><head><title>Dojo Demo</title>

<script type="text/javascript" src="dojo/dojo.js"

djConfig="isDebug:true">

</script></head>

<body><p>Hello Dojo</p></body>

</html>

Thomas Koch 6

Document Life-Cycle

• OnLoad/unLoad Handler

– dojo.addOnLoad(<functionname>)

• defers script execution until all HTML is loaded

– vice versa: addOnUnload()

• Example

10.08.2010

<script type="text/javascript">

function showVersion() {

var node = dojo.byId("demo");

node.innerHTML = "Dojo"+dojo.version;

}

dojo.addOnLoad(showVersion);

</script>

<body>

<div id="demo"></div>

Thomas Koch 7

Dojo Base

• Foundation of Dojo Framework: dojo.js– Implements Browser detection & Package loading

• import/packaging-concept via dojo.declare / dojo.require

– Provides DOM Manipulation and CSS query engine

• Browser sniffing– dojo.isFF, dojo.isIE

– dojo.isOpera, dojo.isSafari

– dojo.isAir

• Dojo.is<Browser> (global variable!)– IS version of browser

– OR undefined>>> dojo.isFF

3.510.08.2010 Thomas Koch 8

DOM Manipulation

• DOM Lookup– node = dojo.byId("id") returns a DOM node

• Similar to document.getElementById("id")

– Watch out: dijit.byId("id") returns a Dijit widget instance!

• DOM Insert/Edit– dojo.create() & dojo.place()

var img = dojo.create("img"‚ ,src:"a.gif", alt:"demo" });

dojo.place(img, node, "after");

OR: dojo.create("img"‚ ,src:"a.gif", alt:"demo" }, node, "after");

• Dom Manipulation: cleanup– dojo.destroy(node)

– dojo.empty(node)


Dojo Base : Querying• CSS query engine

– dojo.query("img") returns NodeList• Similar to document.getElementsByTagName("IMG");

– nodelist = dojo.query(String query, String?|Node? root)• Query: CSS3-Selektor http://www.w3.org/TR/css3-selectors

– Examples• dojo.query(".progressIndicator"); // Query by css class.

• dojo.query(„div#demo"); // Query by node type and id

• dojo.query(„a*href*=‚www.bscw.de‘+"); // Query attributes

• NodeList– Subclass of Array with special extensions:

• every, forEach ,filter, concat, splice, addClass,removeClass…


http://www.w3.org/TR/css3-selectors



Dojo Base : CSS

• CSS styling– Assign CSS classes

• dojo.addClass(node,clsStr) , removeClass, toggleClass, hasClass

– Assign CSS styles• dojo.style(DOMnode|String node, String|Object style, String val)

• Examplevar box = dojo.byId(„bannerTop“);

dojo.style(box, {height : „100px“, width: „200px“-);

<= => dojo.style(„bannerTop“, …);

• dojo.attr(DOMnode|String node, String name, String value)

• Examplevar img = dojo.byId(„logo1“);

dojo.attr(img, „alt“, „OrbiTeam“);


PRACTICAL EXAMPLEDojo hands-on


Examples - code available athttp://code.google.com/p/dojodemo/• 1. Simple dojo page

– Browser sniffing– DOM Manipulation– CSS Querying– onLoad-Handler

• 2. Use of dijits– dojo.require– dojoType magic– Dijit properties– Data layer

• 3. Define your own dijit– dojo.provide / dojo.declare– dijit.Widget / dijit.Templated


http://code.google.com/p/dojodemo/

DOJO BUILDING BLOCKSThe big picture


Dojo Architecture

• Dojo consists of …– Base

• Foundation of everything else: packaging, loading, DOM manipulation

– Core• Widget parser, animations,

drag‘n drop, i18n …

– Dijit• Dijits = Dojo Widgets:

portable widgets(progress bar, menu, editor, …)

– DojoX• Dojo eXtensions: stable and

experimental widgets(like Charting, Grid, FishEye)

– Util• Dojo Build System, ShrinkSafe,

Checkstyle, API Doc System


Dojo Base

• Basic Toolset– Array Utilities (dojo.filter, dojo.forEach …)

– Language Utilities (dojo.hitch, dojo.isString …)

– OO Utilities (declare, mixin, extend ...)

– Event-System (publish, subscribe)

– Ajax / IO (dojo.xhr)

• Furthermore …– Animations

– String Utilities, JSON Tools (fromJSON, toJSON, …)

– Misc: Colors,Keys, global, eval


Dojo Core• Extends Dojo Base Framework

– Contains everything from dojo-Namespacethat needs import, e.g. dojo.require(„dojo.date“)

• Important Components– dojo.dnd: Drag and Drop– dojo.i18n: Internationalization Utility– dojo.rpc: Remote Procedure Calls with Backend Servers– dojo.data: a uniform data access layer

• Furthermore contains…– dojo.fx: Effects library on top of Base animations– dojo.gears: Google Gears– dojo.io: Additional AJAX I/O transports– dojo.html: Inserting contents in HTML nodes – Misc: dojo.currency, dojo.date, dojo.number, dojo.regexp etc.

10.08.2010Thomas Koch 17

Dojo Unified Events

• Publish/Subscribe communication

• connect a function of your own to:– a DOM event, such as when a link is clicked

– an event of an object, such as an animation starting

– a topic, which other objects can publish objects to

– function call of your own, such as bar();

• Methods– dojo.[dis]connect(), dojo.publish, dojo.subscribe()

• Example

10.08.2010

var foo = dojo.byId("foo"); // anchor element

dojo.connect(foo, "onclick", function(evt) {

console.log("anchor clicked");

dojo.stopEvent(evt); //suppress navigation

}); Thomas Koch 18

DOJO RELATEDFurther Information on Dojo


Dojo Documentation

• API Docs– Online Documentation : http://dojotoolkit.org/api/

• Dojo Campus– Articles, Tutorials, Feature Explorer … http://dojocampus.org

• Blogs– Dojo Project Blog

• http://dojotoolkit.org/blog/

– SitePen Blog• http://www.sitepen.com/blog

– Shane O’Sullivan’s technical blog• http://shaneosullivan.wordpress.com/

• Books– Russell, Matthew A.

• Dojo: The Definitive Guide

– Riecke, C.; Gill, R.; Russell, A.• Mastering Dojo:

– Zammetti, Frank• Practical Dojo Projects


http://dojotoolkit.org/api/

http://dojocampus.org/

http://dojotoolkit.org/blog/

http://www.sitepen.com/blog

http://shaneosullivan.wordpress.com/

Dojo Performance

• Dojo Performs Better (DOM Manipulation!)– Dojo is 1.5-2x faster than jQuery, and the difference is

biggest on the slowest browsers — where it counts most.

siehe TaskSpeed

– http://dante.dojotoolkit.org/taskspeed/


http://dante.dojotoolkit.org/taskspeed/

Dojo Foundation– http://www.dojofoundation.org/

– home of great open-source projects

– started as the home of the Dojo Toolkit

– today the Dojo Foundationis also home of other open web projects including cometD, DWR, OpenRecord, Persevere, and Sizzle.

– Dojo Foundation Board

– vote per committer


http://www.dojofoundation.org/

Dojo Demos

• Demo #1– Dojo Image Demo: Zoomer

– http://demos.dojotoolkit.org/demos/cropper/

• Demo #2– Dojo Feature Explorer

– http://dojocampus.org/explorer

• Demo #3– Sitepen Persevere Demo: Stocker

– http://persevere.sitepen.com/stocker.html


http://demos.dojotoolkit.org/demos/cropper/

http://dojocampus.org/explorer

http://persevere.sitepen.com/stocker.html

Getting Started with Dojo Toolkit

Technology

Transcript of Getting Started with Dojo Toolkit