introduction to dojo

© 2010 IBM Corporation

Introduction to Dojo

Yoav Rubin, IBM Research – Haifa, [email protected]

© 2010 IBM Corporation2

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 …


Dijit


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>

<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… }});

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


dojoX


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

Documents

server dojo

dojo core

parameter dojo

id dojo

styles dojo

strings dojo

quering dojo

gettting dojo