How dojo works

How Dojo worksBy Amit Tyagi

Dojo is a powerful, open source JavaScript toolkit (library).

Dojo provide uniform access to Browser APIs and encapsulates JavaScript implementations.

Dojo provides pluggable widgets UI(Dijit).

Dojo Introduction

Dojo makes creating Web applications ( web 2.0) simpler and quick.

Helps in handling of the Cross Browser Development.

Why Dojo?

Download from http://download.dojotoolkit.org

SVN and git checkout also available.

How to get Dojo

http://download.dojotoolkit.org/

Dojo Architecture

Size 26KB (gzipped) Bootstrap Host and Browser detection (browser,

SpiderMonkey, Rhino, Appcelerator Titanium, AIR)

Package system JavaScript enhancements Query, DOM, Ajax, Events, FX

Dojo Base

<html> <head> <title>Dojo!</title> <script type="text/javascript"

src="/path/to/dojo.js"> </script> </head> <body> </body></html>

Getting Started

Dojo comes with Firebug lite, if FireBug is not installed .

djConfig.isDebug

dojo.require("dojo.fx") Downloads /path/to/dojotoolkit/dojo/fx.js

dojo.registerModulePath("cb1", "/js/cb1") dojo.require("cb1.module")

Downloads /js/cb1/module.js

dojo.require("blah.module") 404 Error: /path/to/dojotoolkit/some/module.js

dojo.provide("cb1.module")

Package System

dojo.isMoz dojo.isFF dojo.isIE dojo.isAIR dojo.isOpera dojo.isKhtml dojo.isWebKit dojo.isSafari dojo.isChrome dojo.isQuirks

Browser Detection

dojo.declare()<script type="text/javascript">dojo.declare("MyObj", null, {say: function(msg){ console.log(msg); }});var obj = new MyObj;obj.say("Hi!");</script>

dojo.extend()<script type="text/javascript">dojo.extend(MyObj, {sayUpperCase: function(msg){ this.say(msg.toUpperCase()); }});var obj = new MyObj;obj.sayUpperCase("Hi!");</script>

Classes and Inheritance

dojo.mixin()<script type="text/javascript">var obj = { firstName: "chris", lastName:

"barber" };var emp = dojo.mixin({ title: "hacker" }, obj);</script>

Contd.

dojo.byId() dojo.body() dojo.create() dojo.destroy() dojo.attr() dojo.style() dojo.place()

DOM functions

dojo.addOnLoad() dojo.addOnUnload() dojo.connect()/ dojo.disconnect() dojo.subscribe dojo.publish dojo.unsubscribe()

Events

dojo.xhr() dojo.xhrGet() dojo.xhrPost() dojo.deferred

AJAX

dojo.fadeIn(), dojo.fadeOut() dojo.animateProperty()

FX

Dojo Core

Unified Data API◦ dojo.data

Drag n Drop◦ dojo.dnd

Advanced FX◦ dojo.fx

Internationalization◦ dojo.i18n

Google Gears◦ dojo.gears

Dojo Core

• Utilities• dojo.string• dojo.date• dojo.regexp

• I/O Transports• dojo.io.iframe• dojo.io.script• dojo.rpc

• Browser History• dojo.back

• OpenAjax

Dojo's widget system Huge library of existing widgets

◦ Form elementsButtons, drop downs, input fields, etc

◦ Layout widgetsContent pane, accordions, tab container, stack

container, etc◦ Rich experience widgets

Tree, progress bar, dialog, tooltip, menu, rich text editor, etc

Accessibility (a11y) Templated - externalized HTML templates Themes (tundra, soria, nihilo, noir)

What is Dijit?

constructor() postMixInProperties() buildRendering() postCreate() startup()

Widget Lifecycle

BorderContainer ContentPane LinkPane TabContainer AccordionContainer SplitContainer StackContainer

Dijit Layout Widgets

Place for extra stuff Stuff that isn't ready for prime time

◦ (i.e. dojox.grid)

What is Dojox?

dojox.analytics◦ Client monitoring

dojox.charting dojox.cometd dojox.data

◦ Tons of data stores dojox.dtl

◦ Django template library dojox.embed

◦ Embed Flash, QuickTime

Tour of Dojox

• dojox.form– Additional form

widgets

• dojox.fx– Cool FX

• dojox.gfx– Cross-browser vector

• graphics (SVG/VML)• dojox.gfx3d• dojox.grid

– Grid widget

dojox.highlight◦ Syntax highlighting

dojox.image◦ Lightboxes,

slideshow,gallery, magnifier

dojox.io◦ Additional transports

dojox.layout◦ Dijit layout widgets

dojox.off◦ Offline support

Tour of Dojox Contd.

• dojox.rpc• dojox.secure• Sandboxing

• dojox.storage• Persistent client-side

storage• dojox.widgets• Additional dijit

widgets• dojox.xmpp• XMPP client

Build system DOH - Dojo Objective Harness

◦ Testing framework

Dojo Util

Reduce number of files sent over the wire Reduce JavaScript file sizes Profiles Layers Build script Executes Java, Rhino Compiles modules into layer .js files Strips whitespace, comments, console.*(), etc Minification (i.e. "var something = 123;" becomes

"var _0=123;" Inlines widget HTML templates & @import CSS

Dojo Build system

Build script in /util/buildscriptsbuild.sh (GNU/Linux, MacOSX, Solaris, Unix)build.bat (Windows)

Pre-defined profiles in /util/buildscripts/profilesbasecometddemos-alldtkapifxlayersofflinerhinosqlstandardstandardCustomBasestorage

Build system

API Docs◦ http://api.dojotoolkit.org

Online Docs◦ http://docs.dojocampus.org

Blogs◦ http://dojotoolkit.org/rss.xml◦ http://dojocampus.org/content/feed

Resources

How dojo works

Technology

Transcript of How dojo works