Getting Started with Dojo Toolkit

Getting started with
Dojo Toolkit
Cologne.js
User 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 community
http://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

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


Dojo quick-start

GETTING STARTED


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

Document Life-Cycle
• OnLoad/unLoad Handler
– dojo.addOnLoad(<functionname>)
• defers script execution until all HTML is loaded
– vice versa: addOnUnload()
• Example
<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>

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

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…

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)
• Example
var box = dojo.byId(„bannerTop“);
dojo.style(box, {height : „100px“, width: „200px“-);
<= => dojo.style(„bannerTop“, …);
• dojo.attr(DOMnode|String node, String name, String value)
• Example
var img = dojo.byId(„logo1“);
dojo.attr(img, „alt“, „OrbiTeam“);


Dojo hands-on

PRACTICAL EXAMPLE


Examples - code available at
http://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


The big picture

DOJO BUILDING BLOCKS


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

Thomas Koch 10.08.2010 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 var foo = dojo.byId("foo"); // anchor element
dojo.connect(foo, "onclick", function(evt) {
console.log("anchor clicked");
dojo.stopEvent(evt); //suppress navigation
});

Further Information on Dojo

DOJO RELATED


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
10.08.2010
• Practical Dojo Projects Thomas Koch 20

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/


Dojo Foundation
– http://www.dojofoundation.org/
– home of great open-source projects
– started as the home of
the Dojo Toolkit
– today the Dojo Foundation
is also home of other open
web projects including
cometD, DWR, OpenRecord,
Persevere, and Sizzle.
– Dojo Foundation Board
– vote per committer


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


Getting Started with Dojo Toolkit

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (6)

Similar to Getting Started with Dojo Toolkit

Similar to Getting Started with Dojo Toolkit (20)

More from Thomas Koch

More from Thomas Koch (14)

Recently uploaded

Recently uploaded (20)

Getting Started with Dojo Toolkit