This document provides an overview of Dojo, an open source JavaScript toolkit. It discusses the core components of Dojo including the core libraries for DOM handling, CSS handling, and JavaScript enhancements. It also describes Dijit, which provides accessible widgets, and DojoX, which contains experimental modules. The core provides basic functions for AJAX, events, animation and more. Dijit offers predefined widgets and mechanisms for creating custom widgets. DojoX extends the core functionality with additional widgets, behaviors, stores and other modules.

1. DOJO TRAINING
Vadivelan.K

2. • 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

3. 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 companies
IBM, AOL, Sun,…
Professional support is available too
Uxebu, Sitepen
What is Dojo

4. 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…
Dojo built with

5. 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
Core: Dom buffering

6. Dojo provides a layer that hides this shame
Getting and setting styles – dojo.style
Class management –
dojo.hasClass, dojo.addClass, dojo.removeClass, dojo.toggleClas
s
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
Core: CSS Buffering

7. 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
Core: Enhancements to JS

8. 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 Dijit

9. 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

10. 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

11. 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 DojoX

12. • 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

13. QUESTIONS?