Your SlideShare is downloading. ×
  • Like
How dojo works
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

How dojo works

  • 8,756 views
Published

Basic Introduction to Dojo JavaScript toolkit. Find Video tutorial at http://www.youtube.com/watch?v=Q3S3yb8OlTU

Basic Introduction to Dojo JavaScript toolkit. Find Video tutorial at http://www.youtube.com/watch?v=Q3S3yb8OlTU

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,756
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
579
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. By Amit Tyagi
  • 2.  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).
  • 3.  Dojo makes creating Web applications ( web 2.0) simpler and quick. Helps in handling of the Cross Browser Development.
  • 4.  Download from http://download.dojotoolkit.org SVN and git checkout also available.
  • 5.  Size 26KB (gzipped) Bootstrap Host and Browser detection (browser, SpiderMonkey, Rhino, Appcelerator Titanium, AIR) Package system JavaScript enhancements Query, DOM, Ajax, Events, FX
  • 6. <html> <head> <title>Dojo!</title> <script type="text/javascript" src="/path/to/dojo.js"> </script> </head> <body> </body></html>
  • 7. <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
  • 8.  Dojo comes with Firebug lite, if FireBug is not installed .
  • 9. dojo.require("dojo.fx") Downloads /path/to/dojotoolkit/dojo/fx.jsdojo.registerModulePath("cb1", "/js/cb1")dojo.require("cb1.module") Downloads /js/cb1/module.jsdojo.require("blah.module") 404 Error: /path/to/dojotoolkit/some/module.jsdojo.provide("cb1.module")
  • 10.  dojo.isMoz dojo.isFF dojo.isIE dojo.isAIR dojo.isOpera dojo.isKhtml dojo.isWebKit dojo.isSafari dojo.isChrome dojo.isQuirks
  • 11. 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>
  • 12. dojo.mixin()<script type="text/javascript">var obj = { firstName: "chris", lastName: "barber" };var emp = dojo.mixin({ title: "hacker" }, obj);</script>
  • 13. <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>
  • 14.  dojo.byId() dojo.body() dojo.create() dojo.destroy() dojo.attr() dojo.style() dojo.place()
  • 15.  dojo.addOnLoad() dojo.addOnUnload() dojo.connect()/ dojo.disconnect() dojo.subscribe dojo.publish dojo.unsubscribe()
  • 16.  dojo.xhr() dojo.xhrGet() dojo.xhrPost() dojo.deferred
  • 17.  dojo.fadeIn(), dojo.fadeOut() dojo.animateProperty()
  • 18. Dojo Core
  • 19.  Unified Data API • Utilities ◦ dojo.data • dojo.string Drag n Drop • dojo.date ◦ dojo.dnd • dojo.regexp Advanced FX • I/O Transports ◦ dojo.fx • dojo.io.iframe Internationalizati • dojo.io.script on • dojo.rpc ◦ dojo.i18n • Browser History Google Gears • dojo.back ◦ dojo.gears • OpenAjax
  • 20. Dijit
  • 21.  Dojos widget system Huge library of existing widgets ◦ Form elements Buttons, drop downs, input fields, etc ◦ Layout widgets Content 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)
  • 22.  constructor() postMixInProperties() buildRendering() postCreate() startup()
  • 23.  BorderContainer ContentPane LinkPane TabContainer AccordionContainer SplitContainer StackContainer
  • 24. Dojox
  • 25.  Place for extra stuff Stuff that isnt ready for prime time ◦ (i.e. dojox.grid)
  • 26.  dojox.analytics • dojox.form ◦ Client monitoring – Additional form widgets dojox.charting • dojox.fx dojox.cometd – Cool FX dojox.data • dojox.gfx ◦ Tons of data stores – Cross-browser vector dojox.dtl • graphics (SVG/VML) ◦ Django template library • dojox.gfx3d dojox.embed • dojox.grid – Grid widget ◦ Embed Flash, QuickTime
  • 27.  dojox.highlight • dojox.rpc ◦ Syntax highlighting • dojox.secure dojox.image • Sandboxing ◦ Lightboxes, slideshow,gallery, • dojox.storage magnifier • Persistent client- dojox.io side storage ◦ Additional transports • dojox.widgets dojox.layout • Additional dijit ◦ Dijit layout widgets widgets dojox.off • dojox.xmpp ◦ Offline support • XMPP client
  • 28.  Build system DOH - Dojo Objective Harness ◦ Testing framework
  • 29.  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
  • 30. Build script in /util/buildscripts build.sh (GNU/Linux, MacOSX, Solaris, Unix) build.bat (Windows)Pre-defined profiles in /util/buildscripts/profiles base cometd demos-all dtkapi fx layers offline rhino sql standard standardCustomBase storage
  • 31.  API Docs ◦ http://api.dojotoolkit.org Online Docs ◦ http://docs.dojocampus.org Blogs ◦ http://dojotoolkit.org/rss.xml ◦ http://dojocampus.org/content/feed