dojo.things()


                   Peter Higgins (dante)
                  Dojo Toolkit Project Lead
                 Zend...
me.
                             http://twitter.com/phiggins
                             http://dante.dojotoolkit.org

  ...
Thursday, October 22, 2009
The History of Dojo
                                  (über-cliffnote version)




Thursday, October 22, 2009
A Foundation.




Thursday, October 22, 2009
A Team.




             http://demos.dojotoolkit.org/demos/skew/




Thursday, October 22, 2009
The Dojo Toolkit



         • Long standing Development
         • Friendly Professional Community
         • Liberally L...
What is Dojo?

            • Unified JavaScript Toolkit
              - Supafast Light-weight Base (6k - 30k)
             ...
http://xkcd.com/353

Thursday, October 22, 2009
It’s just JavaScript.




Thursday, October 22, 2009
Base Dojo (aka: dojo.js)




Thursday, October 22, 2009
<?php echo $this->dojo() ?>




Thursday, October 22, 2009
What you get:
            •   DOM:
                  -   byId, attr, place, clone, create, empty, position
            •  ...
dojo.query / dojo.NodeList

            • Fastest available Selector Engine - “Acme”
            • 1:1 pairing with dojo.*...
Dojo Plugins

               // give all NodeList instances a hash of new functions:
               dojo.extend(dojo.NodeL...
Bling.

               (function($){

                     $(“#foo .bar”)
                        .onclick(function(e){
  ...
Package Basics

            • API:
              - provide(module)
              - require(module)
              - platfor...
With Zend Framework ...
               // teh php:
               $this->dojo()->enable()
                  ->registerModu...
Using “layers”

               // teh php:
               $this->dojo()->enable()
                  ->registerModulePath(“...
Ajax is eaaaaasy

            • All route through dojo.xhr(verb, kwArgs)
            • Common dojo.Deferred interface
    ...
Ajax is eaaaaasy
               // basic.
               dojo.xhrGet({
                   url:”/foo”,
                   l...
Custom Content Handlers

               // define the content-handler
               dojo.mixin(dojo.contentHandlers, {
  ...
Events

            • dojo.connect
               - DOM or Functional
               - Built-in scoping (everywhere!)
    ...
Events

               var n = dojo.byId(“foo”);

               // plain ole’ onclick
               dojo.connect(n, “cli...
Topics



               // same hitching pattern:
               dojo.subscribe(“/are/you/listening”, function(a, b, c){ ...
hitch()

               // mini singleton
               var myObj = {
                  counter:0,
                  addO...
hitch() for Classes

               dojo.declare(“my.Thing”, null, {
                   url:”/foo”,
                   mes...
FX

            • dojo.animateProperty(kwArgs)
            • dojo.anim(node, props, ...)
            • dojo.fadeOut(kwArgs...
Animation Events

               var anim = dojo.fadeOut({ node:”bar” });
               dojo.connect(anim, “onEnd”, funct...
FX++

            • dojo.require(“dojo.fx”); // or dojox.fx ...
            • dojo.fx.chain([animations])
            • do...
Core Dojo




Thursday, October 22, 2009
dojo.require() away

            • dojo.data
              - Common API for data handling
            • Advanced I/O
     ...
Behavior?

               dojo.behavior.add({
                   “.foo .bar”: function(n){
                      // newly ...
Firebug Lite


Thursday, October 22, 2009
Dijit (Dojo Widgets)




Thursday, October 22, 2009
Dijit widget system

            • dijit._Widget / dijit._Templated / etc
            • dijit.Dialog / dijit.layout.TabCon...
Declarative vs Programatic


               new dijit.Dialog({
                   title:”Hi There”,
                   hre...
Declarative vs Programatic



               Zend_Dojo_View_Helper_Dojo::setUseDeclarative();

               Zend_Dojo_Vi...
customDijit FTW!
               // consider:
               new my.Thing({ someAttribute:”something” }, “nodeid”)

       ...
DojoX
                             (X !== experimental)




Thursday, October 22, 2009
DojoX, briefly.

            • Sandbox
            • Cutting Edge
            • Un-categorized




Thursday, October 22, 20...
DojoX, briefly.

            • dojox.gfx
            • dojox.charting
            • dojox.cometd / org.cometd
            •...
RPC / SMD


               dojo.require(“dojox.rpc.Service”);

               var goog = new dojox.rpc.Service(“google.smd...
dojox.data Stores:
            • AndOrReadStore     • FlickrRestStore /
            • AppStore             FlickrStore
   ...
Dojo Build System




Thursday, October 22, 2009
All-in-One

            • Works transparently with Package System
            • Group modules into ‘layers’
            • ...
#ifdef in JavaScript?

        // the code:
        //>>excludeStart(“something”, kwArgs.condition == true);
        /* co...
Development Debugging

               // ...
               handler: function(data){
                  if(data && !data.er...
Special Builds

            • Stubs (6k dojo.js)
            • Base++ (dojo.js with modules)
            • Cross-Domain
  ...
MooJo?




Thursday, October 22, 2009
scopeMap + kwArgs


               // Dojo?
               Moo.load(function(){
               
    place("<p>Hello, Moojo...
//>>excludeStart(“auto”, kwArgs.autoConflict == “on”)
               if(dojo.config.conflict){
               //>>excludeS...
Questions?




Thursday, October 22, 2009
Gracias.

                                 (me, again)
                                 dante@dojotoolkit.org
            ...
Some resources:
                                     http://dojotoolkit.org
                               http://dojocamp...
Upcoming SlideShare
Loading in …5
×

dojo.things()

4,659 views

Published on

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
4,659
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
226
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

dojo.things()

  1. 1. dojo.things() Peter Higgins (dante) Dojo Toolkit Project Lead ZendCon 2009 (#zendcon) October 19 - 23 Thursday, October 22, 2009
  2. 2. me. http://twitter.com/phiggins http://dante.dojotoolkit.org http://joind.in/936 Thursday, October 22, 2009
  3. 3. Thursday, October 22, 2009
  4. 4. The History of Dojo (über-cliffnote version) Thursday, October 22, 2009
  5. 5. A Foundation. Thursday, October 22, 2009
  6. 6. A Team. http://demos.dojotoolkit.org/demos/skew/ Thursday, October 22, 2009
  7. 7. The Dojo Toolkit • Long standing Development • Friendly Professional Community • Liberally Licensed, Clean IP http://dojotoolkit.org http://dojofoundation.org Thursday, October 22, 2009
  8. 8. What is Dojo? • Unified JavaScript Toolkit - Supafast Light-weight Base (6k - 30k) - Package System - Use at will Library - Countless tools - Exposed Foundations - Defined deprecation policies - Defined release policies Thursday, October 22, 2009
  9. 9. http://xkcd.com/353 Thursday, October 22, 2009
  10. 10. It’s just JavaScript. Thursday, October 22, 2009
  11. 11. Base Dojo (aka: dojo.js) Thursday, October 22, 2009
  12. 12. <?php echo $this->dojo() ?> Thursday, October 22, 2009
  13. 13. What you get: • DOM: - byId, attr, place, clone, create, empty, position • CSS: - style, addClass, removeClass, toggleClass, hasClass • Ajax: - xhr, xhrGet/Post/Delete/Put, Deferred • Language: - connect, hitch, partial, delegate, declare, mixin, extend • Array: - forEach, map, filter, indexOf, lastIndexOf, some, every • JSON: - toJson, fromJson, queryToObject, objectToQuery, formToJson/Object/Query • FX: - Color Animations, anim, animateProperty, fadeIn/Out - http://download.dojotoolkit.org/current-stable/cheat.html Thursday, October 22, 2009
  14. 14. dojo.query / dojo.NodeList • Fastest available Selector Engine - “Acme” • 1:1 pairing with dojo.* functions - dojo.style(“nodeid”, { props }) // fast - dojo.query(“#nodeid”).style({ props }) // sugar • Syntatic Sugar for events: - dojo.query(“.bar”).onclick(fnA).onmouseenter(fnB) Thursday, October 22, 2009
  15. 15. Dojo Plugins // give all NodeList instances a hash of new functions: dojo.extend(dojo.NodeList, { color: function(color){ // set nodes to a color. getter/setter: return this.style(“color”, color); }, html: function(markup){ // set the HTML to some passed markup snippet return this.forEach(function(n){ n.innerHTML = markup; }); } }); Thursday, October 22, 2009
  16. 16. Bling. (function($){ $(“#foo .bar”) .onclick(function(e){ // normalized ‘e’ }) .forEach(function(n){ // closed ‘n’ dojo.attr(n, “title”, “Touched”) }) .attr(“title”, “ReTouched!”) ; })(dojo.query); Thursday, October 22, 2009
  17. 17. Package Basics • API: - provide(module) - require(module) - platformRequire(platform, module) - requireIf(someCondition, module) - registerModulePath(namespace, path) Thursday, October 22, 2009
  18. 18. With Zend Framework ... // teh php: $this->dojo()->enable() ->registerModulePath(“myns”, “../myns”) ->requireModule(“myns.plugin”); // and js: ../myns/plugin.js dojo.provide(“myns.plugin”); (function($, d){ d.extend(d.NodeList, { ... }); d.declare(“myns.Thing”, null, { template: d.cache(“myns”, “templates/Thing.html”), constructor: function(args, node){ d.mixin(this, args); d.place(this.template, node, “replace”); } }); })(dojo.query, dojo); Thursday, October 22, 2009
  19. 19. Using “layers” // teh php: $this->dojo()->enable() ->registerModulePath(“myns”, “../myns”) ->requireModule(“myns.kernel”); // or: $view->dojo()->addLayer(“/js/myns/kernel.js”); // and js: ../myns/kernel.js dojo.provide(“myns.kernel”); dojo.require(“myns.stuff”); dojo.require(“dojox.image.LightboxNano”); dojo.require(“myns.FirstWidget”); Thursday, October 22, 2009
  20. 20. Ajax is eaaaaasy • All route through dojo.xhr(verb, kwArgs) • Common dojo.Deferred interface • Definable custom content handlers Thursday, October 22, 2009
  21. 21. Ajax is eaaaaasy // basic. dojo.xhrGet({ url:”/foo”, load: function(data){ dojo.byId(“bar”).innerHTML = data; } }); // direct dfd var inflight = dojo.xhrGet({ url:”/foo” }) .addCallback(function(data){ ... }) .addErrback(function(error){ ... }) ; // alternate content-type: dojo.xhrPost({ url:”/foo/bar”, handleAs:”json”, load: function(data){ for(var i in data){ ... } } }); Thursday, October 22, 2009
  22. 22. Custom Content Handlers // define the content-handler dojo.mixin(dojo.contentHandlers, { loadInto: function(xhr){ var n = dojo.byId(xhr.ioArgs.node); n.innerHTML = xhr.responseText; } }); // use the content-handler dojo.xhrGet({ url:”/foo”, handleAs:”loadInto”, node:”someId” }); Thursday, October 22, 2009
  23. 23. Events • dojo.connect - DOM or Functional - Built-in scoping (everywhere!) - Explicit disconnect • Topics - publish/subscribe/unsubscribe Thursday, October 22, 2009
  24. 24. Events var n = dojo.byId(“foo”); // plain ole’ onclick dojo.connect(n, “click”, function(e){ ... }); // calls thisObj.method(e) in scope of thisObj dojo.connect(n, “mouseenter”, thisObj, “method”); // anonymous with scope dojo.connect(n, “keydown”, thisObj, function(e){ // “this” == thisObj }); // with query: dojo.query(“#foo”) .onclick(function(e){ }) .onmouseenter(thisObj, “method”) .onkeydown(thisObj, function(e){ ... }) ; Thursday, October 22, 2009
  25. 25. Topics // same hitching pattern: dojo.subscribe(“/are/you/listening”, function(a, b, c){ ... }); dojo.subscribe(“/are/you/listening”, thisObj, “method”); dojo.subscribe(“/are/you/listening”, thisObj, function(){ ... }); // trigger it all dojo.publish(“/are/you/listening”, [1, 2, 3]); Thursday, October 22, 2009
  26. 26. hitch() // mini singleton var myObj = { counter:0, addOne: function(){ this.counter++; } } // more hitching pattern: dojo.connect(n, “onclick”, myObj, “addOne”); dojo.subscribe(“/who/knows”, myObj, “addOne”); var adder = dojo.hitch(myObj, “addOne”); dojo.connect(n, “mouseenter”, adder); Thursday, October 22, 2009
  27. 27. hitch() for Classes dojo.declare(“my.Thing”, null, { url:”/foo”, message:””, loader: function(){ dojo.xhrGet({ url: this.url, load: dojo.hitch(this, “handler”) }) }, handler: function(data){ this.message = data; } }); var mt = new my.Thing(); mt.loader(); Thursday, October 22, 2009
  28. 28. FX • dojo.animateProperty(kwArgs) • dojo.anim(node, props, ...) • dojo.fadeOut(kwArgs) • dojo.fadeIn(kwArgs) • new dojo.Animation(kwArgs) Thursday, October 22, 2009
  29. 29. Animation Events var anim = dojo.fadeOut({ node:”bar” }); dojo.connect(anim, “onEnd”, function(n){ // animation is done }); dojo.connect(anim, “beforeBegin”, function(n){ // animation starts after this }); dojo.connect(anim, “onBegin”, function(n){ // animation just started }); anim.play(); // also onAnimate, onPlay, onStop, etc. dojo.fadeOut({ node:”baz”, onEnd:function(n){ /* inline, too */ }).play(); Thursday, October 22, 2009
  30. 30. FX++ • dojo.require(“dojo.fx”); // or dojox.fx ... • dojo.fx.chain([animations]) • dojo.fx.combine([animations]); • dojo.fx.wipeIn/Out/slideIn/Out/etc Thursday, October 22, 2009
  31. 31. Core Dojo Thursday, October 22, 2009
  32. 32. dojo.require() away • dojo.data - Common API for data handling • Advanced I/O - dojo.io.script, dojo.io.iframe ... • dojo.cookie • dojo.behavior! Thursday, October 22, 2009
  33. 33. Behavior? dojo.behavior.add({ “.foo .bar”: function(n){ // newly found }, “#baz”:{ “found”: function(n){ // also newly found }, “onclick”: function(e){ // handler } } }); dojo.behavior.apply(); Live behaviors available in `plugd` Thursday, October 22, 2009
  34. 34. Firebug Lite Thursday, October 22, 2009
  35. 35. Dijit (Dojo Widgets) Thursday, October 22, 2009
  36. 36. Dijit widget system • dijit._Widget / dijit._Templated / etc • dijit.Dialog / dijit.layout.TabContainer / etc • dijit.form.ValidationTextBox / etc Thursday, October 22, 2009
  37. 37. Declarative vs Programatic new dijit.Dialog({ title:”Hi There”, href:”/foo/bar”, id:”bar” }); <!-- same as: --> <div id=”bar” dojoType=”dijit.Dialog” title=”Hi There” href=”/foo/bar”></div> Thursday, October 22, 2009
  38. 38. Declarative vs Programatic Zend_Dojo_View_Helper_Dojo::setUseDeclarative(); Zend_Dojo_View_Helper_Dojo::setUseProgrammatic(); Zend_Dojo_View_Helper_Dojo::setUseProgrammatic(-1); Thursday, October 22, 2009
  39. 39. customDijit FTW! // consider: new my.Thing({ someAttribute:”something” }, “nodeid”) // versus: <div dojoType=”my.Thing” someAttribute=”something” id=”nodeid”> <p>Inner Content</p> </div> // in PHP: <?php $this->customDijit()->captureStart( ‘baaar’, array( dojoType => “my.Thing”, someAttribute => “something” ) ); ?> <p>Inner Content</p> <? php echo $this->customDijit()->captureEnd(‘baaar’); ?> Thursday, October 22, 2009
  40. 40. DojoX (X !== experimental) Thursday, October 22, 2009
  41. 41. DojoX, briefly. • Sandbox • Cutting Edge • Un-categorized Thursday, October 22, 2009
  42. 42. DojoX, briefly. • dojox.gfx • dojox.charting • dojox.cometd / org.cometd • dojox.grid • dojox.widget / dojox.layout / dojox.form • dojox.image • dojox.data • dojox.rpc / SMD Thursday, October 22, 2009
  43. 43. RPC / SMD dojo.require(“dojox.rpc.Service”); var goog = new dojox.rpc.Service(“google.smd”); goog.websearch({ q:”Dojo” }).addCallback(function(response){ // handle the responses }); goog.booksearch({ q:”Dojo” }).addBoth(function(response){ // Books about Dojo }); Thursday, October 22, 2009
  44. 44. dojox.data Stores: • AndOrReadStore • FlickrRestStore / • AppStore FlickrStore • AtomReadStore • GoogleFeedStore • CouchDBRestStore • GoogleSearchStore • CssRuleStore • HtmlStore • CsvStore • jsonPathStore • FileStore • jsonRestStore • OpmlStore Thursday, October 22, 2009
  45. 45. Dojo Build System Thursday, October 22, 2009
  46. 46. All-in-One • Works transparently with Package System • Group modules into ‘layers’ • Concatenate CSS @import into ‘layers’ • Layer & File minification - Comments, Whitespace, newlines ... • stripConsole (console.warn, .log, .error) Thursday, October 22, 2009
  47. 47. #ifdef in JavaScript? // the code: //>>excludeStart(“something”, kwArgs.condition == true); /* code to exclude */ //>>excludeStop(“something”); # exclude it: ./build.sh condition=true profile=myprofile Thursday, October 22, 2009
  48. 48. Development Debugging // ... handler: function(data){ if(data && !data.error){ /* do something with the data */ } //>>excludeStart(“debuggykins”, true); else{ console.warn(“We require data, and didn’t get it.”); console.log(“got:”, arguments); } //>>excludeStop(“debuggykins”); }, // ... Thursday, October 22, 2009
  49. 49. Special Builds • Stubs (6k dojo.js) • Base++ (dojo.js with modules) • Cross-Domain • plugd • Scope Burning Thursday, October 22, 2009
  50. 50. MooJo? Thursday, October 22, 2009
  51. 51. scopeMap + kwArgs // Dojo? Moo.load(function(){ place("<p>Hello, Moojo</p>", "container"); query("p") .style("fontSize", "10px") .animate({ fontSize:{ end: 42 } }) ; }); http://dante.dojotoolkit.org/static/otherlibs/moojo.html Thursday, October 22, 2009
  52. 52. //>>excludeStart(“auto”, kwArgs.autoConflict == “on”) if(dojo.config.conflict){ //>>excludeStop(“auto”) // exportNS is a plugd plugin dojo.exportNS(dojo, dojo.global); //>>excludeStart(“auto”, kwArgs.autoConflict == “on”) } //>>excludeStop(“auto”) http://dante.dojotoolkit.org/static/otherlibs/moojo.html Thursday, October 22, 2009
  53. 53. Questions? Thursday, October 22, 2009
  54. 54. Gracias. (me, again) dante@dojotoolkit.org http://twitter.com/phiggins http://higginsforpresident.net/ http://dante.dojotoolkit.org http://joind.in/936 Thursday, October 22, 2009
  55. 55. Some resources: http://dojotoolkit.org http://dojocampus.org/explorer http://dojocampus.org http://download.dojotoolkit.org http://docs.dojocampus.org http://demos.dojotoolkit.org Thursday, October 22, 2009

×