The Dojo Toolkit An Introduction

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.

1. Fairfield Country JavaScript Meetup
Wednesday Sept 26, 2012

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. 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. What is it?

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. Who is behind Dojo?
• Non-profit organization
• Open source community committers
• Industry leading technologists

7. Who is backing Dojo?

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. 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. Dojo Architecture

11. Dojo and Dojo Core

12. Calling Dojo
<script type="text/javascript"
src=“js/dojo/dojo.js"></script>
Local
<script
src="http://ajax.googleapis.com
/ajax/libs/dojo/1.6.0/dojo/dojo
.xd.js"></script>
Google API

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. 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. Dojo Packages
•Include additional classes using dojo.require()
–dojo.require(“dojo.store.Cache”);
–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. Browser Detection
•Built in detection for modern browsers and
technologies
• dojo.isMoz
• dojo.isFF
• dojo.isIE
• dojo.isAIR
• dojo.isOpera
• dojo.isKhtml
• dojo.isWebKit
• dojo.isSafari
• dojo.isChrome
• dojo.isQuirks

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. 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. Cool and useful functions
•dojo.mixin()
–Utility function for mixing together objects
–Powerful yet sometimes confusing function
–Similar to extend(), but only works on objects
var objOne = { a: "first", b: 
"second"}; 
dojo.mixin(objOne ,{c: ”Third”}});

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
changes
var myObject = { foo: "baz" }; 
var boundFunction = 
dojo.hitch(myObject, function()
{return "bar";});

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 selectors
dojo.query(".odd").forEach(function
(node, index, nodelist){
dojo.addClass(node, "red");
});

22. More helpful DOM Functions
•dojo.byId()
–Retrieve elements by DOM node id
•dojo.body()
–Retrieve the HTML body element
•dojo.create()
•dojo.place()
•dojo.destroy()
–Add and remove DOM nodes

23. Manipulate DOM nodes
•dojo.attr()
–Get and set node attributes
•dojo.style()
–Allows access to read and manipulate CSS styles.
<div id="poorboy3"></div>
<script type="dojo/method”>
dojo.style("poorboy3", "color", "red");
</script>

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. 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. FX
•dojo.fadeIn()
•dojo.fadeOut()
–Easy fade handlers
•dojo.animateProperty()
–Animate a node according to set parameters

27. Dojo Core
•dojo.data
–Unified Data API
•dojo.dnd
–Drag and Drop Support
•dojo.fx
–Advanced FX Library
•dojo.i18n
–Internationalization
•OpenAjax
•Utilities
–dojo.string
–dojo.date
–dojo.regexp
•I/O
–dojo.io.iframe
–dojo.io.script
–dojo.rpc
•dojo.back
–Browser History

28. Dijit

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. 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. 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. Programmatic Instantiations
•Create new Dijit Widgets via JS new and place
or insert into HTML output
var mts = new 
dijit.form.MultiSelect({ multip
le: 'multiple', size: 10, name: 
‘costsList' }, this.formNode);

33. Widget Lifecycle
•constructor()
•postMixInProperties()
•buildRendering()
•postCreate()
•startup()

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. Helpful Layout Widgets
•BorderContainer
•ContentPane
•LinkPane
•TabContainer
•AccordianContainer
•SplitContainer
•StackContainer

36. DojoX

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. What’s in DojoX?
•Analytics
•Charting
•CometD
•Drawing
•Editors
•More Form Widgets
•The Grid
•2D/3D gFx
•I/O
•More Data Stores
•Language
•Layout
•Mobile(!)
•Testing
•Widgets
•XMPP

39. Dojo Mobile

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. Dojo Mobile Example
<div id="general" 
dojoType="dojox.mobile.View"><h1 
dojoType="dojox.mobile.Heading" 
back="Settings" moveTo="settings">General 
View</h1>
<ul dojoType="dojox.mobile.RoundRectList">
<li dojoType="dojox.mobile.ListItem" 
moveTo="about">
About
</li>
</ul>
</div>

42. Util

43. Dojo Util
•DOH – Built in Unit Testing Tool

44. Q&A