Zero To Dojo

0 to Production December 3, 2008 Peter Higgins SpringOne Americas

Using Dojo Base <html> <head> <title>Hello, Dojo</title>  <script type=quot;text/javascriptquot; src=quot;http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.jsquot;> </script> </head> <body> </body> </html> © SitePen, Inc. 2008. All Rights Reserved

Aka: dojo.js (26KB of Joy) Ajax: dojo.xhr, dojo.xhrGet, dojo.xhrPost ... Events: normalization, keys, Objects or Nodes DOM/CSS: dojo.byId, dojo.style, dojo.place, dojo.attr Animation: dojo.fadeIn/Out, dojo.animateProperty Query/NodeList: CSS3 Selectors. aka: All of the Above Advanced JS: dojo.delegate, .hitch, .partial, .exists ... dojo.declare Native JS: forEach, map, lter, some, every, indexOf ... Browser Sni ng: dojo.isIE < 7, isFF, isWebKit ... © SitePen, Inc. 2008. All Rights Reserved

Patterns in Dojo // style and add class to a node: dojo.addClass(“someNode”, “someClass”); dojo.style(“someNode”, { opacity:0.5, lineHeight:”1.3em” }); dojo.attr(“someNode”, { id:”newId” }); // or chained dojo.query(“#someNode”) .addClass(“someClass”) .attr({ id:”newId” }) .style({ opacity:0.5, lineHeight:”1.3em” }) // connect: dojo.connect(dojo.byId(“foo”), “onclick”, function(e){...}); // or connect: dojo.query(“#foo”).connect(“onclick”, function(e){ ... }); // or sugar: dojo.query(“#foo”).onclick(function(e){ ... }); © SitePen, Inc. 2008. All Rights Reserved

Simple OO, Simulated Inheritance dojo.declare(“some.Person”, null, { name: ”default”, constructor: function(args){ dojo.mixin(this, args); } }); dojo.declare(“some.Employee”, some.Person, { employeeId: 0 }); var bob = new some.Person({ name:”Bob Bobson” }); var joy = new some.Employee({ name:”Joy”, employeeId:24 }); © SitePen, Inc. 2008. All Rights Reserved

Package System == modular code And more... Works with Dojo and custom code Local: dojo.require(“dojo.io.script”); dojo.require(“my.Widget”); Robust: dojo.registerModulePath(“external”, “/external/js”); dojo.require(“external.Thinger”); Easy: dojo.provide(“my.Widget”); Ready: dojo.addOnLoad, .addOnUnLoad ... © SitePen, Inc. 2008. All Rights Reserved

Added Joy - a require() away dojo.data - Uni ed Data API dojo.dnd - Drag and Drop API dojo.fx / dojo.NodeList-fx - Additional Advanced FX dojo.i18n - Internationalization tools dojo.string, dojo.date, dojo.regexp - Common utility dojo.io.iframe, dojo.io.script, dojo.rpc - Advanced IO ... more: dojo.behavior, dojo.html, dojo.gears, dojo.cookie, dojo.parser, dojo.jaxer ... © SitePen, Inc. 2008. All Rights Reserved

Setup is Easy <html> <head> <title>index.html</title>  <link rel=”stylesheet” href=”dojotoolkit/dijit/themes/tundra/tundra.css”> <script type=quot;text/javascriptquot; src=quot;dojotoolkit/dojo/dojo.jsquot;></script> </head> <body class=”tundra”> </body> </html> © SitePen, Inc. 2008. All Rights Reserved

Flexible Instantiation // load the resource: dojo.require(“dijit.dijit”); // Base Dijit dojo.require(“dijit.Dialog”); // Dialog Code // create programatically: var myDialog = new dijit.Dialog({ title:”Login” }, “formArea”);  <div id=”formArea” dojoType=”dijit.Dialog” title=”Login”> <p>...</p> </div> // access the instance: dijit.byId(“formArea”).show(); // myDialog.show(); © SitePen, Inc. 2008. All Rights Reserved

Custom Widgets dojo.provide(“my.Widget”); dojo.require(“dijit._Widget”); dojo.require(“dijit._Templated”); // define: dojo.declare(“my.Widget”, [dijit._Widget, dijit._Templated], { value:”default”, templatePath: dojo.moduleUrl(“my.templates”, “Widget.html”, postCreate: function(args){ // init code } }); // instantiate: new my.Widget({ value:”bar” }, “someNode”); // declarative way: <input id=”someNode” dojoType=”my.Widget” value=”Foo”> © SitePen, Inc. 2008. All Rights Reserved

Custom Widgets: Subclassing dojo.require(“dijit.Dialog”); // “subclassing”: dojo.declare(“my.Dialog”, dijit.Dialog, { canShow: true, show: function(){ if(this.canShow){ // then call inherited: this.inherited(arguments); } } }); var showable = new my.Dialog({ canShow: false }); © SitePen, Inc. 2008. All Rights Reserved

Ultra Rapid Prototyping <div id=”foo” dojoType=”dijit.Dialog” title=”Hello”> <p> ... </p> <script type=”dojo/method” event=”hide”> // override instance’s hide() method ... test. </script> <script type=”dojo/connect” event=”show”> // monitor instance’s show() method ... </script> </div> © SitePen, Inc. 2008. All Rights Reserved

Helping Designers /* Convenience Rules added to <html> element */ .mybox { width:250px; } /* love the quirks: */ .dj_ie6 .mybox { margin-right:1px } .dj_ie7 .mybox { margin-right:2px; } .dj_quirks .mybox { margin:3px; } © SitePen, Inc. 2008. All Rights Reserved

Extensions, Extras, Experiments Extend Dijit: dojox.widget, dojox.layout, dojox.form Additional FX: dojox.fx Morph, Text, Extras ... Image Gadgets: FlickrBadge, Lightbox (Nano), SlideShow ... Comet: dojox.cometd Advanced IO: RPC, REST, SMD, ScriptFrame ... © SitePen, Inc. 2008. All Rights Reserved

dojox.data Stores AndOrReadStore GoogleSearchStore AppStore HtmlStore AtomReadStore jsonPathStore CouchDBRestStore jsonRestStore CssRuleStore OpmlStore CsvStore QueryReadStore FileStore ServiceStore FlickrRestStore / S3Store FlickrStore WikipediaStore GoogleFeedStore XmlStore © SitePen, Inc. 2008. All Rights Reserved

Other Goodies dojox.av - Audio / Video helpers dojox.dtl - django templating system implementation dojox.o , dojox.storage - O ine helpers dojox.lang - Advanced JS techniques dojox.xmpp - Full protocol implementation dojox.validate - Regexps + Functions ... much, much more! © SitePen, Inc. 2008. All Rights Reserved

Simple Gems: Google Analytics Why Write This? <script type=quot;text/javascriptquot;> var gaJsHost = ((quot;https:quot; == document.location.protocol) ? quot;https://ssl.quot; : quot;http://www.quot;); document.write(unescape(quot;%3Cscript src='quot; + gaJsHost + quot;google- analytics.com/ga.js' type='text/javascript'%3E%3C/script%3Equot;)); </script> <script type=quot;text/javascriptquot;> var pageTracker = _gat._getTracker(quot;UA-xxxxxx-xquot;); pageTracker._trackPageview(); </script> © SitePen, Inc. 2008. All Rights Reserved

Simple Gems: Google Analytics with Dojo Just Write This: // load the resource dojo.require(“dojox.analytics.Urchin”);  <div dojoType=”dojox.analytics.Urchin” acct=”12345-UA-23”></div> // or in script: new dojox.analytics.Urchin({ acct:”UA-xxxxx-x” }); © SitePen, Inc. 2008. All Rights Reserved

Dojo Build System Reduce number of HTTP requests Template Interning and resource concatenation Reduce JavaScript le size: Remove Comments and whitespace Variable obfuscation (ShrinkSafe) CSS Optimization Comment Removal @import “...” concatenation StripConsole options © SitePen, Inc. 2008. All Rights Reserved

Advanced Builds Stubs Dojo (6k dojo.js) Custom Base “Layers” Automatic dependency tracking Cross-dependent layers RestoreRequire X-Domain Dojo - Local CDN BuildExclude syntax © SitePen, Inc. 2008. All Rights Reserved

Basic Documentation Full API Docs: http://api.dojotoolkit.org Full On-Line Docs: http://docs.dojocampus.org O ine Docs: http://sitepen.com/labs/toolbox Tutorials, Blogs, Examples: http://dojocampus.org © SitePen, Inc. 2008. All Rights Reserved

Zero To Dojo

by Peter Higgins

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 16

Statistics

Zero To Dojo Presentation Transcript