Date post: | 17-Jul-2016 |
Category: |
Documents |
Upload: | sajithanazer |
View: | 9 times |
Download: | 0 times |
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
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.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
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?
BorderContainer ContentPane LinkPane TabContainer AccordionContainer SplitContainer StackContainer
Dijit Layout Widgets
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
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