Embed Size (px)
DESCRIPTION
Slides from talk "Getting Started with Dojo Toolkit" at Cologne.JS in August 2010 some sample Dojo Code from my presentation is on http://code.google.com/p/dojodemo/ Cologne.JS is a local JavaScript user group: http://colognejs.de/
Citation preview
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
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)
10.08.2010 Thomas Koch 3
Dojo Sneak Preview: Theme Tester
10.08.2010 Thomas Koch 4
GETTING STARTEDDojo quick-start
10.08.2010 Thomas Koch 5
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)
10.08.2010 Thomas Koch 9
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…
10.08.2010 Thomas Koch 10
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“);
10.08.2010 Thomas Koch 11
PRACTICAL EXAMPLEDojo hands-on
10.08.2010 Thomas Koch 12
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
10.08.2010 Thomas Koch 13
DOJO BUILDING BLOCKSThe big picture
10.08.2010 Thomas Koch 14
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
10.08.2010 Thomas Koch 15
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
10.08.2010 Thomas Koch 16
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
10.08.2010 Thomas Koch 19
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
10.08.2010 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/
10.08.2010 Thomas Koch 21
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
10.08.2010 Thomas Koch 22
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
10.08.2010 Thomas Koch 23
