Zero To Dojo
Upcoming SlideShare
Loading in...5
×
 

Zero To Dojo

on

  • 12,640 views

Slides From my talk at SpringOne America 2008 - Dojo: 0 to Production

Slides From my talk at SpringOne America 2008 - Dojo: 0 to Production

Statistics

Views

Total Views
12,640
Views on SlideShare
12,624
Embed Views
16

Actions

Likes
16
Downloads
633
Comments
2

1 Embed 16

http://www.slideshare.net 16

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • wwww
    Are you sure you want to
    Your message goes here
    Processing…
  • We do need such tutorial for those who starts from 0
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Zero To Dojo Zero To Dojo Presentation Transcript

  • 0 to Production December 3, 2008 Peter Higgins SpringOne Americas
  • Me. © SitePen, Inc. 2008. All Rights Reserved
  • Show of Hands? © SitePen, Inc. 2008. All Rights Reserved
  • Quick Start © SitePen, Inc. 2008. All Rights Reserved
  • Notes about Dojo Long Standing Development Large, Active Developer Base Friendly Professional Community Liberally Licensed, Clean IP © SitePen, Inc. 2008. All Rights Reserved
  • Notes about Dojo Comprised of Base, Core, Dijit, and DojoX Uni ed Tools and Components Extras: ShrinkSafe, Build Utils D.O.H. © SitePen, Inc. 2008. All Rights Reserved
  • Base © SitePen, Inc. 2008. All Rights Reserved
  • Using Dojo Base <html> <head> <title>Hello, Dojo</title> <!-- load Dojo from a CDN: --> <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
  • The Core © SitePen, Inc. 2008. All Rights Reserved
  • More Patterns Use at will - everything additive. No dependency tracking - just dojo.require(“it”) Few, if any, “rules” Scale: Grows to t your needs © 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
  • Additional Debugging FireBug Lite Shipped console.* provided in less sane browsers Load with djCon g = { isDebug:true } if(dojo.con g.isDebug){ .. } © SitePen, Inc. 2008. All Rights Reserved
  • The Dojo Widget Framework © SitePen, Inc. 2008. All Rights Reserved
  • Take Your Pick Compartmentalized Behavior using Existing Markup Fully dynamic, reusable Templated components Extend existing or Create ... © SitePen, Inc. 2008. All Rights Reserved
  • Includes Suite of Widgets Layouts - Accordions, Tabs Form - Validation and more ... WYSIWYG Editor Tree, Sliders, ProgressBar ... © SitePen, Inc. 2008. All Rights Reserved
  • Setup is Easy <html> <head> <title>index.html</title> <!-- some css --> <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”); <!-- or declaratively in markup --> <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
  • CSS Driven Skinning Three full themes: Tundra Soria Nihilo Fully customizable Even easier with constraints: Embedded WebKit ? © SitePen, Inc. 2008. All Rights Reserved
  • Full Localization (i18n) Support © SitePen, Inc. 2008. All Rights Reserved
  • Full Accessibility (a11y) Support Screen reader support High contrast mode support Keyboard navigation ... with every Dijit © 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 Extensions Leverage the Dijit widget system for speci c purposes Reuse Existing a11y and i18n code in Dijit © 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
  • © 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
  • ... there’s more: DojoX GFX Cross-browser vector graphics GFX API, Charting: 2d / 3d, GFX Animation © SitePen, Inc. 2008. All Rights Reserved
  • DojoX: DataGrid Fully dojo.data-Ready Lazy Row Selection,Virtual Scrolling Simplified Use: Layout Ready, Easy instantiation © 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”); <!-- and create in markup --> <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
  • in Production © 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
  • D.O.H - Unit test Suite Supports Build Up, Tear Down, sync or async Testing doh.robot - Automated UI Unit testing © SitePen, Inc. 2008. All Rights Reserved
  • Resources © 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
  • Additional Documentation Dojo Dead Trees! © SitePen, Inc. 2008. All Rights Reserved
  • That’s © SitePen, Inc. 2008. All Rights Reserved
  • Questions? © SitePen, Inc. 2008. All Rights Reserved