Dojo - Javascript's Swiss Army Knife (7/15/2009)

JavaScript's Swiss Army Knife Twin Cities Web Design User Group July 15, 2009 Chris Barber CB1, INC. http://www.cb1inc.com

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

What is Dojo? Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

Why Dojo? Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

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

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

Why Dojo? Corporate Backing Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

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

11 /5/ 2 11 007 /21 12 /20 - 1.0 /15 07 - .0 1 2008 / 20 07 .0.1 -1 .0. 2 3/2 6/2 5/1 008 2/2 - 00 1.1. 8- 0 1.1 .1 10 /2/ 11 200 /2/ 8 11 20 - 1. /16 08 - 2.0 12 /200 1.2. /4/ 20 8 - 1 1 2009 08 . Why Dojo? - 1 2.2 .2. 3 Active Development 3/3 1/2 00 4/2 9- 9/2 1.3 00 9 - .0 7/1 1.3 5/2 .1 00 9- 1.3 .2 Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

Why Dojo? Cutting Edge ● Support for latest browsers (IE8, Safari 4, FF3.5) ● Mobile friendly (iPhone, G1) ● cometd ● OAuth ● XMPP ● 2D/3D GFX ● Namespaced (won't conflict with other libraries) Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

Getting Dojo Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

Getting Dojo ● Download ● http://download.dojotoolkit.org ● Subversion ● Releases – svn co http://svn.dojotoolkit.org/src/tags/release-1.3.2 ● Trunk – svn co http://svn.dojotoolkit.org/src/view/anon/all/trunk ● Bazaar ● bzr branch lp:dojo ● Git ● git://github.com/dojo/dojo.git Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

Dojo Architecture Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

Dojo's Architecture Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

Dojo Base Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

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

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

djConfig <html> <head> <title>Dojo!</title> <script type="text/javascript" src="/path/to/dojo.js" djConfig="isDebug:true,parseOnLoad:true"> </script> </head> <body> </body> </html> ● debugAtAllCosts: true/false ● locale: 'ja-jp' ● extraLocale: 'zn-ch' ● baseUrl: 'http://www.domain.com/path/to/dojotoolkit' ● modulePaths: {'cb1','/js/cb1'} ● afterOnLoad: true/false ● addOnLoad: function/array ● useCustomLogger: anything != false ● require: ['dojo.fx', 'dojo.string'] ● defaultDuration: 200 // int milliseconds Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

djConfig.isDebug ● Uses Firebug if installed, otherwise includes Firebug Lite ● console.*() ● assert, count, debug, dir, dirxml, error, group, groupEnd, info, log, profile, profileEnd, time, timeEnd, trace, warn Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

Package System ● dojo.require("dojo.fx") ● Downloads /path/to/dojotoolkit/dojo/fx.js ● dojo.registerModulePath("cb1", "/js/cb1") ● dojo.require("cb1.module") ● Downloads /js/cb1/module.js ● dojo.require("blah.module") ● 404 Error: /path/to/dojotoolkit/some/module.js ● dojo.provide("cb1.module") Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

Browser Detection ● dojo.isMoz ● dojo.isKhtml ● dojo.isFF ● dojo.isWebKit ● dojo.isIE ● dojo.isSafari ● dojo.isAIR ● dojo.isChrome ● dojo.isOpera ● dojo.isQuirks Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

Classes and Inheritance ● dojo.declare() <script type="text/javascript"> dojo.declare("MyObj", null, { say: function(msg){ console.log(msg); } }); var obj = new MyObj; obj.say("Hi!"); </script> ● dojo.extend() <script type="text/javascript"> dojo.extend(MyObj, { sayUpperCase: function(msg){ this.say(msg.toUpperCase()); } }); var obj = new MyObj; obj.sayUpperCase("Hi!"); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

lang ● dojo.isString() ● dojo.mixin() ● dojo.isArray() ● dojo.hitch() ● dojo.isFunction() ● dojo.delegate() ● dojo.isObject() ● dojo.partial() ● dojo.isArrayLike() ● dojo.clone() ● dojo.isAlien() ● dojo.trim() Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

Cool Stuff ● dojo.mixin() <script type="text/javascript"> var obj = { firstName: "chris", lastName: "barber" }; var emp = dojo.mixin({ title: "hacker" }, obj); </script> ● dojo.hitch() <script type="text/javascript"> var obj = new MyObj; var foo = dojo.hitch(obj, "say"); foo("Howdy!"); </script> Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

dojo.query() <script type="text/javascript"> var nodes = dojo.query("li"); // can use CSS3 selectors dojo.query("a").forEach(function(n){ n.innerHTML += "!!"; }); dojo.query("div").style({ padding:"1px", margin:"0px" }); </script> ● slice ● coords ● blur ● splice ● place ● focus ● indexOf ● orphan ● change ● lastIndexOf ● adopt ● click ● every ● query ● error ● some ● filter ● keydown ● attr ● addContent ● keypress ● style ● instantiate ● keyup ● connect ● at ● load ● addClass ● mousedown ● removeClass ● mouseenter ● toggleClass ● mouseleave ● empty ● mousemove ● concat ● mouseout ● map ● mouseover ● forEach ● mouseup ● submit Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

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

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

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

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

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

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

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

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

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

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

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

Dojo Core Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

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

Dijit Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

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

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

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

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

Widget Lifecycle ● constructor() ● postMixInProperties() ● buildRendering() ● postCreate() ● startup() Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

Dojox Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

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

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

Util Twin Cities Web Design User Group | 7 .1 5 .2 0 0 9 | Chris Barber | CB1 , INC. | http://www.cb1 inc.com

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

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

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

Build Profile MyProfile.js dependencies = { stripConsole: "normal", version: "My custom Dojo 1.3.2 build", optimize: "shrinksafe", cssOptimize: "comments", copyTest: false, layers: [ { name: "dojo.js", dependencies: [ "dojo.parser", "dojo.fx" ] }, { name: "../../cb1/common.js", resourceName: "cb1.common", dependencies: [ "dijit.form.Button", "cb1.someModule" ] } ], prefixes: [ ["dijit", "../dijit"], ["dojox", "../dojox"], ["cb1", "../cb1"] ] } Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

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

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

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

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

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

Resources Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

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

Books Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

@dojo @dojocampus @dojobeer Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

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

Questions? Twin Cities Web Design User Group | 7.15.2009 | Chris Barber | CB1, INC. | http://www.cb1inc.com

http://www.slideshare.net	33
http://support2.delta.schoolcenter.com	3
http://schol.as	3
http://203.208.37.132	1
http://blackboard.capital.edu	1

Dojo - Javascript's Swiss Army Knife (7/15/2009)

by Chris Barber on Jul 16, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

Embed Views

Statistics

Dojo - Javascript’s Swiss Army Knife (7/15/2009) — Presentation Transcript

Get analytics right now with SlideShare PRO

An effective way to find out who is viewing your content

Remove ads from all your pages with SlideShare PRO

Your viewers will engage with your content, not ads