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

How dojo works

  • 8,516 views
Uploaded on

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

More 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,516
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
565
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