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
This template can be used as a starter file for presenting training materials in a group setting.SectionsRight-click on a slide to add sections. Sections can help to organize your slides or facilitate collaboration between multiple authors.NotesUse the Notes section for delivery notes or to provide additional details for the audience. View these notes in Presentation View during your presentation. Keep in mind the font size (important for accessibility, visibility, videotaping, and online production)Coordinated colors Pay particular attention to the graphs, charts, and text boxes.Consider that attendees will print in black and white or grayscale. Run a test print to make sure your colors work when printed in pure black and white and grayscale.Graphics, tables, and graphsKeep it simple: If possible, use consistent, non-distracting styles and colors.Label all graphs and tables.
Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
This is another option for an Overview slides using transitions.
