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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (7)

En vedette

En vedette (6)

Similaire à Getting Started with Dojo Toolkit

Similaire à Getting Started with Dojo Toolkit (20)

Plus de Thomas Koch

Plus de Thomas Koch (14)

Dernier

Dernier (20)

Getting Started with Dojo Toolkit