presents               Star Search: Dojo 2 and                       HTML 5 Dylan Schiemann, CEO, SitePen IBM Impact 2012 ...
Nice to Meet you      Dylan Schiemann                                      Co-Founder of Dojo Toolkit                     ...
Evolution of Web App Development  https://secure.flickr.com/photos/bytemarks/4733371072/sizes/l/in/photostream/© SitePen, I...
Evolution of Web App Development                                                                                     Web 1...
Evolution of Web App Development                                      Web 2.0                                         Smar...
We Want Morehttps://secure.flickr.com/photos/dylans/5206483166/    © SitePen, Inc. All Rights Reserved
Revolution: Separation of Data and UX                                                                           Users want...
Multifarious Experiences               Native requires learning many new languages for               many new devices     ...
© SitePen, Inc. All Rights Reserved
Dojo History and Roadmap      Code here  Dojo Foundation                     Dojo 0.1     Dojo 0.4     Dojo 1.0      Dojo ...
http://dojotoolkit.org/     © SitePen, Inc. All Rights Reserved
Dojo Toolkit: Project Goals              Unified JavaScript toolkit for              superior web and mobile              a...
Philosophy               Push the limits (vector               graphics/WebGL, offline,               HTML5, ...)         ...
Whats Driving Us?               Less is more               uxebu experiments and embedJS               Microtoolkits      ...
Major Changes and Additions (1.6)               Dojo Object Store               Feature detection/has.js               LES...
Major Changes and Additions (1.7)               Query, events refactor (including delegation)               AMD refactor c...
HTML5 & CSS3          Native <audio> and                 CSS animations          <video>                            Mobile...
Dojo Nano and AMD               "Base-less" Dojo                      Only using the parts of Dojo you really need, on a m...
Squeezing Performance           • Automated build          Dojo Nano           with dependency                            ...
Data Access: Dojo Object Store               Work on HTML5 IndexedDB recommendation                      key/value approac...
Native Vector Graphics: GFX© SitePen, Inc. All Rights Reserved
Other Features of HTML5 and Friends               Audio and Video               DnD               File Uploading          ...
Application Controllers and Patterns               We don’t just build websites, we build web               applications  ...
Maqetta           Open Source Visual Tools for Dojo and HTML5http://maqetta.org/© SitePen, Inc. All Rights Reserved
Dojo Mobile                                      Cross-platform mobile Web apps            Started in Dojo 1.5            ...
Key Paradigms               Lightweight Dojo-based widgets for mobile               webapps               Native access is...
dgrid          Created by SitePen              Several plugins and          Available on GitHub             enhancements a...
wire.js          Inversion of control             Manage component          container                        lifecycle    ...
PhoneGap/Cordova          Build mobile apps with               Works with many devices          HTML, CSS, and JavaScript ...
AMD© SitePen, Inc. All Rights Reserved
The Basics          Allows for asynchronous module loading and          callback management          Allows for loading of...
The Benefits          Works cross-domain without issues               We’re simply injecting <script> tags!          Preven...
require()      // Were not using the configuration object here, just an array of requirements and      // a callback. dojo...
Creating a widget with define +  declare      // Creating a widget with AMD      define(          ["dojo/_base/declare",   ...
Learn AMD in Depth at IBM Impact               Beyond Dojo: The Rise of Asynchronous Module               Definition (AMD) ...
Objects Stores and                               IndexedDB© SitePen, Inc. All Rights Reserved
Why Object Store?               Separate UI from data handling               Independent evolution of UI components and da...
Data Backed Objects               A uniform API can provide access to data that               comes from any source       ...
Dojo Store Architecture                                      Tree       dgrid        ComboBox                             ...
What it Provides               Uniform data access layer               Primarily an API specification, but Dojo and DojoX  ...
Responsibility of Stores                                                Associate Items w/ Identifiers                     ...
Design Philosophy                                                      Simple Core API                                    ...
Resource Oriented Programming               REST concepts applied to programming               Uniform interface          ...
Promise-Based, Functional               Same API for sync and async stores                      async returns promises ins...
Dojo Object Store               API© SitePen, Inc. All Rights Reserved
Basic API               get(id, options) - Gets an object by identity               query(query, options) - Performs a que...
Simple Example      require(["dojo/store/JsonRest", "dojo/store/Observable"], function(JsonStore,      Observable){       ...
Query Results               Query results object includes methods:                      forEach                      map  ...
Using Query Results in a Widget      require(["dojo/store/JsonRest", "dojo/store/Observable", "dojo/_base/Deferred"],     ...
Query Engines               Pluggable engine               Used by client-side store (Memory) for filtering               D...
Provided             Object Stores© SitePen, Inc. All Rights Reserved
Core Stores               Concrete Stores                      Memory - In memory                      JsonRest - Connecte...
dojo/store/Memory store               Similar to ItemFileReadStore/ItemFileWriteStore               Provide a set of data ...
dojo/store/JsonRest               Server-side store               Similar to old JsonRestStore               Follows HTTP/...
dojo/store/DataStore               Adapter for legacy Dojo Data stores               Provide a Dojo Data store, returns an...
dojo/data/ObjectStore               Adapter for legacy Dojo Data widgets               Provide an object store, returns an...
Example: Using Object Store with  Adapter      require(["dojo/dom/", "dojo/store/Memory", "dojo/data/ObjectStore", "dijit/...
Store Wrappers© SitePen, Inc. All Rights Reserved
Store Wrapper               Takes a store, returns one with added functionality                      Cache, validate, etc....
dojo/store/Cache               Provides caching of a master store to a cache store                      Typical config:    ...
dojo/store/Observable               Designed to notify listeners of how data changes               affect rendered query r...
dojo/store/Observable                Store wrapper for notifications, can wrap any store                      Adds observe(...
Handle Observed Events                                                    Store Event Observed                            ...
Comet Notifications with Observable                Observable also adds notify() method                      Call notify() ...
Hierarchy               Implement getChildren for hierarchical stores, to               get the children               Two...
Vector Graphics with GFX© SitePen, Inc. All Rights Reserved
1996Topology and Rheology of Quasi Two-Dimensional Foam http://arxiv.org/pdf/cond-mat/9904101 © SitePen, Inc. All Rights R...
1996-1999                        Netscape 2-4: JavaScript, but no drawing                               I didnt like Java ...
2000-2001                                      Adobe SVG Viewer© SitePen, Inc. All Rights Reserved
2003                                                SFW Accendo                                      (NetWindows, SVG View...
2004               SVG Viewer dead, except in Adobe Acrobat                      Adobe acquired an obscure vector graphics...
2005               Dojo 0.1 and 0.2                      SVG Viewer                            Not ideal                  ...
2006               "Before this project is launched, dojo’s developers               have made significant progress to expl...
2006             dojox.gfx (Thanks in part to Mozilla!)        Bubbles, 10 years later! (Thanks Gavin Doughtie)           ...
2007-2012               Add support for <canvas>, Silverlight, SVGWeb               Base vector graphics APIs, desktop and...
© SitePen, Inc. All Rights Reserved
What is DojoX GFX?               JavaScript cross-browser graphics package               Support for SVG, Canvas, VML, Sil...
DojoX Charting              DojoX Drawing        dojox.gfx                                      Normalized API            ...
Key Drawing Capabilities               Create Surfaces/               Groups               Create shapes: Path,           ...
DojoX Charting Library               Dojo’s primary charting library is within DojoX               Can use DojoX’s gfx lib...
Chart Types               Line Charts               Stacked Line Charts               Bar Charts               Column Char...
Chart Pieces               “Chart” - the object which will house the other pieces of               the chart              ...
Chart Plugins and Effects               Tooltip - Shows a tooltip when a chart piece is               hovered over        ...
Create a Basic Pie Chart - Declaratively      <script>      require([          "dojo/parser",          "dojox/charting/Cha...
Create a Basic Column Chart -  Programmatically      <script>      // Require appropriate charting classes      require([ ...
HTML5 Native Audio and Video          Use HTML5          capabilities, fallback to          flash on IE 6-8             doj...
Multi-file Upload & DnD© SitePen, Inc. All Rights Reserved
dojox/form/uploader               Multi-file upload                      A widget that creates a stylable file-input button,...
dojo/dnd/ and dojox/mdnd               In-page DnD                      Source, Target, Avatar, Mover                     ...
Application Controllers© SitePen, Inc. All Rights Reserved
Dojo Boilerplate               Solid default structure for a Dojo-based application               Dojo Boilerplate: https:...
dojox/app               Still in experimental state               Promises "to allow simple configuration of nested        ...
dojox/mvc               Provides data binding for Dijit widgets               Form factor independent; may be used with di...
wire.js               Created by Brian Cavalier (MIT License)                      https://github.com/cujojs/wire         ...
Dojo Mobile© SitePen, Inc. All Rights Reserved
TweetView and Feature Explorerhttp://dojotoolkit.org/documentation/tutorials/1.6/mobile/tweetview/intro_tweetview/http://d...
© SitePen, Inc. All Rights Reserved
Touch and Scroll               dojox.mobile manages scrolling to allow for native               paging simulation         ...
Layout, Scenes, & Animations               Dojo Mobile creates layouts and animations which               are consistent w...
Transition Effects                                      Dojo 1.7:                                         4 standard effec...
Side-by-side Tablet Layout vs. Phones                                      Independently scrollable content               ...
Mobile themes          iPhone (includes iPad)              Custom          Android          BlackBerry© SitePen, Inc. All ...
Dojo Mobile: More than just basic                         widgets!          Gauges                      Grids          Map...
Gauges          dojox/gauges                    dojox/dgauges          Many to choose from:            More to choose from...
Maps          May add immense value          Google Maps,          to your mobile application     OpenLayers, ESRI, and   ...
Charts and Geocharts          Same dojox/charting                    Integrates seamlessly          technology that’s used...
Business Charts                                      Mobile enablement and                                      optimizati...
Grids          SitePens dgrid was             Advanced dgrid features          created with mobile in          like column...
Dojo Showcase     http://demos.dojotoolkit.org/demos/mobileGallery/          Mobile controls                     Maps     ...
Carousel                                      Swipe to browse or change views© SitePen, Inc. All Rights Reserved
Dojo Mobile 1.8 Under Development                                Accordion         Grid       Grid Layout              Ico...
PhoneGap/Cordova Integration               Feature-testing module for PhoneGap/Cordova               features for usage wi...
dgrid© SitePen, Inc. All Rights Reserved
Lightweight                                      <12KB minified                                      <32KB minified with all...
Object Store Driven                                      Fast, lightweight stores                                      Cor...
Modular, Composable                                      Pluggable design                                      Different g...
Performance                                      Fast. Very Fast.                                      Loads much faster b...
DOM-based Element Creation               innerHTML no longer fastest               approach               Direct DOM creat...
CSS-Driven               Almost no inline styles               Easy customization via CSS                      No coding n...
CSS Modularity               Proper skin vs structure separation               Easing skinning with generic classes       ...
Features!               Start with basics...               Tabular view of data               Headers with scrolling body ...
Feature Comparison© SitePen, Inc. All Rights Reserved
Editing      An HTML input or Dijit form widget           radio, checkbox, textbox, etc.      Event triggered editor or al...
Tree      Hierarchical data view      Maintain column alignment      Lightweight, easy to extend© SitePen, Inc. All Rights...
Selection               Select rows via keyboard, mouse, or touch.               Selection modes:                      ext...
Selection: Example© SitePen, Inc. All Rights Reserved
Themes               Claro, Tundra, Soria, Nihilo, Squid, Sage, Slate               Compatible with jQuery Themeroller for...
Themes: Examples© SitePen, Inc. All Rights Reserved
Complex Layout               Multiple rows per object                      colSpans and rowSpans               Freeze colu...
Complex Layout: Example© SitePen, Inc. All Rights Reserved
Complex Layout: More Examples© SitePen, Inc. All Rights Reserved
Complex Layout: dTunes© SitePen, Inc. All Rights Reserved
Drag n’ Drop        Drag n’ Drop rows             Within a grid             To other grids             To/from other sourc...
Store Integration               Fully Object store driven               Correct result set notifications, highlighted      ...
More...                                      Column Resizing                                      Keyboard navigation per ...
Pushes on New Technologies                  AMD                  Package Repository                  XStyle               ...
dgrid and Dojo Storehttps://github.com/SitePen/dgrid/blob/master/test/JsonRest.html© SitePen, Inc. All Rights Reserved
dgrid and Dojo Store      require(["dgrid/List", "dgrid/OnDemandGrid","dgrid/Selection", "dgrid/editor",      "dgrid/Keybo...
dgrid and Dojo Store (continued)      // ...                                var columns = [                               ...
dgrid and Dojo Storehttps://github.com/SitePen/dgrid/blob/master/test/JsonRest.html© SitePen, Inc. All Rights Reserved
dgrid Resources               Blog post: http://www.sitepen.com/blog/               2012/04/23/dgrid_beta/               W...
Plans for Dojo 1.8+               API Clean-up, Further Split of Features                      Compose (improved declare),...
The Dojo FoundationOpen Home for the Open Web© SitePen, Inc. All Rights Reserved
Community© SitePen, Inc. All Rights Reserved
Community Apphttp://vepi-2k3208aja.acs.cnet-caen.fr/df/© SitePen, Inc. All Rights Reserved
Foundation Structure               The Dojo Foundation is the home of great 100-               point open source projects,...
Foundation Projects© SitePen, Inc. All Rights Reserved
Major Contributors & Users                                      IBM, Orange, SitePen, TIBCO                               ...
Documentation                 Significant Tutorial Series (55 and counting!)http://dojotoolkit.org/documentation/© SitePen,...
Getting Started               Hello Dojo: http://dojotoolkit.org/documentation/               tutorials/1.7/hello_dojo/   ...
Result: Modular Tools          Tools to mix and match to                Modular enough for very          create your app  ...
© SitePen, Inc. All Rights Reserved
SitePen: We Build Extraordinary Apps.               Desktop and Mobile Web App professional services               Creator...
Thanks! Q&A     SitePen sitepen.com     Dojo Toolkit dojotoolkit.org     Twitter: @dylans @sitepen @dojo© SitePen, Inc. Al...
Upcoming SlideShare
Loading in...5
×

Star Search: Dojo 2 and HTML 5

7,093

Published on

Star Search: Dojo 2 and HTML 5
Presented at IBM Impact 2012

Published in: Technology, Design
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,093
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 1.7 is the API alpha for 2.0\nNano (baseless release)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • HTML5 and CSS3 provide us tools we used to need JavaScript for: animations, placeholders, audio/video, etc.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Dojo Mobile allows developers to create advanced mobile applications with HTML and CSS. These mobile apps look and function just like the native device does.\n
  • \n
  • \n
  • wire.js manages the entire lifecycle of your mobile application\n
  • PhoneGap is a very popular product, allowing developers to create applications with web technologies and that may be distributed in App Stores.\n
  • \n
  • Note that the exclamation indicates usage as a plugin\n
  • Older versions of the Dojo Toolkit used Synchronous XHR to load modules, and a special XDomain build type for CDNs\n
  • Point out that in this case, domConstruct is now local, not global, much faster lookups\n
  • Point out the plugin to replace dojo.cache\nAlso point out that we don&apos;t have to give an explicit name, though this has potential issue if we&apos;re trying to use this widget declaratively\n
  • \n
  • \n
  • Aside: The dojo.data API hasn&apos;t gone away and as of 1.6 is still implemented by all the dojo and dojox data stores and consumed by most/all dijit and dojox widgets. By 2.0, all data consumers (e.g. widgets) will migrate to use the Store API. There are adapters to allow Dojo Data consumers to use Store API providers, and Store API consumers to use Dojo Data API providers. \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Graphic later details the -1 return values.\nSteps: Query executed, Iterate over results, rendering them, Listen for changes, Get the total count (sync or async), Wait for rendering to finish (sync or async)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • This adapter implements the dojo.data API, and allows you to access a new object store through the dojo.data API. This is very useful if you implement or use a new object store, but need to access through an existing widget that expects a dojo.data store.\n
  • Note that here we&apos;re showing a more AMD-like example, where we&apos;re not having to fully qualify the names like dojo.store.Memory or dijit.Tree etc.\n
  • \n
  • \n
  • \n
  • \n
  • The Observable store wrapper adds the ability to monitor or observe a result set, and get notified when data changes. This plays a similar role as dojo data&amp;#x2019;s notification API, but is more useful since it is within the context of a specific query. The observe() callback gets called anytime a data change takes place.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Mention that chart generation turns boring, static data into something readable and visually appealing.\n
  • Pie, Line, Stacked area, etc.\n
  • Pieces of the chart, i.e. plots, themes, axis, markers\n
  • \n
  • Basic info describing what sets DataChart apart from the other charts.\n
  • Basic info describing what sets DataChart apart from the other charts.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Due to its experimental state, we (SitePen) don&amp;#x2019;t recommend using it yet.\n\nAlthough it claims to be feasible for both mobile and desktop apps, it seems heavily biased towards mobile app design patterns.\n
  • &amp;#x201C;MVC&amp;#x201D; is a popular keyword in development but it relates more to data binding in JavaScript rather than true MVC.\n\nas of 4/18 there are no 1.8 docs available for dojox/mvc\n
  • Lazyloading of components and resources is a big help in keeping mobile applications light.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Provide value control via gestures; much easier and more elegant than using form fields\n
  • \n
  • \n
  • \n
  • Since dgrid was created with mobile in mind, even advanced features like column resizing works on mobile\n
  • Jump out to the mobileGallery and show attendees each of the advanced examples; there&amp;#x2019;s nothing like seeing them work\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Introduce SitePen; more details are on the next slide.\n
  • \n\n\n
  • \n
  • Transcript of "Star Search: Dojo 2 and HTML 5"

    1. 1. presents Star Search: Dojo 2 and HTML 5 Dylan Schiemann, CEO, SitePen IBM Impact 2012 Conference, 1330A© SitePen, Inc. All Rights Reserved
    2. 2. Nice to Meet you Dylan Schiemann Co-Founder of Dojo Toolkit CEO, SitePen, Inc. President, Dojo Foundation @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved
    3. 3. Evolution of Web App Development https://secure.flickr.com/photos/bytemarks/4733371072/sizes/l/in/photostream/© SitePen, Inc. All Rights Reserved
    4. 4. Evolution of Web App Development Web 1.0 Dumb client, smart server Focus on HTML & CSS, "separation of markup and presentation"© SitePen, Inc. All Rights Reserved https://secure.flickr.com/photos/dylans/3439037456/
    5. 5. Evolution of Web App Development Web 2.0 Smarter client, smart server, conflict Initial break of many paradigms Search indexing, history, navigation Didnt really account for mobile DOM-centric Ajax: sort of real-time© SitePen, Inc. All Rights Reserved
    6. 6. We Want Morehttps://secure.flickr.com/photos/dylans/5206483166/ © SitePen, Inc. All Rights Reserved
    7. 7. Revolution: Separation of Data and UX Users want access to data, info in a variety of experiences relevant to their current context Aggregation User Interfaces and experiences Challenging past assumptions statelessness, truly embracing REST abusing markup for "separation of markup and© SitePen, Inc. All Rights Reserved https://secure.flickr.com/photos/dylans/5916167025/
    8. 8. Multifarious Experiences Native requires learning many new languages for many new devices Web has challenges to overcome, making rapid progress.© SitePen, Inc. All Rights Reserved
    9. 9. © SitePen, Inc. All Rights Reserved
    10. 10. Dojo History and Roadmap Code here Dojo Foundation Dojo 0.1 Dojo 0.4 Dojo 1.0 Dojo 1.3 Dojo 1.5 Dojo 1.7 First Code Dojo 0.2 Dojo 0.9 Dojo 1.2 Dojo 1.4 Dojo 1.6 Dojo 1.8, 2.0 2004 2005 2006 2007 2008 2009 2010 2011 2012© SitePen, Inc. All Rights Reserved
    11. 11. http://dojotoolkit.org/ © SitePen, Inc. All Rights Reserved
    12. 12. Dojo Toolkit: Project Goals Unified JavaScript toolkit for superior web and mobile apps Fill the Gaps (browsers, platforms) Awesome, Fast, Powerful, Efficient, Modular, Extensible Business-friendly: grids, charts, forms, & data Rich UI widgets (calendars, 3D carousel, etc)© SitePen, Inc. All Rights Reserved
    13. 13. Philosophy Push the limits (vector graphics/WebGL, offline, HTML5, ...) Define and adopt defacto standards (AMD, JSON Schema) Developer productivity JSON and tools Open, free, & liberally licensed with clear IP© SitePen, Inc. All Rights Reserved
    14. 14. Whats Driving Us? Less is more uxebu experiments and embedJS Microtoolkits Splitting things out, bringing them back together Mobile Evolution of loaders/modules Evolution of browsers/HTML5© SitePen, Inc. All Rights Reserved
    15. 15. Major Changes and Additions (1.6) Dojo Object Store Feature detection/has.js LESS CSS framework HTML5 data attributes AMD (Asynchronous module definition) Android, IE9, FF4+ support dojox.socket, Stateful Dojo Web Builder Tutorials, Docs© SitePen, Inc. All Rights Reserved
    16. 16. Major Changes and Additions (1.7) Query, events refactor (including delegation) AMD refactor complete (async loader) Mobile Blackberry 6+ Touch events in Dijit dojox/app, dojox/mvc Dojo Foundation Packages dgrid, CPM, NPM Tutorials, docs, Maqetta© SitePen, Inc. All Rights Reserved
    17. 17. HTML5 & CSS3 Native <audio> and CSS animations <video> Mobile-specific CSS More new elements Flexible layouts New <input> types© SitePen, Inc. All Rights Reserved
    18. 18. Dojo Nano and AMD "Base-less" Dojo Only using the parts of Dojo you really need, on a much more granular level Dojo 1.7 AMD loader <4K gzip/minified Asynchronous Module Definition (AMD) A grassroots standard for interoperable code modules Client and Server Plugin framework for additional extensibility Default module system for Dojo 1.7+© SitePen, Inc. All Rights Reserved
    19. 19. Squeezing Performance • Automated build Dojo Nano with dependency Dojo Base resolution, AMD & dojo/store (Model) has.js optimized builds. • All from one place with full licensing and Dijit (View) support. dojox Grid© SitePen, Inc. All Rights Reserved
    20. 20. Data Access: Dojo Object Store Work on HTML5 IndexedDB recommendation key/value approach to data access local storage but useful in other contexts accessing data stores (JSON, XML, REST, etc.) matches nicely with NoSQL implemented in Persevere (middleware for SSJS, Node or Narwhal+Jack) very clean approach to getting and setting data modular layering of functionality like notifications© SitePen, Inc. All Rights Reserved
    21. 21. Native Vector Graphics: GFX© SitePen, Inc. All Rights Reserved
    22. 22. Other Features of HTML5 and Friends Audio and Video DnD File Uploading WebSockets HTML data attributes Improved form controls postMessage, CORS, XHR2, etc.© SitePen, Inc. All Rights Reserved
    23. 23. Application Controllers and Patterns We don’t just build websites, we build web applications dojox/app is a full web and mobile application controller. Manages scenes in mobile context Asyncronously loads the application’s resources as they are needed. Uses pub/sub for application-wide communication. Provides commonly used widgets (AlertDialog, TextBox, ListSelector) for full-scale mobile apps.© SitePen, Inc. All Rights Reserved
    24. 24. Maqetta Open Source Visual Tools for Dojo and HTML5http://maqetta.org/© SitePen, Inc. All Rights Reserved
    25. 25. Dojo Mobile Cross-platform mobile Web apps Started in Dojo 1.5 Simple mobile UI Support for many paradigms, same data HTML5 features interactions Open source (BSD) Native or general© SitePen, Inc. All Rights Reserved
    26. 26. Key Paradigms Lightweight Dojo-based widgets for mobile webapps Native access is not in the scope of Dojo Mobile Works well with PhoneGap Develop device-specific or device-neutral look & feel CSS themes for iOS, Android, Blackberry devices iOS, Android, and Blackberry style controls and widgets A complete mobile widget framework Fully integrated part of Dojo, yet lightweight AMD compliant with minimal base dependencies Reuse application code across devices© SitePen, Inc. All Rights Reserved
    27. 27. dgrid Created by SitePen Several plugins and Available on GitHub enhancements available github.com/sitepen/dgrid Native or general themes Mobile-ready Grid widget Quick and efficient© SitePen, Inc. All Rights Reserved
    28. 28. wire.js Inversion of control Manage component container lifecycle Lazy-load application DOM management dependencies Pub / Sub© SitePen, Inc. All Rights Reserved
    29. 29. PhoneGap/Cordova Build mobile apps with Works with many devices HTML, CSS, and JavaScript Build service for easy Doesn’t compile into compiles native code Easy to learn© SitePen, Inc. All Rights Reserved
    30. 30. AMD© SitePen, Inc. All Rights Reserved
    31. 31. The Basics Allows for asynchronous module loading and callback management Allows for loading of non-AMD modules, sometimes using plugins (HTML templates, JSON/config files, basic ".js" files) dojo/domReady! dojo/text! Works via script tag injection (or XHR) and onload events© SitePen, Inc. All Rights Reserved
    32. 32. The Benefits Works cross-domain without issues We’re simply injecting <script> tags! Prevents the need for globals Provides excellent encapsulation Mix and match code from different projects Load only what you need, expose only what you should! Loads modules only once, caches them Simple API: define and require© SitePen, Inc. All Rights Reserved
    33. 33. require() // Were not using the configuration object here, just an array of requirements and // a callback. dojo/domReady! is a plug-in that we will explain in a moment. require(["dojo/dom-construct", "dojo/domReady!"], function(domConstruct){ var newButton = domConstruct.create("button", {innerHTML: "foo"}); domConstruct.place(newButton, document.body, "last"); }); // The same code in the legacy system // dojo.require("dojo/dom"); //this module was included by default dojo.ready(function(){ var newButton = dojo.create("button", {innerHTML: "foo"}); dojo.place(newButton, document.body, "last"); })© SitePen, Inc. All Rights Reserved
    34. 34. Creating a widget with define + declare // Creating a widget with AMD define( ["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./templates/TemplatedWidget.html"], function(declare, _WidgetBase, _TemplatedMixin, template){ return declare([_WidgetBase, _TemplatedMixin], { templateString: template }); } ); // Note how the dependencies map into the function call!© SitePen, Inc. All Rights Reserved
    35. 35. Learn AMD in Depth at IBM Impact Beyond Dojo: The Rise of Asynchronous Module Definition (AMD) Thursday May 3rd, 08:45 AM - 10:00 AM Venetian - Marcello 4403 Dylan Schiemann and James Thomas© SitePen, Inc. All Rights Reserved
    36. 36. Objects Stores and IndexedDB© SitePen, Inc. All Rights Reserved
    37. 37. Why Object Store? Separate UI from data handling Independent evolution of UI components and data components Object Store API redone in 1.6, follows the HTML5 IndexedDB object store API. Positioned as successor to Dojo Data API Also aligns with dojox/storage API© SitePen, Inc. All Rights Reserved
    38. 38. Data Backed Objects A uniform API can provide access to data that comes from any source In Dojo Many widgets DataGrid, dgrid Charting Django Template Language© SitePen, Inc. All Rights Reserved
    39. 39. Dojo Store Architecture Tree dgrid ComboBox Dojo Store API Memory JsonRest CustomStore© SitePen, Inc. All Rights Reserved
    40. 40. What it Provides Uniform data access layer Primarily an API specification, but Dojo and DojoX include several implementations of various stores Variable feature set, with feature discovery Data is represented as JavaScript objects© SitePen, Inc. All Rights Reserved
    41. 41. Responsibility of Stores Associate Items w/ Identifiers Handle Queries Sort Data Save Data Changes Trigger Notifications Stores may delegate responsibilities to the server© SitePen, Inc. All Rights Reserved
    42. 42. Design Philosophy Simple Core API Easy to Implement Feature Detection Layer No Separate Interfaces; Implement What is Needed Object Property Mutation Use Plain JS Objects, Directly Access & Mutate Properties (instead of data items)© SitePen, Inc. All Rights Reserved
    43. 43. Resource Oriented Programming REST concepts applied to programming Uniform interface Layering, store wrappers can be used to add functionality Easy to implement simple store, add wrappers for more advanced capability Cacheable© SitePen, Inc. All Rights Reserved
    44. 44. Promise-Based, Functional Same API for sync and async stores async returns promises instead of values sync stores can be used without callbacks for simplicity dojo/when makes it easy to use stores generically (sync or async) Highly functional query results, useful iterative functions Notifications built around query results© SitePen, Inc. All Rights Reserved
    45. 45. Dojo Object Store API© SitePen, Inc. All Rights Reserved
    46. 46. Basic API get(id, options) - Gets an object by identity query(query, options) - Performs a query put(object, options) - Stores/updates an object add(object, options) - Adds an object to the store remove(id, options) - Deletes an object getIdentity(object) - Get the identity from an object© SitePen, Inc. All Rights Reserved
    47. 47. Simple Example require(["dojo/store/JsonRest", "dojo/store/Observable"], function(JsonStore, Observable){ var foodStore = new store({ target: "/Food/" }); foodStore.get("cherry").then(function(cherry){ cherry.color = "red"; foodStore.put(cherry); }); foodStore.remove("pickle"); foodStore = Observable(foodStore); var query = foodStore.query({color:"red"}); query.forEach(function(food){ //... }); query.observe(function(object, oldIndex, newIndex){ //... }); });© SitePen, Inc. All Rights Reserved
    48. 48. Query Results Query results object includes methods: forEach map filter Based on Array methods, but always there, and may be asynchronous total - count of all items when a range is used (can be a promise) Provided by dojo/store/util/QueryResults© SitePen, Inc. All Rights Reserved
    49. 49. Using Query Results in a Widget require(["dojo/store/JsonRest", "dojo/store/Observable", "dojo/_base/Deferred"], function(JsonStore, Observable, Deferred){ var foodStore = new store({ target: "/Food/"}); var query = foodStore.query({color:"red"}); var renderedNodes = [], i = 0; query.forEach(function(food){ renderedNodes[i++] = renderFood(food); }); query.observe(function(food, oldIndex, newIndex){ // on a data change if(oldIndex > -1){ var oldNode = renderedNodes.splice(oldIndex, 1); dojo.destroy(oldNode); } if(newIndex > -1){ renderedNodes.splice(newIndex, 0, renderFood(food)); } }); Deferred.when(query.total, function(total){ renderTotal(total + " total foods"); }); Deferred.when(query, renderDone); });© SitePen, Inc. All Rights Reserved
    50. 50. Query Engines Pluggable engine Used by client-side store (Memory) for filtering Default is provided (dojo/store/util/ SimpleQueryEngine), you can override with custom or alternate engine RQL makes a good alternate engine https://github.com/kriszyp/rql© SitePen, Inc. All Rights Reserved
    51. 51. Provided Object Stores© SitePen, Inc. All Rights Reserved
    52. 52. Core Stores Concrete Stores Memory - In memory JsonRest - Connected to store through HTTP/REST DataStore - Adapter for old Dojo Data stores Store Wrappers Observable© SitePen, Inc. All Rights Reserved
    53. 53. dojo/store/Memory store Similar to ItemFileReadStore/ItemFileWriteStore Provide a set of data with the data argument Uses client-side filtering/querying Very simple and lightweight© SitePen, Inc. All Rights Reserved
    54. 54. dojo/store/JsonRest Server-side store Similar to old JsonRestStore Follows HTTP/REST interface GET, PUT, POST, DELETE Lightweight, little work done on client-side© SitePen, Inc. All Rights Reserved
    55. 55. dojo/store/DataStore Adapter for legacy Dojo Data stores Provide a Dojo Data store, returns an object store Can be used by new widgets with older stores© SitePen, Inc. All Rights Reserved
    56. 56. dojo/data/ObjectStore Adapter for legacy Dojo Data widgets Provide an object store, returns an Dojo Data store Can be used by legacy widgets with newer stores© SitePen, Inc. All Rights Reserved
    57. 57. Example: Using Object Store with Adapter require(["dojo/dom/", "dojo/store/Memory", "dojo/data/ObjectStore", "dijit/Tree"], function(dom, Memory, ObjectStore, Tree){ // Create the memory-based object store var memoryStore = new MemoryStore({ data: data // data is a reference to an in-memory data set }); // Create the dojo.data adapter dataStore = new ObjectStore({ objectStore: memoryStore, labelProperty: "author" }); // Pass it to a new tree tree = new Tree({ store: dataStore, onDblClick: function(item){ console.log(item.content); } }, dom.byId("tree")); });© SitePen, Inc. All Rights Reserved
    58. 58. Store Wrappers© SitePen, Inc. All Rights Reserved
    59. 59. Store Wrapper Takes a store, returns one with added functionality Cache, validate, etc. Like middleware for stores© SitePen, Inc. All Rights Reserved
    60. 60. dojo/store/Cache Provides caching of a master store to a cache store Typical config: dojo/store/JsonRest is master dojo/store/Memory is caching store Useful when data to be remotely retrieved, but frequently locally accessed© SitePen, Inc. All Rights Reserved
    61. 61. dojo/store/Observable Designed to notify listeners of how data changes affect rendered query results, rather than just notifying. Preserves sort order Omits new objects that dont match filter Adds changed objects that do match filter now Widgets can observe() a result set and properly update UI© SitePen, Inc. All Rights Reserved
    62. 62. dojo/store/Observable Store wrapper for notifications, can wrap any store Adds observe() method to query results require(["dojo/store/Observable"], function(Observable){ // First wrap the store store = new Observable(store); // Now we can query var results = store.query({name:"value"}, {start:0, count:10}); // And observe the results results.observe(function(changedObject, removedFromIndex, insertedIntoIndex){ // Notified of changes }); });© SitePen, Inc. All Rights Reserved
    63. 63. Handle Observed Events Store Event Observed removedFromIndex insertedIntoIndex -1 -1 Wasn’t in result set before Removed from result set Both Whole Both Equal Both -1 Item was moved Updated, not moved Positions not known If no query engine (JsonRest by default), index wont be provided (not known)© SitePen, Inc. All Rights Reserved
    64. 64. Comet Notifications with Observable Observable also adds notify() method Call notify() to notify of changes from server socket.on("message", function(event){ store.notify(event.object, event.existingId); });© SitePen, Inc. All Rights Reserved
    65. 65. Hierarchy Implement getChildren for hierarchical stores, to get the children Two hierarchy strategies: Objects have a children array Preserves/indicates order of children Useful for smaller lists of children Objects have a parent reference Query by parent to get children Useful for large lists of unordered children© SitePen, Inc. All Rights Reserved
    66. 66. Vector Graphics with GFX© SitePen, Inc. All Rights Reserved
    67. 67. 1996Topology and Rheology of Quasi Two-Dimensional Foam http://arxiv.org/pdf/cond-mat/9904101 © SitePen, Inc. All Rights Reserved
    68. 68. 1996-1999 Netscape 2-4: JavaScript, but no drawing I didnt like Java or Flash© SitePen, Inc. All Rights Reserved
    69. 69. 2000-2001 Adobe SVG Viewer© SitePen, Inc. All Rights Reserved
    70. 70. 2003 SFW Accendo (NetWindows, SVG Viewer, custom JS code)© SitePen, Inc. All Rights Reserved
    71. 71. 2004 SVG Viewer dead, except in Adobe Acrobat Adobe acquired an obscure vector graphics format Preventing the death of SVG http://dylanschiemann.com/2004/09/12/preventing- the-death-of-svg/ Dojo Toolkit development started© SitePen, Inc. All Rights Reserved
    72. 72. 2005 Dojo 0.1 and 0.2 SVG Viewer Not ideal Mozilla SVG through special builds "One of the very first design decisions of which I was a proponent was that the Dojo Toolkit not be HTML-centric. After working on several SVG-based intranet applications, I was highly motivated to see Dojo work well with SVG and other namespaces that could become relevant in the future."© SitePen, Inc. All Rights Reserved
    73. 73. 2006 "Before this project is launched, dojo’s developers have made significant progress to explore how to integrate SVG support. Another candidate for the back-end render engine is VML. There are two projects in dojo SoC 2006, dojo-svg & dojo-vml, a universal interface is developed to glue the Gfx API and various back-end rendering engine. I prefer dojo-svg, since VML is only rendered within Microsoft Internet Explorer, while SVG is supported natively by Mozilla Firefox 1.5+, or any browsers with Adobe SVG plugin." - Kun Xi© SitePen, Inc. All Rights Reserved
    74. 74. 2006 dojox.gfx (Thanks in part to Mozilla!) Bubbles, 10 years later! (Thanks Gavin Doughtie) SVG and VML supporthttp://thinkvitamin.com/code/create-cross-browser-vector-graphics/© SitePen, Inc. All Rights Reserved
    75. 75. 2007-2012 Add support for <canvas>, Silverlight, SVGWeb Base vector graphics APIs, desktop and mobile Charting & real-time capabilities Data and object store bindings Drawing APIs© SitePen, Inc. All Rights Reserved
    76. 76. © SitePen, Inc. All Rights Reserved
    77. 77. What is DojoX GFX? JavaScript cross-browser graphics package Support for SVG, Canvas, VML, Silverlight, and SVGWeb Loosely based on SVG vocabulary Geometry, shapes, transformation matrices Stroke, fill, fonts, other visuals Surfaces and groups Interactive (events) Optional SVG to JSON converter© SitePen, Inc. All Rights Reserved
    78. 78. DojoX Charting DojoX Drawing dojox.gfx Normalized API SVG VML Render Canvas Silverlight SVGWeb© SitePen, Inc. All Rights Reserved
    79. 79. Key Drawing Capabilities Create Surfaces/ Groups Create shapes: Path, Polyline, Rect, Ellipse, Circle, Line Style : Fill and Stroke Matrix Transforms Events© SitePen, Inc. All Rights Reserved
    80. 80. DojoX Charting Library Dojo’s primary charting library is within DojoX Can use DojoX’s gfx library to create animated effects Dozens of themes included, supports custom theming and gradation themes Zooming, panning, and scrolling capabilities Supports chart events Support for SVG, VML, Canvas, Silverlight, and other technologies Support for 2D and 3D charts Integration with Dojo data stores Turns boring, static data into something readable and visually appealing.© SitePen, Inc. All Rights Reserved
    81. 81. Chart Types Line Charts Stacked Line Charts Bar Charts Column Charts Pie Charts Scatter Charts Grids Charts can be created declaratively or programmatically.© SitePen, Inc. All Rights Reserved
    82. 82. Chart Pieces “Chart” - the object which will house the other pieces of the chart Theme - the series of colors and/or gradation information for the chart’s pieces, lines, and markers Plots - describe how data is to be visualized Axes - the dimensions of data that are being visualized and includes things like specifying labels Series - describes the Data itself that the chart will visualize Markers - shapes placed at key points within data Extras - additional “plugin” functionalities for the chart© SitePen, Inc. All Rights Reserved
    83. 83. Chart Plugins and Effects Tooltip - Shows a tooltip when a chart piece is hovered over Highlight - A hover color effect when hovering over a chart piece Magnify - Magnifies a marker when hovered over MoveSlice - Animates a pie slice when hovered over Shake - Shakes a given chart piece when hovered over© SitePen, Inc. All Rights Reserved
    84. 84. Create a Basic Pie Chart - Declaratively <script> require([ "dojo/parser", "dojox/charting/Chart", "dojox/charting/plot2d/Pie", "dojox/charting/action2d/Tooltip", "dojox/charting/action2d/MoveSlice", "dojox/charting/themes/PlotKit/green" ], function(parser) { parser.parse(); }); // Sample data pieData = [{ x:0, y:9420 }, { x:1, y:10126 }, { x:2, y:10000 }]; </script> <!-- Create a pie chart declaratively --> <div data-dojo-type="dojox.charting.widget.Chart" id="viewsChart" data-dojo-props="theme: dojox.charting.themes.PlotKit.green" style="width: 550px; height: 550px;"> <div class="plot" name="default" type="Pie" radius="200" fontColor="black" labelOffset="-20"></div> <div class="series" name="January" array="pieData"></div> <div class="action" type="Tooltip"></div> <div class="action" type="MoveSlice" shift="2"></div> </div>© SitePen, Inc. All Rights Reserved
    85. 85. Create a Basic Column Chart - Programmatically <script> // Require appropriate charting classes require([ "dojox/charting/Chart", "dojox/charting/plot2d/Columns", "dojox/charting/themes/Tom", "dojox/charting/axis2d/Default" ], function(Chart, Columns, theme) { var barChart = new Chart("barChart"); barChart.setTheme(theme); barChart.addAxis("x",{fixUpper: "major",includeZero: false,max:10}); barChart.addAxis("y",{vertical: true,fixLower: "major",fixUpper: "major"}); barChart.addPlot("default",{type: Columns, gap:5}); // Add a series of data to the chart barChart.addSeries("My Chart Info", columnData, {}); barChart.render(); }); </script> <div id="barChart" style="width:500px;height:300px;"></div>© SitePen, Inc. All Rights Reserved
    86. 86. HTML5 Native Audio and Video Use HTML5 capabilities, fallback to flash on IE 6-8 dojox/av adding HTML5 support Codecs Dojo 1.8 mobile specific av players© SitePen, Inc. All Rights Reserved
    87. 87. Multi-file Upload & DnD© SitePen, Inc. All Rights Reserved
    88. 88. dojox/form/uploader Multi-file upload A widget that creates a stylable file-input button, with optional multi-file selection, using only HTML elements. Non-HTML5 browsers have fallback options of Flash or an iframe. Currently need to manage your own connect to the native DnD of files from desktop to browser© SitePen, Inc. All Rights Reserved
    89. 89. dojo/dnd/ and dojox/mdnd In-page DnD Source, Target, Avatar, Mover A complete framework to easily extend to suit your approach to DnD http://www.sitepen.com/blog/2011/12/05/dojo-drag- n-drop-redux/ Draggable regions and areas iGoogle style regions and layouts© SitePen, Inc. All Rights Reserved
    90. 90. Application Controllers© SitePen, Inc. All Rights Reserved
    91. 91. Dojo Boilerplate Solid default structure for a Dojo-based application Dojo Boilerplate: https://github.com/csnover/ dojo-boilerplate© SitePen, Inc. All Rights Reserved
    92. 92. dojox/app Still in experimental state Promises "to allow simple configuration of nested scenes and views and to facilitate the transitioning between these views." Made to work with both mobile and desktop web applications Provides history (via the hash) and environment support Utilitizes dojox/mvc for view creation Planned to stabilize for Dojo 2.0 release© SitePen, Inc. All Rights Reserved
    93. 93. dojox/mvc Provides data binding for Dijit widgets Form factor independent; may be used with dijit as well as dojox/mobile. Comprised of Output, Group, Repeat, and Generate utilities Visit http://dojotoolkit.org/reference-guide/1.7/ dojox/mvc.html for more information Significantly different approach in Dojo 1.8 that deprecates many approaches in Dojo 1.7© SitePen, Inc. All Rights Reserved
    94. 94. wire.js Created by Brian Cavalier (MIT License) https://github.com/cujojs/wire Provides: Component lifecycle management Dependency Inversion via constructor and setter Dependency Injection Automatic dependency ordering Connectors Service locator pattern and reference resolution Well use this for our app controller in future activities© SitePen, Inc. All Rights Reserved
    95. 95. Dojo Mobile© SitePen, Inc. All Rights Reserved
    96. 96. TweetView and Feature Explorerhttp://dojotoolkit.org/documentation/tutorials/1.6/mobile/tweetview/intro_tweetview/http://dojotoolkit.org/features/mobile_showcase.php© SitePen, Inc. All Rights Reserved
    97. 97. © SitePen, Inc. All Rights Reserved
    98. 98. Touch and Scroll dojox.mobile manages scrolling to allow for native paging simulation A variety of layout container widgets are available which can respond to scrolling in different ways (Flippable View, Scrollable View) Touch events are synchronized in mobile and desktop environments for more efficient development© SitePen, Inc. All Rights Reserved
    99. 99. Layout, Scenes, & Animations Dojo Mobile creates layouts and animations which are consistent with the mobile OS. You can use an unlimited number of scenes The simple API allows you to move from scene to scene via basic moveTo attributes Layout widgets have been constructed to be lightweight, and can be created declaratively or programmatically. CSS Animations are primary animation source (faster) -- JavaScript is used primarily as a fallback.© SitePen, Inc. All Rights Reserved
    100. 100. Transition Effects Dojo 1.7: 4 standard effects 16 new transition effects© SitePen, Inc. All Rights Reserved
    101. 101. Side-by-side Tablet Layout vs. Phones Independently scrollable content Fixed Position HeaderSingle application can automatically adjust to side-by-side layout based on detection of screen dimensions© SitePen, Inc. All Rights Reserved
    102. 102. Mobile themes iPhone (includes iPad) Custom Android BlackBerry© SitePen, Inc. All Rights Reserved
    103. 103. Dojo Mobile: More than just basic widgets! Gauges Grids Maps More! Charts© SitePen, Inc. All Rights Reserved
    104. 104. Gauges dojox/gauges dojox/dgauges Many to choose from: More to choose from: Analog, bar, glossy Circular, rectangular, linear© SitePen, Inc. All Rights Reserved
    105. 105. Maps May add immense value Google Maps, to your mobile application OpenLayers, ESRI, and others can be used Works as efficiently as the© SitePen, Inc. All Rights Reserved
    106. 106. Charts and Geocharts Same dojox/charting Integrates seamlessly technology that’s used on on mobile desktop! Use basic dojox/mobile widgets to manipulate© SitePen, Inc. All Rights Reserved
    107. 107. Business Charts Mobile enablement and optimizations for all existing Dojo chart types! Themes adapted to small screen Touch support for scrolling and panning Interactive Legends Smart label layouts Chart Titles© SitePen, Inc. All Rights Reserved
    108. 108. Grids SitePens dgrid was Advanced dgrid features created with mobile in like column resizing and mind cell editing work dojox/grid/* is not a flawlessly good option on mobile!© SitePen, Inc. All Rights Reserved
    109. 109. Dojo Showcase http://demos.dojotoolkit.org/demos/mobileGallery/ Mobile controls Maps Form widgets Lists Switches Charts Layout widgets Effects© SitePen, Inc. All Rights Reserved
    110. 110. Carousel Swipe to browse or change views© SitePen, Inc. All Rights Reserved
    111. 111. Dojo Mobile 1.8 Under Development Accordion Grid Grid Layout Icon container Form panel and Badge Cube transition Menu Dialog Tree map Editable List Audio player Swap transition Video player© SitePen, Inc. All Rights Reserved
    112. 112. PhoneGap/Cordova Integration Feature-testing module for PhoneGap/Cordova features for usage within Dojo Toolkit http://bugs.dojotoolkit.org/ticket/15219© SitePen, Inc. All Rights Reserved
    113. 113. dgrid© SitePen, Inc. All Rights Reserved
    114. 114. Lightweight <12KB minified <32KB minified with all dependencies less than Dojo Base, can go baseless (nano) Easy to grok https://github.com/ sitepen/dgrid© SitePen, Inc. All Rights Reserved
    115. 115. Object Store Driven Fast, lightweight stores Correct query observation events Uses the new HTML5- inspired object store API directly© SitePen, Inc. All Rights Reserved
    116. 116. Modular, Composable Pluggable design Different grid components combined as mixins Column components can be used per-column© SitePen, Inc. All Rights Reserved
    117. 117. Performance Fast. Very Fast. Loads much faster being smaller Renders results about 6-10x faster than the DataGrid! Optimized for modern platforms (like mobile)© SitePen, Inc. All Rights Reserved
    118. 118. DOM-based Element Creation innerHTML no longer fastest approach Direct DOM creation makes easy to reference, connect, modify elements at every step in rendering Plugins are super simple Tree is <100 lines of code!© SitePen, Inc. All Rights Reserved
    119. 119. CSS-Driven Almost no inline styles Easy customization via CSS No coding necessary for styling Further improves performance© SitePen, Inc. All Rights Reserved
    120. 120. CSS Modularity Proper skin vs structure separation Easing skinning with generic classes Utilizes XStyle Framework for shimming and extending CSS Handles loading CSS Parsing CSS Uses CSS plugins to handle specific shims and extensions© SitePen, Inc. All Rights Reserved
    121. 121. Features! Start with basics... Tabular view of data Headers with scrolling body Virtual paging/scrolling Sorting Keyboard Navigation© SitePen, Inc. All Rights Reserved
    122. 122. Feature Comparison© SitePen, Inc. All Rights Reserved
    123. 123. Editing An HTML input or Dijit form widget radio, checkbox, textbox, etc. Event triggered editor or always on© SitePen, Inc. All Rights Reserved
    124. 124. Tree Hierarchical data view Maintain column alignment Lightweight, easy to extend© SitePen, Inc. All Rights Reserved
    125. 125. Selection Select rows via keyboard, mouse, or touch. Selection modes: extended (standard default), single, multiple, none Fires DOM events for selections to easily listen for selection changes Row or cell level selection Selectors - editor driven selection© SitePen, Inc. All Rights Reserved
    126. 126. Selection: Example© SitePen, Inc. All Rights Reserved
    127. 127. Themes Claro, Tundra, Soria, Nihilo, Squid, Sage, Slate Compatible with jQuery Themeroller for generic styling ui-widget-content, ui-widget-header, ui-state-default, ui-state-active, ui-state-highlight© SitePen, Inc. All Rights Reserved
    128. 128. Themes: Examples© SitePen, Inc. All Rights Reserved
    129. 129. Complex Layout Multiple rows per object colSpans and rowSpans Freeze columns (other columns horizontally scroll) Handled as continuous rows, making it much simpler© SitePen, Inc. All Rights Reserved
    130. 130. Complex Layout: Example© SitePen, Inc. All Rights Reserved
    131. 131. Complex Layout: More Examples© SitePen, Inc. All Rights Reserved
    132. 132. Complex Layout: dTunes© SitePen, Inc. All Rights Reserved
    133. 133. Drag n’ Drop Drag n’ Drop rows Within a grid To other grids To/from other sources/targets© SitePen, Inc. All Rights Reserved
    134. 134. Store Integration Fully Object store driven Correct result set notifications, highlighted changes Auto-save or queued saves© SitePen, Inc. All Rights Reserved
    135. 135. More... Column Resizing Keyboard navigation per row or per cell Plug-in approaches makes it easy to add many new features!© SitePen, Inc. All Rights Reserved
    136. 136. Pushes on New Technologies AMD Package Repository XStyle put-selector (template-free) dojo/on© SitePen, Inc. All Rights Reserved
    137. 137. dgrid and Dojo Storehttps://github.com/SitePen/dgrid/blob/master/test/JsonRest.html© SitePen, Inc. All Rights Reserved
    138. 138. dgrid and Dojo Store require(["dgrid/List", "dgrid/OnDemandGrid","dgrid/Selection", "dgrid/editor", "dgrid/Keyboard", "dgrid/tree", "dojo/_base/declare", "dojo/store/JsonRest", "dojo/ store/Observable", "dojo/store/Cache", "dojo/store/Memory", "dojo/domReady!"], function(List, Grid, Selection, editor, Keyboard, tree, declare, JsonRest, Observable, Cache, Memory){ var testStore = Observable(Cache(JsonRest({ target:"./data/rest.php?", idProperty: "id", query: function(query, options){ return JsonRest.prototype.query.call(this, query, options); } }), Memory())); testStore.getChildren = function(parent, options){ return testStore.query({parent: parent.id}, options); }; // ...© SitePen, Inc. All Rights Reserved
    139. 139. dgrid and Dojo Store (continued) // ... var columns = [ tree({label:Name, field:name, sortable: false}), {label:Id, field:id, sortable: false}, editor({label:Comment, field:comment, sortable: false}, "text"), editor({label:Boolean, field:boo, sortable: false, autoSave: true}, "checkbox") ]; window.grid = new (declare([Grid, Selection, Keyboard]))({ store: testStore, getBeforePut: false, columns: columns }, "grid"); });© SitePen, Inc. All Rights Reserved
    140. 140. dgrid and Dojo Storehttps://github.com/SitePen/dgrid/blob/master/test/JsonRest.html© SitePen, Inc. All Rights Reserved
    141. 141. dgrid Resources Blog post: http://www.sitepen.com/blog/ 2012/04/23/dgrid_beta/ Web Site (tutorials, docs, demos): http://dgrid.io/© SitePen, Inc. All Rights Reserved
    142. 142. Plans for Dojo 1.8+ API Clean-up, Further Split of Features Compose (improved declare), xstyle, put-selector, Dijit/ Widget Remove weight of deprecated APIs DojoX completely moved to foundation packages Releases Performance test suite across entire toolkit, and eventd Independent releases of packages, roll out package release sets Support major HTML5, mobile, modern browser features Web Builder and Dojo Foundation Packages© SitePen, Inc. All Rights Reserved
    143. 143. The Dojo FoundationOpen Home for the Open Web© SitePen, Inc. All Rights Reserved
    144. 144. Community© SitePen, Inc. All Rights Reserved
    145. 145. Community Apphttp://vepi-2k3208aja.acs.cnet-caen.fr/df/© SitePen, Inc. All Rights Reserved
    146. 146. Foundation Structure The Dojo Foundation is the home of great 100- point open source projects, created by extraordinary people and companies to solve important problems. 501(c)(6) non-profit foundation just enough foundation without bureaucracy or excessive process 5 member board Toolkit project lead council (1 per project) Voting by committers (generally through mailing lists) Committers nominated by project, reviewed by board© SitePen, Inc. All Rights Reserved
    147. 147. Foundation Projects© SitePen, Inc. All Rights Reserved
    148. 148. Major Contributors & Users IBM, Orange, SitePen, TIBCO 800 Flowers, Abbott Labs, Accenture, Alcatel-Lucent, ADP, AOL, ASU, Bank of Montréal, Barclays, Blue Coat Systems, Bottomline Technologies, Bristol-Myers Squibb, Brocade, BMW, Calabrio, Cambridge Semantics, Carsonified Treehouse, CGI, Chase, Chess.com, Chill.com, Cisco, Citi, Coventry Healthcare, Cox, Daimler, Digital Reasoning, Disney, Eclipse Orion, ESRI, Eye-Fi, Fidelity Investments, Field Aware, Fiserv, Google, ING, Intalio, KLP, Liberty Mutual, Lemonade, Lufthansa, Marriott, Mirapoint, Mozilla, Namesake, NASA, NOAA, OpenClass, Oracle, Orange, Pearson, Pershing, Premier, QBE, Reach Local, Sage, Serena Software, Shell, Thomson Reuters, TIBCO, UK, Uniface, USA, uxebu, Verizon Wireless, Vidéotron, vmware (Spring), Vodafone, Vodori© SitePen, Inc. All Rights Reserved
    149. 149. Documentation Significant Tutorial Series (55 and counting!)http://dojotoolkit.org/documentation/© SitePen, Inc. All Rights Reserved
    150. 150. Getting Started Hello Dojo: http://dojotoolkit.org/documentation/ tutorials/1.7/hello_dojo/ Start a Dojo project: http://www.sitepen.com/ blog/2011/05/04/what-is-the-best-way-to- start-a-dojo-project/ Dojo Boilerplate: https://github.com/csnover/ dojo-boilerplate dgrid: http://www.sitepen.com/blog/2011/10/26/ introducing-the-next-grid-dgrid/© SitePen, Inc. All Rights Reserved
    151. 151. Result: Modular Tools Tools to mix and match to Modular enough for very create your app simple projects, flexible Separate data from UI and consistent enough to logic simple and handle the most seamlesslyhttp://landmarks.sitepen.com/ challenging, feature-rich© SitePen, Inc. All Rights Reserved web apps
    152. 152. © SitePen, Inc. All Rights Reserved
    153. 153. SitePen: We Build Extraordinary Apps. Desktop and Mobile Web App professional services Creators and leaders of open source web software© SitePen, Inc. All Rights Reserved
    154. 154. Thanks! Q&A SitePen sitepen.com Dojo Toolkit dojotoolkit.org Twitter: @dylans @sitepen @dojo© SitePen, Inc. All Rights Reserved

    ×