DOJO TRAINING

Vadivelan.K

• What is Dojo• Dojo Toolkits (Dojo built with)• Core– Core: DOM Handling– Core: CSS Handling– Core: Enhancements to JS

• Dijit– What is Dijit– What is a Widget– Using Widget

• DojoX– What is DojoX– Inside DojoX

A toolkit that enables the creation of modern interactive web applications

An open source project

Friendly license

Developed by a community of experts

Used by many companiesIBM, AOL, Sun,…

Professional support is available tooUxebu, Sitepen

What is Dojo

CoreBasic libraries: Ajax , events, DOM querying, animation, dnd, i18n and localization, data abstraction

DijitFully accessible and localized predefined set of widgetsWidgetcrafting - mechanisms to create your own widgets

DojoxNumerous experimental modules that extend the core functionality

Grid , wiring, client side templating, charting, more widgets, specific data stores and more and more…

Dojo built with

The DOM is the internal representation of the page within the browser

Can be manipulated using JavaScript APIsThese APIs are not consistent in all of the browsers (IE…)

Dojo provides a layer that hides this shameHandling 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.destroyAttributes handling:

Setting and gettting - dojo.attr Removing and quering - dojo.removeAttr, dojo.hasAttr

Core: Dom buffering

Dojo provides a layer that hides this shameGetting and setting styles – dojo.styleClass management – dojo.hasClass, dojo.addClass, dojo.removeClass, dojo.toggleClassPosition –querying for the location of a DOM node dojo.positionLayout – getting and setting the layout properties of a DOM node:

dojo.marginBox, dojo.contentBox

Core: CSS Buffering

Handling arraysdojo.forEach, dojo.some, dojo.every, dojo.filter,

dojo.indexOfExtending strings

dojo.trim, dojo.replaceGeneral utilities

Type checkingdojo.isString, dojo.isArray, dojo.isFunction, dojo.isObject

Core: Enhancements to JS

The dojo component that is responsible for handling widgetsFully accessibleFully localizedProvides a rich set of widgets• General usage widgets• Layout widgets• Form widgets

Provides several themes and allows developers to provide themes of their ownProvides 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 Dijit

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

Dijit: What is a Widget

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

Dijit: Using Widget

The experimental part of dojo

Many projects are included within it (~50)Some of them may be removed on later releasesNot likely, though

Extending the core functionalityMore widgetsMore behaviors

What is 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

Inside DojoX

QUESTIONS?