What's New in Dojo 1.8

PROJECT DATE BY 10 JULY 2012 KITSON P. KELLY DOJO

1.8 WHAT IS COMING? Wednesday, 11 July 12

Agenda Introduction Dojo Dijit DojoX Dojo 2.0 Wednesday, 11 July

12

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

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

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

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

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

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

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

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

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

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

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

Dijit Selector Attachment for Tooltips and Menus Claro - CSS

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

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

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

<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

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

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

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

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

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

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

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

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

New Boilerplates Wednesday, 11 July 12

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

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