Introduction To Dojo

Introduction to Dojo Yoav Rubin, IBM Research – Haifa, yoav@il.ibm.com

What is Dojo
A toolkit that enables the creation of modern web applications
An open source project
Friendly license
Developed by a community of experts
Used by many companies
IBM, AOL, Sun,…
Professional support is available too
Uxebu, Sitepen

What is Dojo built of
Core
Basic libraries: Ajax , events, DOM querying, animation, dnd, i18n and localization, data abstraction
Dijit
Fully accessible and localized predefined set of widgets
Widgetcrafting - mechanisms to create your own widgets
Dojox
Numerous experimental modules that extend the core functionality
Grid , wiring, client side templating, charting, more widgets, specific data stores and more and more…
Utilities
Build system
Unit testing

Dojo core

“ In theory there is no difference between theory and practice. In practice there is”
Yogi Berra

DOM buffering
The DOM is the internal representation of the page within the browser
Can be manipulated using JavaScript APIs
These APIs are not consistent in all of the browsers (IE…)
Dojo provides a layer that hides this shame
Handling the DOM tree
Querying using css selector syntax: dojo.query
Locating elements by id – dojo.byId
Lifecycle of a DOM element: dojo.create , dojo.place , dojo.destroy
Attributes handling:
Setting and gettting - dojo.attr
Removing and quering - dojo.removeAttr , dojo.hasAttr

CSS engine buffering
CSS allows the developer to set how things are presented on the browser
Each browser has it own CSS engine
The syntax and semantic of CSS is not consistent in all of the browsers (IE…)
Dojo provides a layer that hides this shame
Getting and setting styles – dojo.style
Class management – dojo.hasClass , dojo.addClass , dojo.removeClass , dojo.toggleClass
Position –querying for the location of a DOM node dojo.position
Layout – getting and setting the layout properties of a DOM node:
dojo.marginBox , dojo.contentBox

Enhancements to core JavaScript
Handling arrays
dojo.forEach, dojo.some, dojo.every, dojo.filter, dojo.indexOf
Extending strings
dojo.trim, dojo.replace
General utilities
Type checking
dojo.isString, dojo.isArray, dojo.isFunction, dojo.isObject
Ensuring that a function would run in a specific context
dojo.hitch
Cloning of nodes
dojo.clone

Name spaces
A name space is an “region” in the product/ project
Dojo allows developers to define a name space and use it
Uses dot notation fo a sub-foldering
Just like Java packages
Create Name space:
Dojo.registerModulePath(“MySoftware”, “../../mySoftware”)
The path is either:
relative to the dojo installation location
A URL

Name spaces – using a name space
Create a resource:
dojo.provide(“MySotware.MyClass”)
This call receives a a parameter a full description of the resource
The name of the namespace
The relative path to the resource
The name of the resource
Each file in the name space must have one dojo.provide call at its top
No more, no less
Use a resource:
dojo.require(“MySoftware.MyClass”)
This call receives as a parameter a full description of a resource

Communication
The three layers of communication in a web application:
Within the client side
From the client to its server
From the client to another server

Client side communication: point to point
Each method invocation of each object can be listened by another object
dojo.connect(srcObject, srcMethod, targetObject, targetMethod)
After the srcMethod is executed within the srcObject, targetMethod is invoked within targetObject
And receives the same arguments as srcMethod received
This is a point to point communication – someone connects the source directly to the target
Note that any method can be connected to
Based on the dynamic nature of Javascript

Client side communication: publish/subscribe
Topic – object can broadcast a topic
alongside an info object
dojo.publish(“theTopicName”,infoObject)
Other objects can register to this topic and execute a function when the topic gets fired
This function receives the info object as a parameter
dojo.subscribe(“theTopicName”, aFunction)
This is a publish / subscribe communication
The sender and receiver are hooked up to a dojo service and not one to the other

Client - server communication
Contact your server
dojo.{xhrGet, xhrPut, xhrPost, xhrDelete}(argumentsObject)
The arguments object is built of
The url
How to parse the content that was returned by the response (text, json …)
What to do when the call succeeds
What to do when the call don’t succeeds
Contact any server – not limited to the original domain :
dojo.io.iframe : allows for background form submission, file uploads
dojo.io.script: allows script fetching and executing

Objects – OO and manipulation
Simulating class declaration using dojo.declare
You need to provide:
The class name,
Its superclasses (multiple inheritance)
Its methods and members
Simulating superclass injection using dojo.delegate
Getting methods and members that don’t exist in one object from another object
Merging two object to become one using dojo.mixin

A few more goodies
Internationalization – using a resource bundle based on the locale
Localization – adapting the presentation of time, date, number and currency to the locale
Drag and drop
Animation
Browser history management
Cookies manipulation
…

What is dijit
The dojo component that is responsible for handling widgets
Fully accessible
Fully localized
Provides a rich set of widgets
General usage widgets
Layout widgets
Form widgets
Provides several themes and allows developers to provide themes of their own
Provides mechanisms for developers to develop new widgets using dojo’s OO approach for modules
By extending existing widgets
By creating brand new widgets

What is a widget
A widget is an object, that contains not just logic, but also a way to be presented on the screen
The way a widget is presented is the widget’s template
Widget can contain other widgets

Using widgets
Declarative - using widgets in the markup
<button dojoType =“dijit.form.Button”></button>
<div dojoType =“dijit.form.Button”></div>
Programmatic creation:
var theButton = new dijit.form.Button();
someNode.appendChild(theButton. domNode );

General widgets
General purpose widgets that are used to make a web page more “application-like”
Menu
Dialogs
Inline editing
Toolbar
ProgressBar
Tree – that can be connected to data source
Rich text editor – with plugins architecture to configure the editor’s functions
There are many more general widgets in dojoX

Layout widgets
A layout widget is a widget that contains other widgets and defines how they will be placed on the screen
Usually contains a set of panes and responsible to lay them around
BorderContainer: splits the screen with border between the different areas
StackContainer, TabContainer, AccordionContainer
Show only one at any given time, the type of the container defines how to toggle between the panes
There are many more layout widgets in dojoX

Form widgets
Form widgets are widgets that are used to get input from users, usually as part of a web form
Text base input
Several predefined types – number, currency, general text, multi line
User can define constraints (e.g., required)
User can provide validating regular expression (e.g., for URLs)
Range based validation for numeric input
Time and date – using calendar and time selector
Selection
DropDownButton
ComboButton
RadioButton
CheckboxButton
There are many more form widgets in dojoX

What makes a widget
A widget is composed of two resources
A .js file that contains the logic of the widget
An html snippet that contains the way the widget is presented
This resource is called the widget’s template
The html code itself can be in another file or inlined in the .js file
This allows later on to perform runtime optimizations, by placing the template in a separate file during development time, and inline it as part of the build process

What makes a widget – cont.
Dojo allows the template and the widget’s object to interact
By defining nodes in the template as members of the widget’s object
<div dojoAttachPoint =“myDiv”>
By connecting events of nodes in the template to methods in the widget’s object
<div dojoAttachEvent=“onmouseover:handleMouseOverMyDiv” >
Predefined variables
The template’s root DOM element is a member of the widget’s object - domNode
The place in the widget’s DOM tree where other elements may be automatically added - containerNode

<div> <table> <tbody> <tr> <td dojoAttachPoint=“v1”>….</td> <td dojoAttachEvent=“onclick:a”></td> </tr> <tbody> </table> </div> dojo.provide(“wid.My”); dojo.require(“dijit._Widget”); dojo.require(“dijit._Templated”); dojo.declare(“wid.My”, dijit._Widget,dijit._Templated, { templatePath:dojo.moduleUrl(“wid”,”my.html”); a: function(b){ … this.v1… doSomething… } });
The widget’s object knows about:
Specific nodes in the template (using the the dojoAttachPoint attribute)
Events fired from the template (using the dojoAttachEvent attribute)

Widget’s lifecycle
Widgets have a predefined lifecycle – from creation to destruction
The developer can provide code that is executed based on that lifecycle
After they were just created ( constructor )
After they were connected to their inheritance chain ( postMixInProperties )
After their template was created ( postCreate )
After all of their internal content (mostly internal widgets) were created ( startup )
Before they are destroyed ( destroy )

Themes
A theme is a general look to a page
Several themes are defined in dijit
It is possible for developers to provide themes of their own

Themes - tundra

Themes – Soria

Themes - Nihilo

What is dojoX
The experimental part of dojo
Many projects are included within it (~50)
Some of them may be removed on later releases
Not likely, though
Extending the core functionality
More widgets
More behaviors

What is included in dojox
Many widgets – general, form and layout
Syntax highlighting
Many data stores
Grid
UUID
Xml handling
File uploading
Client side templating
Json handling
Editor plugins
…

How to use dojo
Download it
http:// www.dojotoolkit.org /
Place it in your server
Add this line to your page:
<script type="text/javascript" src=“ [relativePath] /dojo/dojo.js"></script>

More info
http:// www.dojotoolkit.org /
http:// dojocampus.org /
There are several books, but they become obsolete with any newer Dojo versions

Questions?

Introduction To Dojo

by yoavrubin on Apr 11, 2010

Accessibility

Upload Details

Usage Rights

1 Embed 1

Statistics

Introduction To Dojo Presentation Transcript