This presentation is discusses the awesome Dojo Javascript Toolkit. It was originally presented 7/15/2009 and the Twin Cities Web Design User Group. Enjoy!
1. JavaScript's Swiss Army Knife
Twin Cities Web Design User Group
July 15, 2009
Chris Barber
CB1, INC.
http://www.cb1inc.com
2. About Me
● Chris Barber
● Software Consultant
● Dojo user for over 3 years
● Dojo committer
● http://www.cb1inc.com
● http://twitter.com/cb1kenobi
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
3. What is Dojo?
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
4. What is Dojo?
Dojo is a cutting edge,
powerful, open source
JavaScript toolkit.
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
5. Why Dojo?
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
6. Why Dojo?
Dojo makes creating
rich Internet applications
easier and faster.
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
7. Why Dojo?
Licensing
● New BSD License or Academic Free License
● Clean IP
● Contributor License Agreements (CLA)
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
8. Why Dojo?
100-point Open Source
● 0 points: Say you are open
● 10 points: Choose an OSI license (BSD, AFL, Apache, MIT, etc.)
● 20 points: Define the governance of the code
● Does one company hold all of the cards? (No)
● Can others participate? (Yes)
● For code, who participates? (Committers and contributors)
● Can anyone patch? (Yes, with a CLA)
● Can you, and if so how do you become a committer? (Yes, follow instructions for
contributing patches and getting involved)
● At the core: How are decisions made (In the Open)
● 30 points: A reference implementation under an open source license
● 40 points: Where does the IP stand? (Clean, open, with CLAs). Did you donate it to a
foundation? (Yes)
http://dojofoundation.org/about/hundredpoint
http://almaer.com/blog/being-open-is-hard-as-we-have-seen-this-week
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
9. Why Dojo?
Corporate Backing
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
10. Why Dojo?
Large & Active Developer Community
40+ committers worldwide
http://www.flickr.com/photos/dylans/2944089041
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
11. Why Dojo?
● It's fast!
http://dante.dojotoolkit.org/taskspeed/report/charts.html
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
18. Dojo Base
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
19. Dojo Base
● 26KB (gzipped)
● Bootstrap
● Host detection (browser, SpiderMonkey, Rhino,
Appcelerator Titanium, AIR)
● Package system
● JavaScript enhancements
● Query, DOM, Ajax, Events, FX
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
20. Getting Started
<html>
<head>
<title>Dojo!</title>
<script type="text/javascript"
src="/path/to/dojo.js">
</script>
</head>
<body>
</body>
</html>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
21. XDomain
<html>
<head>
<title>Dojo!</title>
<script type="text/javascript"
src="http://o.aolcdn.com/dojo/1.3.1/dojo/dojo.xd.js">
</script>
</head>
<body>
</body>
</html>
Or use http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
30. DOM Functions
● dojo.byId()
<div id="someNode"></div>
<script type="text/javascript">
var elem = dojo.byId("someNode");
</script>
● dojo.body()
<script type="text/javascript">
var bodyElem = dojo.body();
</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
31. DOM Functions
● dojo.create()
<script type="text/javascript">
dojo.create("div",
{
id: "someNode",
innerHTML: "hi",
"class": "someCssClass",
style: {
border: "solid 1px red"
}
},
dojo.body()
});
</script>
● dojo.destroy()
<script type="text/javascript">
dojo.destroy("someNode");
// or
var node = dojo.byId("someNode");
dojo.destroy(node);
</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
32. DOM Functions
● dojo.attr()
<script type="text/javascript">
var node = dojo.byId("someNode");
dojo.attr(node, "id", "someId");
</script>
● dojo.style()
<script type="text/javascript">
dojo.style(node, "display", "none");
dojo.style(node, {
display: "",
border: "solid 1px red"
});
</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
33. DOM Functions
● dojo.place()
<script type="text/javascript">
var node = dojo.byId("someNode");
dojo.place(node, someOtherNode);
dojo.place(node, someOtherNode, "before");
</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
34. Events
● dojo.addOnLoad()
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.create("div", { innerHTML:"Page loaded!" }, dojo.body());
});
</script>
● dojo.addOnUnload()
<script type="text/javascript">
dojo.addOnUnload(function(){
// example of unloading Google Maps API
GUnload();
});
</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
35. Events
● dojo.connect()
<a href="http://www.cb1inc.com/" id="link">CB1 Website</a>
<script type="text/javascript">
dojo.connect(dojo.byId("link"), "onclick", function(evt){
dojo.stopEvent(evt);
console.log("You clicked the link!");
});
function foo(){ console.log("Hi from foo!"); }
foo(); // outputs "Hi from foo!"
dojo.connect("foo", function(){
console.log("Foo was called!");
});
foo(); // outputs "Hi from foo!" and "Foo was called!"
</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
36. Events
● dojo.disconnect()
<a href="http://www.cb1inc.com/" id="link">CB1 Website</a>
<script type="text/javascript">
var h = dojo.connect(dojo.byId("link"), "onclick", function(evt){
dojo.stopEvent(evt);
console.log("This will only fire once");
dojo.disconnect(h);
});
</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
37. Events - Topics
● dojo.subscribe()
<script type="text/javascript">
var h = dojo.subscribe("myTopic", null, function(msg){
console.log(msg);
});
</script>
● dojo.publish()
<script type="text/javascript">
dojo.publish("myTopic", ["Hello!"]);
</script>
● dojo.unsubscribe()
<script type="text/javascript">
dojo.unsubscribe(h);
</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
38. Ajax
● dojo.xhr()
<script type="text/javascript">
dojo.xhr({
method: "head", // or "get", "post", "put", "delete"
url: "/some/page",
load: function(response, ioArgs) {},
error: function(response, ioArgs) {}
});
</script>
● dojo.xhrGet()
● dojo.xhrPost()
<script type="text/javascript">
dojo.xhrPost({
url: "/some/page",
handleAs: "json", // or "text", "xml", "javascript"
sync: true, // defaults to false
load: function(response, ioArgs) {}
});
</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
39. Ajax
● dojo.deferred awesomeness
<script type="text/javascript">
var deferred = dojo.xhrPost({
url: "/some/page",
load: function(response, ioArgs) {},
error: function(response, ioArgs) {}
});
deferred.addCallback(function(response, ioArgs){});
deferred.addErrback(function(response, ioArgs){});
deferred.addBoth(function(response, ioArgs){});
</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
40. FX
● dojo.fadeIn(), dojo.fadeOut()
<div id="hello">Hello Dojo!</div>
<script type="text/javascript">
dojo.fadeIn({
node: "hello",
start: 0,
duration: 2000,
onEnd: function(){
dojo.fadeOut({
node: "hello",
duration: 1000
}).play();
}
}).play();
</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
41. FX
● dojo.animateProperty()
<div id="hello"
style="position:absolute;">Hello Dojo!</div>
<script type="text/javascript">
dojo.animateProperty({
node: "hello",
duration: 2000,
properties: {
left: {
start: 50,
end: 200,
unit: "px"
},
top: {
start: 50,
end: 400,
unit: "px"
}
}
}).play();
</script>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
42. Dojo Core
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
43. dojo.parser
● djConfig="parseOnLoad:true"
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.declare("cb1.awesome", null, {
constructor: function(params, node){
console.debug(params);
console.debug(node);
node.innerHTML = "Hello!";
}
});
</script>
<div dojoType="cb1.awesome"></div>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
44. More Dojo Core
● Unified Data API ● Utilities
● dojo.data ● dojo.string
● Drag n Drop ● dojo.date
● dojo.dnd ● dojo.regexp
● Advanced FX ● I/O Transports
● dojo.fx ● dojo.io.iframe
● Internationalization ● dojo.io.script
● dojo.i18n
● dojo.rpc
● Google Gears
● Browser History
● dojo.gears
● dojo.back
● OpenAjax
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
45. Dijit
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
46. What is Dijit?
● Dojo's widget system
● Huge library of existing widgets
● Form elements
– Buttons, drop downs, input fields, etc
● Layout widgets
– Content pane, accordions, tab container, stack container, etc
● Rich experience widgets
– Tree, progress bar, dialog, tooltip, menu, rich text editor, etc
● Accessibility (a11y)
● Templated - externalized HTML templates
● Themes (tundra, soria, nihilo, noir)
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
47. Simple Widget Example
/js/cb1/SimpleWidget.js
dojo.provide("cb1.SimpleWidget");
dojo.require("dijit._Widget");
dojo.declare("cb1.SimpleWidget", dijit._Widget, {
postCreate: function(){
this.domNode.innerHTML = "Hello Dojo!";
}
});
test_Simple.html
<html>
<head>
<title>Simple Widget Example</title>
<script type="text/javascript" src="/release-1.3.2/dojo/dojo.js"
djConfig="isDebug:true,parseOnLoad:true,modulePaths:{'cb1':'../cb1'}">
</script>
<script type="text/javascript">
dojo.require("cb1.SimpleWidget");
</script>
</head>
<body>
<h1>Hi Dojo!</h1>
<div dojoType="cb1.SimpleWidget">
</body>
</html>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
48. Templated Example
/js/cb1/CapitalizedTextBox.js
dojo.provide("cb1.CapitalizedTextBox");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.declare("cb1.CapitalizedTextBox", [dijit._Widget, dijit._Templated], {
templatePath: dojo.moduleUrl("cb1", "templates/CapitalizedTextBox.html"),
_onKeyUp:function(){
this.textBox.value = this.textBox.value.toUpperCase();
}
});
/js/cb1/templates/CapitalizedTextBox.html
<div>
<input type="text" dojoAttachPoint="textBox"
dojoAttachEvent="onkeyup:_onKeyUp">
</div>
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
49. Declarative Instantiation
test_CapitalizedTextBox.html
<html>
<head>
<title>Capitalized Example</title>
<script type="text/javascript" src="/release-1.3.2/dojo/dojo.js"
djConfig="isDebug:true,parseOnLoad:true,modulePaths:{'cb1':'../cb1'}">
</script>
<script type="text/javascript">
dojo.require("cb1.CapitalizedTextBox");
</script>
</head>
<body>
<h1>Hi Dojo!</h1>
<input dojoType="cb1.CapitalizedTextBox">
</body>
</html>
Note: input field is still usable if JavaScript is disabled.
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
50. Programatic Instantiation
test_CapitalizedTextBox.html
<html>
<head>
<title>Capitalized Example</title>
<script type="text/javascript" src="/release-1.3.2/dojo/dojo.js"
djConfig="isDebug:true,modulePaths:{'cb1':'../cb1'}">
</script>
<script type="text/javascript">
dojo.require("cb1.CapitalizedTextBox");
dojo.addOnLoad(function(){
new cb1.CapitalizedTextBox({ /* params */ }, "myField");
});
</script>
</head>
<body>
<h1>Hi Dojo!</h1>
<input id="myField">
</body>
</html>
Twin Cities Web Design User Group | 7 .1 5 .2 0 0 9 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
51. Widget Lifecycle
● constructor()
● postMixInProperties()
● buildRendering()
● postCreate()
● startup()
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
52. Dijit Layout Widgets
● BorderContainer
● ContentPane
● LinkPane
● TabContainer
● AccordionContainer
● SplitContainer
● StackContainer
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
53. Dojox
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
54. What is Dojox?
● Place for extra stuff
● Stuff that isn't ready for prime time
● (i.e. dojox.grid)
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
55. Tour of Dojox
● dojox.analytics ● dojox.form
● Client monitoring ● Additional form widgets
● dojox.charting ● dojox.fx
● dojox.cometd ● Cool FX
● dojox.data ● dojox.gfx
● Tons of data stores ● Cross-browser vector
graphics (SVG/VML)
● dojox.dtl
● dojox.gfx3d
● Django template library
● dojox.grid
● dojox.embed
● Grid widget
● Embed Flash, QuickTime
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
56. Tour of Dojox
● dojox.highlight ● dojox.rpc
● Syntax highlighting ● dojox.secure
● dojox.image ● Sandboxing
● Lightboxes, slideshow, ● dojox.storage
gallery, magnifier, etc ● Persistent client-side
● dojox.io storage
● Additional transports ● dojox.widgets
● dojox.layout ● Additional dijit widgets
● Dijit layout widgets ● dojox.xmpp
● dojox.off ● XMPP client
● Offline support
Twin Cities Web Design User Group | 7 .1 5 .2 0 0 9 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
57. Util
Twin Cities Web Design User Group | 7 .1 5 .2 0 0 9 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
58. Util
● Build system
● DOH - Dojo Objective Harness
● Testing framework
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
59. Build System
● Reduce number of files sent over the wire
● Reduce JavaScript file sizes
● Profiles
● Layers
● Build script
● Executes Java, Rhino
● Compiles modules into layer .js files
● Strips whitespace, comments, console.*(), etc
● Minification (i.e. "var something = 123;" becomes "var _0=123;"
● Inlines widget HTML templates & @import CSS
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
60. Build System
● Build script in /util/buildscripts
● build.sh (GNU/Linux, MacOSX, Solaris, Unix)
● build.bat (Windows)
● Pre-defined profiles in /util/buildscripts/profiles
● base
● cometd
● demos-all
● dtkapi
● fx
● layers
● offline
● rhino
● sql
● standard
● standardCustomBase
● storage
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
62. Running a Build
cd release-1.3.2/util/buildscripts
./build.sh profileFile=/path/to/MyProfile.js action=clean,release
releaseDir=../../.. releaseName=mybuild
● Creates a directory next to release-1.3.2 called
"mybuild"
● <script src="/mybuild/dojo/dojo.js">
Twin Cities Web Design User Group | 7 .1 5 .2 0 0 9 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
63. Advanced Builds
● customBase (6KB dojo.js)
● Conditional exclusions
//>>excludeStart("webkitMobile", kwArgs.webkitMobile);
dojo.create("div", {
innerHTML: "This won't appear on an iPhone!"
}, dojo.body());
//>>excludeEnd("webkitMobile");
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
64. Advanced Builds
● Running Multiple Versions of Dojo
● scopeDjConfig
– Burn a djConfig into the build
● scopeMap
dependencies = {
stripConsole: “normal",
version: “My custom Dojo 1.3.2 build",
optimize: “shrinksafe",
cssOptimize: “comments",
copyTest: false,
scopeDjConfig: { isDebug:true, parseOnLoad:true },
scopeMap: [
[“dojo", “mydojo"],
[“dijit", “mydijit"],
[“dojox", “mydojox"],
],
layers: [ /* snip */ ],
prefixes: [ /* snip */ ]
}
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
65. Dojo Toolbox Build GUI
● Pretty UI
● Doesn't support ShrinkSafe
● Currently not up-to-date
Twin Cities Web Design User Group | 7 .1 5 .2 0 0 9 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com
66. Dojo Management (or what I do)
● Put Dojo in your version control repo (or externally
reference)
● Don't put builds into the repo
● Directory Structure:
/myproject
/dojo-build
build.sh
build.profile.js
/public
/js
/cb1
/dojo-1.3.2
/dojo
/dijit
/dojox
/util
/js-build Created by the build
/cb1
/dojo-1.3.2
/dojo
/dijit
/dojox
index.html
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
67. Dojo Management (or what I do)
● build.sh
#!/bin/sh
cd ../public/js/dojo-1.3.2/util/buildscripts
./build.sh profileFile=../../../../../dojo-build/build.profile.js
action=clean,release releaseDir=../../../../ releaseName=js-build
cd ../../../../../dojo-build
● Run build.sh after doing a pull/checkout/update
● Consider multiple scripts/profiles
● build-frontend.sh & frontend.profile.js
● build-backend.sh & backend.profile.js
● build-dev.sh & dev.profile.js
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
68. Resources
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
69. Documentation
● API Docs
● http://api.dojotoolkit.org
● Online Docs
● http://docs.dojocampus.org
● Blogs
● http://dojotoolkit.org/rss.xml
● http://dojocampus.org/content/feed
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
70. Getting Help
● IRC
● #dojo on irc.freenode.net
● dojo-interest Mailing List
● http://dojotoolkit.org/mailman/listinfo/dojo-interest
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
71. Books
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
72. Dojo Gatherings
● Dojo Developer Days
● Usually annual
● Usually 2 days (contributor day & community day)
● dojo.beer()
● Worldwide meet ups
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
73. @dojo
@dojocampus
@dojobeer
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
74. Solution Providers
● Web app development ● Training
● Single page apps ● Web app development
● Custom widgets ● Support
● Support ● Expert advice
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com
75. Questions?
Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com