Post on 08-May-2015
description
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
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
<script type="text/javascript" src="/path/to/dojo.js“ djConfig="isDebug:true,parseOnLoad:true" ></script>
debugAtAllCosts: true/false locale: 'ja-jp' extraLocale: 'zn-ch' baseUrl: 'http://www.domain.com/path/to/dojotoolkit' modulePaths: {'cb1','/js/cb1'} afterOnLoad: true/false addOnLoad: function/array useCustomLogger: anything != false require: ['dojo.fx', 'dojo.string'] defaultDuration: 200 // int milliseconds
djConfig
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.
<script type="text/javascript">var nodes = dojo.query("li"); // can use CSS3
selectorsdojo.query("a").forEach(function(n){n.innerHTML += "!!";});dojo.query("div").style({ padding:"1px",
margin:"0px" });</script>
dojo.query()
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
Dijit
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
Dojox
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