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.
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
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
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
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
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.isKhtml
• dojo.isFF • dojo.isWebKit
• dojo.isIE • dojo.isSafari
• dojo.isAIR • dojo.isChrome
• dojo.isOpera • 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
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);
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
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 • I/O
• Charting • More Data Stores
• CometD • Language
• Drawing • Layout
• Editors • Mobile(!)
• More Form Widgets • Testing
• The Grid • Widgets
• 2D/3D gFx • XMPP
40. Dojo Mobile
• Device ready Dojo JS library
• Pre-Built Themes for iOS and Android
• Leverage existing Dojo knowledge when
building for mobile devices