Search

Zero To Dojo

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    3 Favorites

    Zero To Dojo - Presentation Transcript

    1. 0 to Production December 3, 2008 Peter Higgins SpringOne Americas
    2. Me. © SitePen, Inc. 2008. All Rights Reserved
    3. Show of Hands? © SitePen, Inc. 2008. All Rights Reserved
    4. Quick Start © SitePen, Inc. 2008. All Rights Reserved
    5. Notes about Dojo Long Standing Development Large, Active Developer Base Friendly Professional Community Liberally Licensed, Clean IP © SitePen, Inc. 2008. All Rights Reserved
    6. 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
    7. Base © SitePen, Inc. 2008. All Rights Reserved
    8. Using Dojo Base <html> <head> <title>Hello, Dojo</title> <!-- load Dojo from a CDN: --> <script type=\"text/javascript\" src=\"http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js\"> </script> </head> <body> </body> </html> © SitePen, Inc. 2008. All Rights Reserved
    9. 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
    10. 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
    11. 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
    12. 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
    13. The Core © SitePen, Inc. 2008. All Rights Reserved
    14. 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
    15. 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
    16. 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
    17. The Dojo Widget Framework © SitePen, Inc. 2008. All Rights Reserved
    18. Take Your Pick Compartmentalized Behavior using Existing Markup Fully dynamic, reusable Templated components Extend existing or Create ... © SitePen, Inc. 2008. All Rights Reserved
    19. Includes Suite of Widgets Layouts - Accordions, Tabs Form - Validation and more ... WYSIWYG Editor Tree, Sliders, ProgressBar ... © SitePen, Inc. 2008. All Rights Reserved
    20. Setup is Easy <html> <head> <title>index.html</title> <!-- some css --> <link rel=”stylesheet” href=”dojotoolkit/dijit/themes/tundra/tundra.css”> <script type=\"text/javascript\" src=\"dojotoolkit/dojo/dojo.js\"></script> </head> <body class=”tundra”> </body> </html> © SitePen, Inc. 2008. All Rights Reserved
    21. 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
    22. CSS Driven Skinning Three full themes: Tundra Soria Nihilo Fully customizable Even easier with constraints: Embedded WebKit ? © SitePen, Inc. 2008. All Rights Reserved
    23. Full Localization (i18n) Support © SitePen, Inc. 2008. All Rights Reserved
    24. Full Accessibility (a11y) Support Screen reader support High contrast mode support Keyboard navigation ... with every Dijit © SitePen, Inc. 2008. All Rights Reserved
    25. 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
    26. 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
    27. 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
    28. 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
    29. 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
    30. © SitePen, Inc. 2008. All Rights Reserved
    31. 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
    32. ... there’s more: DojoX GFX Cross-browser vector graphics GFX API, Charting: 2d / 3d, GFX Animation © SitePen, Inc. 2008. All Rights Reserved
    33. DojoX: DataGrid Fully dojo.data-Ready Lazy Row Selection,Virtual Scrolling Simplified Use: Layout Ready, Easy instantiation © SitePen, Inc. 2008. All Rights Reserved
    34. 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
    35. 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
    36. Simple Gems: Google Analytics Why Write This? <script type=\"text/javascript\"> var gaJsHost = ((\"https:\" == document.location.protocol) ? \"https://ssl.\" : \"http://www.\"); document.write(unescape(\"%3Cscript src='\" + gaJsHost + \"google- analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E\")); </script> <script type=\"text/javascript\"> var pageTracker = _gat._getTracker(\"UA-xxxxxx-x\"); pageTracker._trackPageview(); </script> © SitePen, Inc. 2008. All Rights Reserved
    37. 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
    38. in Production © SitePen, Inc. 2008. All Rights Reserved
    39. 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
    40. 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
    41. 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
    42. Resources © SitePen, Inc. 2008. All Rights Reserved
    43. 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
    44. Additional Documentation Dojo Dead Trees! © SitePen, Inc. 2008. All Rights Reserved
    45. That’s © SitePen, Inc. 2008. All Rights Reserved
    46. Questions? © SitePen, Inc. 2008. All Rights Reserved

    + Peter HigginsPeter Higgins, 11 months ago

    custom

    3926 views, 3 favs, 0 embeds more stats

    Slides From my talk at SpringOne America 2008 - Doj more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 3926
      • 3926 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 124
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved