What's New in Dojo 1.8

Transcript

1. PROJECT DATE BY 10 JULY 2012 KITSON P. KELLY DOJO

   1.8 WHAT IS COMING? Wednesday, 11 July 12

2. Agenda Introduction Dojo Dijit DojoX Dojo 2.0 Wednesday, 11 July

   12

3. Introduction Kitson P. Kelly Senior IT Manager by Day Dojo

   Committer by Night Dojo 1.8 The Final Step to 2.0 http://www.kitsonkelly.com @kitsonk Wednesday, 11 July 12

4. A History Lesson... Dojo 1.7 AMD “Nano” Kernel - 3.8kb

   http://dojotoolkit.org http://www.sitepen.com/blog/2012/06/25/amd-the-definitive-source/ Wednesday, 11 July 12

5. dojo/promise More on This Later... http://livedocs.dojotoolkit.org/dojo/promise/ Wednesday, 11 July 12

6. dojo/request Replaces/Unifies dojo.xhr, dojo.io.script and dojo.io.iframe Platform agnostic, browser or

   Node.js Extensible Handlers Request Registry Topics http://livedocs.dojotoolkit.org/dojo/request/ Wednesday, 11 July 12

7. dojo/request http://livedocs.dojotoolkit.org/dojo/request/ require(["dojo/request"],  function(request){   request.get("some/data.json",  {     handleAs:

    "json"   }).then(function(response){     //  do  something  with  the  response   },  function(err){     //  handle  the  error   }); }); Wednesday, 11 July 12

8. dojo/request http://livedocs.dojotoolkit.org/dojo/request/registry require(["dojo/request/registry",  "dojo/request/script"], function(request,  script){   //  Registers  anything

    that  ends  in  ".jsonp.js"  be  sent  to  the  script  provider   request.register(/\.jsonp\.js$/i,  script);   request.get("helloworld.jsonp.js",  {     jsonp:  "callback"   }).then(function(response){     //  Handle  response   });   request.get("helloworld.json",  {     handleAs:  "json"   }).then(function(response){     //  Handle  response   }); }); Wednesday, 11 July 12

9. dojo/router Provides advanced Browser Hash Management Maps Hash Patterns to

   Callbacks Allows Parameterisation of the Browser Hash http://livedocs.dojotoolkit.org/dojo/router Wednesday, 11 July 12

10. require(["dojo/router",  "dojo/dom",  "dojo/on",  "dojo/request",  "dojo/json",  "dojo/domReady!"], function(router,  dom,  on,  request,

     JSON){    router.register("/foo/bar",  function(evt){        evt.preventDefault();        request.get("helloworld.json",  {            handleAs:  "json"        }).then(function(response){            dom.byId("output").innerHTML  =  JSON.stringify(response);        });    });    router.startup();    on(dom.byId("changeHash"),  "click",  function(){        router.go("/foo/bar");    }); }); dojo/router http://livedocs.dojotoolkit.org/dojo/router Wednesday, 11 July 12

11. dojo/node An AMD plugin that allows loading of seamless usage

    of traditional Node.js modules Allows you to follow AMD/Dojo coding style http://livedocs.dojotoolkit.org/dojo/node/ Wednesday, 11 July 12

12. dojo/node http://livedocs.dojotoolkit.org/dojo/node/ //  Initial  Module  to  Load var  initModule  =

     "app/main"; //  Dojo  Configuration dojoConfig  =  {   async:  true,   baseUrl:  "lib/",   packages:  [{     name:  "dojo",     location:  "dojo"   },{     name:  "dijit",     location:  "dijit"   },{     name:  "dojox",     location:  "dojox"   },{     name:  "app",     location:  "app"   }],   deps:  [initModule] } //  Load  dojo/dojo require("./lib/dojo/dojo.js"); require([   "dojo/node!http" ],  function(http){   http.createServer(function  (req,  res){     res.writeHead(200,  {  "Content-­‐Type":  "text/plain"  });     res.end("Hello  World\n");   }).listen(1337,  '127.0.0.1');   console.log('Server  running  at  http://127.0.0.1:1337/'); }); >  node  bootstrap.js Server  running  at  http://127.0.0.1:1337/ bootstrap.js lib/app/main.js Wednesday, 11 July 12

13. dojo/... dojo/parser - MIDs, Auto-Require, Declarative Require and Builder Transform

    dojo/touch - Touch Event Management dojo/dnd - Touch Enabled dojo/sniff - has() based browser detection dojo/Stateful - Standardised Accessors http://livedocs.dojotoolkit.org/releasenotes/1.8#dojo Wednesday, 11 July 12

14. Dijit Selector Attachment for Tooltips and Menus Claro - CSS

    Gradients Performance Improvements http://livedocs.dojotoolkit.org/releasenotes/1.8#dijit Wednesday, 11 July 12

15. dojox/mobile Significant Changes from 1.6 and 1.7 dojox/mobile/migrationAssist to Aid

    in Migration 26 New Mobile Widgets - StoreLists, SearchBox, Accordion, GridLayout, IconMenu, ScrollPane, Progress, Media, Badges, Rating, Dialogs, Pickers http://livedocs.dojotoolkit.org/dojox/mobile/ Wednesday, 11 July 12

16. dojox/dgauges Rewrite of Gauges Designed to Efficient in Desktop and

    Mobile platforms Framework for Creating Custom Gauges http://livedocs.dojotoolkit.org/dojox/dguages/ Wednesday, 11 July 12

17. <table>   <tbody>     <tr>       <td>

            <div  data-­‐dojo-­‐type="dojox/dguages/components/black/CircularLinearGuage"           data-­‐dojo-­‐props="useTooltop:  false,  value:  60,  background:  {  color:  'rgba(0,0,0,0)'  }"           style="width:  200px;  height:  200px;"></div>       </td>       <td>         <div  data-­‐dojo-­‐type="dojo/dguages/components/black/SemiCircularLinearGuage"           data-­‐dojo-­‐props="useTooltip:  false,  value:  20,  background:  {  color:  'rgba(0,0,0,0)'  }"           style="width:  250px;  height:  200px;"></div>       </td>       <td>         <div  data-­‐dojo-­‐type="dojo/dguages/components/black/HorizontalLinearGuage"           data-­‐dojo-­‐props="useTooltip:  false,  value:  20,  background:  {  color:  'rgba(0,0,0,0)'  }"           style="margin:  30px  0  0  0;  width:  400px;  height:  60px;"></div>       </td>     </tr>   </tbody> </table> dojox/dgauges http://livedocs.dojotoolkit.org/dojox/dguages/ Wednesday, 11 July 12

18. dojox/calendar Time Based Event Display Widget Day, Week, Month Views

    Interactive to allow Editing Allows for Custom Event Renders http://livedocs.dojotoolkit.org/dojox/calendar/ Wednesday, 11 July 12

19. dojox/calendar http://livedocs.dojotoolkit.org/dojox/calendar/ require(["dojox/calendar/Calendar",  "dojo/store/JsonRest",  "dojo/ready"],   function(Calendar,  JsonRest,  ready){  

    ready(function(){     var  store  =  new  JsonRest({       target:  "/calendar/"     });     var  calendar  =  new  Calendar({       dateInterval:  "day",       style:  "position:  relative;  width:  500px;  height:  500px;",       store:  store     },  "someId");   }); }); Wednesday, 11 July 12

20. dojox/treemap Data Visualisation Widget Interactive, Resizable, Highly Configurable, Mobile Ready

    http://livedocs.dojotoolkit.org/dojox/treemap/ Wednesday, 11 July 12

21. dojox/treemap http://livedocs.dojotoolkit.org/dojox/treemap/ require(["dojox/treemap/TreeMap",  "dojox/treemap/Keyboard",  "dojox/treemap/DrillDownUp",  "dojo/_base/declare",     "dojo/ready",  "dojo/dom-­‐construct",

     "dojo/dom-­‐attr",  "dojo/dom-­‐style"], function(TreeMap,  Keyboard,  DrillDownUp,  declare,  ready,  domConst,  attr,  style){   var  MyTreeMap  =  declare([TreeMap,  Keyboard,  DrillDownUp],  {     createRenderer:  function(item,  level,  kind){       if(kind  ==  "leaf"){         var  div  =  domConst.create("a");         attr.set(div,  "href",  "http://somelink/"  +  item.field);         style.set(div,  "overflow",  "hidden");         style.set(div,  "position",  "absolute");         return  div;       }else{         return  this.inherited(arguments);       }     }   });   var  atreemap  =  new  MyTreeMap({     labelAttr:  "Name",     selectionMode:  "multiple",     store:  store   },  "someId"); }); Wednesday, 11 July 12

22. dojox/... dojox/mvc - Attribute Binding and Controller Improvements dojox/app -

    Clearer MVC structure, designed both for dojox/mobile and desktop applications dojox/gfx - Improvements around clipping, element lifecycle management and extensions around SVG and Canvas to fully leverage those APIs http://livedocs.dojotoolkit.org/releasenotes/1.8#dojox Wednesday, 11 July 12

23. dgrid Complete Rewrite of the dojox/ DataGrid Highly Performant (32kb),

    Designed for Mobile and Desktop http://dgrid.io/ http://www.sitepen.com/blog/2012/06/11/dgrid-and-dojo-nano-build/ Wednesday, 11 July 12

24. More goodness... API Viewer Reference Guide Updated Tutorials New Demos

    New Boilerplates Wednesday, 11 July 12

25. And then... Dojo 2.0 Alpha – Late 2012, Beta –

    Early 2013, Release – Mid 2013 Concepts Introduced in 1.6, 1.7 and 1.8 to be the Foundation Dojo Foundation Packages Replaces DojoX Be Prepared Early for Migration: http://livedocs.dojotoolkit.org/releasenotes/migration-2.0 Dojo 1.9 to be Essentially Maintenance Release of 1.X Branch Wednesday, 11 July 12

26. Finally Get Involved! Dojo Foundation eCLA - http://dojofoundation.org/about/claForm Get Started!

    http://download.dojolkit.org/release-1.8.0b1/ Get Informed! Reference Guide - http://livedocs.dojotoolkit.org/ API Docs - http://bill.dojotoolkit.org/api/ Release Notes - http://livedocs.dojotoolkit.org/releasenotes/1.8 Wednesday, 11 July 12