Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Dojo Toolkit An Introduction


Published on

An overview of the practical and useful Dojo Toolkit for the Fairfield County JavaScript Meetup, Sept. 26 2012. A shout to Chris Barber and his excellent presentation which served as inspiration.

Published in: Technology
  • Be the first to comment

The Dojo Toolkit An Introduction

  1. 1. Fairfield Country JavaScript Meetup Wednesday Sept 26, 2012
  2. 2. About Jeff Fox• Senior Software Engineer at [X+1]• Self taught Web developer since 1997• Also studied Art and Music Production• Baseball enthusiast (ney fanatic)• Twitter: @jfox015
  3. 3. Overview• What is Dojo?• Major components of the Dojo Toolkit• Intro to [X+1] Origin• Practical examples of Dojo usage in [X+1] Origin application• Q&A
  4. 4. What is it?
  5. 5. What is Dojo?• Powerful, feature rich JavaScript Toolkit• Open Source and Community Driven• One of the leading JS Frameworks along with Jquery, YUI, MooTools and Prototype• Geared towards rapid web app development
  6. 6. Who is behind Dojo?• Non-profit organization• Open source community committers• Industry leading technologists
  7. 7. Who is backing Dojo?
  8. 8. Why use Dojo?• Modern Browser Support• Full feature Mobile library (Dojo 1.7+)• Package Based• oAuth compatible• XMPP• 2D and 3D FX Library• Namespaced, so it won’t conflict with other libraries.
  9. 9. Important support milestones• IBM and Sun (now Oracle) announce support and contribute code• Zend Technologies enters a partnership to integrate Dojo into the Zend Framework
  10. 10. Dojo Architecture
  11. 11. Dojo and Dojo Core
  12. 12. Calling DojoLocal<script type="text/javascript" src=“js/dojo/dojo.js"></script>Google API<script src=" /ajax/libs/dojo/1.6.0/dojo/dojo .xd.js"></script>
  13. 13. Dojo Base• Dojo.js – 90kb compressed (v 1.6.1)• Initializes Dojo Bootstrap• Built in host detection• Class Package System• Query, DOM, Ajax, Events, FX, Mobile
  14. 14. djConfig<script type="text/javascript" src=“js/dojo/dojo.js“ data- dojo-config="isDebug: true, parseOnLoad: true"></script>• Uses Firebug(if installed). Firebug Lite included if not• Send messages via console.*()
  15. 15. Dojo Packages• Include additional classes using dojo.require() – dojo.require(“”); – Resolves to “pathtojs/dojo/store/Cache.js”• Register and reuse a non-standard module path – dojo.registerModulePath(‘path2’,’a pth/to/js’); – dojo.require(“path2.ModuleName”);
  16. 16. Browser Detection• Built in detection for modern browsers and technologies• dojo.isMoz • dojo.isKhtml• dojo.isFF • dojo.isWebKit• dojo.isIE • dojo.isSafari• dojo.isAIR • dojo.isChrome• dojo.isOpera • dojo.isQuirks
  17. 17. Classes and Inheritance • dojo.declare() – “Foundation of class creation. Allows for multiple inheritance to create flexible code and avoid writing the same code routines.” * dojo.declare("myClass",null,{     // Custom code here });* Source Classy JavaScript with dojo.declare, David Walsh
  18. 18. Classes and Inheritance • dojo.extend() – Add functionality and values to classes dojo.extend(myClass,{     showUpper: function (msg)  { this.say(msg.toUpperCase()};  } }); var myc = new myClass(); myc.showUpper(“hello”);* Source Classy JavaScript with dojo.declare, David Walsh
  19. 19. Cool and useful functions• dojo.mixin() – Utility function for mixing together objects – Powerful yet sometimes confusing function – Similar to extend(), but only works on objectsvar objOne = { a: "first", b:  "second"}; dojo.mixin(objOne ,{c: ”Third”}});
  20. 20. Cool and useful functions• dojo.hitch() – Utility function for simplifying context bindings – Creates a new function bound to a specific context – Can safely invoke without worrying about context changesvar myObject = { foo: "baz" }; var boundFunction =  dojo.hitch(myObject, function() {return "bar";});
  21. 21. Cool and useful functions• dojo.query() – Uses familiar CSS queries (which you use in your stylesheets) to retrieve a list of nodes, including support for advanced CSS3 selectorsdojo.query(".odd").forEach(function (node, index, nodelist){ dojo.addClass(node, "red");});
  22. 22. More helpful DOM Functions• dojo.byId() – Retrieve elements by DOM node id• dojo.body() – Retrieve the HTML body element• dojo.create()•• dojo.destroy() – Add and remove DOM nodes
  23. 23. Manipulate DOM nodes• dojo.attr() – Get and set node attributes• – Allows access to read and manipulate CSS styles.<div id="poorboy3"></div><script type="dojo/method”>"poorboy3", "color", "red");</script>
  24. 24. Events Support• dojo.connect()• dojo.disconnect() – Add event handling to objects• dojo.subscribe()• dojo.publish()• dojo.unsubscribe() – Subscribe to and broadcast custom object events
  25. 25. Ajax• dojo.xhr()• dojo.xhrGet()• dojo.xhrPost() – Standardized Ajax functionality• dojo.Deferred() – Powerful tool for handling asynchronous operations – Deferred.then() allows for handling of both successful and error responses• dojo. DeferredList() – Handle multiple Deferred
  26. 26. FX• dojo.fadeIn()• dojo.fadeOut() – Easy fade handlers• dojo.animateProperty() – Animate a node according to set parameters
  27. 27. Dojo Core• • Utilities – Unified Data API – dojo.string• dojo.dnd – – Drag and Drop Support – dojo.regexp• dojo.fx • I/O – Advanced FX Library –• dojo.i18n – – Internationalization – dojo.rpc• OpenAjax • dojo.back – Browser History
  28. 28. Dijit
  29. 29. What is Dijit?• Dojo Widget and Component Library• Large library of prebuilt and tested widgets – Form Element Library • Buttons, select boxes, inputs, radios, checkboxes, etc. – Layout Widgets • Content Pan, Accordians, tabbed containers, stacks, etc – Experience Widgets • Tree, progress bar, dialogs, tooltips, menus, advanced text boxes
  30. 30. What is Dijit?• Fully accessible• Built in Template Support – Can utilize external HTML Templates when building dojo widgets• Theme Support – Tundra, Soria, Nihilo, Noir
  31. 31. Declarative Instantiations• Can declare a DOM element as a Dijit Widget by means of dojoType – For v 1.7 and up, it is now dojo-type<textarea dojoAttachPoint="campNotes"  name="campNotes"  dojoType="dijit.form.Textarea"  class="campNotes"></textarea>
  32. 32. Programmatic Instantiations• Create new Dijit Widgets via JS new and place or insert into HTML outputvar mts = new  dijit.form.MultiSelect({ multip le: multiple, size: 10, name:  ‘costsList }, this.formNode);
  33. 33. Widget Lifecycle• constructor()• postMixInProperties()• buildRendering()• postCreate()• startup()
  34. 34. Dijit Shortcuts• Form. get(“value”) – Automatically access the values of all form elements that have a value attribute – Use dojo.mixin() to further add form data for submission – Use dojo.hitch() to add additional form validation and error handling
  35. 35. Helpful Layout Widgets• BorderContainer• ContentPane• LinkPane• TabContainer• AccordianContainer• SplitContainer• StackContainer
  36. 36. DojoX
  37. 37. What is DojoX• DojoX is the Dojo breeding or playground.• Contains widgets, classes and utilities that are not yet deemed ready for inclusion in the main Dojo library• Contains experimental widgets and elements, most notable being the Dojo Grid widget
  38. 38. What’s in DojoX?• Analytics • I/O• Charting • More Data Stores• CometD • Language• Drawing • Layout• Editors • Mobile(!)• More Form Widgets • Testing• The Grid • Widgets• 2D/3D gFx • XMPP
  39. 39. Dojo Mobile
  40. 40. Dojo Mobile• Device ready Dojo JS library• Pre-Built Themes for iOS and Android• Leverage existing Dojo knowledge when building for mobile devices
  41. 41. Dojo Mobile Example<div id="general" dojoType=""><h1 dojoType="" back="Settings" moveTo="settings">General View</h1><ul dojoType=""><li dojoType="" moveTo="about">About</li></ul></div>
  42. 42. Util
  43. 43. Dojo Util• DOH – Built in Unit Testing Tool
  44. 44. Q&A