• Like
Introduction To Dojo
Upcoming SlideShare
Loading in...5

Introduction To Dojo

Uploaded on


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


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Introduction to Dojo Yoav Rubin, IBM Research – Haifa, yoav@il.ibm.com
  • 2. What is Dojo
    • A toolkit that enables the creation of modern web applications
    • An open source project
    • Friendly license
    • Developed by a community of experts
    • Used by many companies
      • IBM, AOL, Sun,…
    • Professional support is available too
      • Uxebu, Sitepen
  • 3. What is Dojo built of
    • Core
      • Basic libraries: Ajax , events, DOM querying, animation, dnd, i18n and localization, data abstraction
    • Dijit
      • Fully accessible and localized predefined set of widgets
      • Widgetcrafting - mechanisms to create your own widgets
    • Dojox
      • Numerous experimental modules that extend the core functionality
        • Grid , wiring, client side templating, charting, more widgets, specific data stores and more and more…
    • Utilities
      • Build system
      • Unit testing
  • 4. Dojo core
  • 5.
    • “ In theory there is no difference between theory and practice. In practice there is”
    • Yogi Berra
  • 6. DOM buffering
    • The DOM is the internal representation of the page within the browser
      • Can be manipulated using JavaScript APIs
      • These APIs are not consistent in all of the browsers (IE…)
    • Dojo provides a layer that hides this shame
      • Handling the DOM tree
        • Querying using css selector syntax: dojo.query
        • Locating elements by id – dojo.byId
      • Lifecycle of a DOM element: dojo.create , dojo.place , dojo.destroy
      • Attributes handling:
        • Setting and gettting - dojo.attr
        • Removing and quering - dojo.removeAttr , dojo.hasAttr
  • 7. CSS engine buffering
    • CSS allows the developer to set how things are presented on the browser
      • Each browser has it own CSS engine
      • The syntax and semantic of CSS is not consistent in all of the browsers (IE…)
    • Dojo provides a layer that hides this shame
      • Getting and setting styles – dojo.style
      • Class management – dojo.hasClass , dojo.addClass , dojo.removeClass , dojo.toggleClass
      • Position –querying for the location of a DOM node dojo.position
      • Layout – getting and setting the layout properties of a DOM node:
          • dojo.marginBox , dojo.contentBox
  • 8. Enhancements to core JavaScript
    • Handling arrays
      • dojo.forEach, dojo.some, dojo.every, dojo.filter, dojo.indexOf
    • Extending strings
      • dojo.trim, dojo.replace
    • General utilities
      • Type checking
        • dojo.isString, dojo.isArray, dojo.isFunction, dojo.isObject
      • Ensuring that a function would run in a specific context
          • dojo.hitch
      • Cloning of nodes
          • dojo.clone
  • 9.  
  • 10. Name spaces
    • A name space is an “region” in the product/ project
    • Dojo allows developers to define a name space and use it
    • Uses dot notation fo a sub-foldering
      • Just like Java packages
    • Create Name space:
      • Dojo.registerModulePath(“MySoftware”, “../../mySoftware”)
      • The path is either:
        • relative to the dojo installation location
        • A URL
  • 11. Name spaces – using a name space
    • Create a resource:
      • dojo.provide(“MySotware.MyClass”)
      • This call receives a a parameter a full description of the resource
        • The name of the namespace
        • The relative path to the resource
        • The name of the resource
      • Each file in the name space must have one dojo.provide call at its top
        • No more, no less
    • Use a resource:
      • dojo.require(“MySoftware.MyClass”)
      • This call receives as a parameter a full description of a resource
  • 12. Communication
    • The three layers of communication in a web application:
      • Within the client side
      • From the client to its server
      • From the client to another server
  • 13. Client side communication: point to point
    • Each method invocation of each object can be listened by another object
          • dojo.connect(srcObject, srcMethod, targetObject, targetMethod)
      • After the srcMethod is executed within the srcObject, targetMethod is invoked within targetObject
        • And receives the same arguments as srcMethod received
      • This is a point to point communication – someone connects the source directly to the target
      • Note that any method can be connected to
        • Based on the dynamic nature of Javascript
  • 14. Client side communication: publish/subscribe
    • Topic – object can broadcast a topic
      • alongside an info object
          • dojo.publish(“theTopicName”,infoObject)
      • Other objects can register to this topic and execute a function when the topic gets fired
        • This function receives the info object as a parameter
      • dojo.subscribe(“theTopicName”, aFunction)
      • This is a publish / subscribe communication
        • The sender and receiver are hooked up to a dojo service and not one to the other
  • 15. Client - server communication
    • Contact your server
          • dojo.{xhrGet, xhrPut, xhrPost, xhrDelete}(argumentsObject)
      • The arguments object is built of
        • The url
        • How to parse the content that was returned by the response (text, json …)
        • What to do when the call succeeds
        • What to do when the call don’t succeeds
    • Contact any server – not limited to the original domain :
      • dojo.io.iframe : allows for background form submission, file uploads
      • dojo.io.script: allows script fetching and executing
  • 16. Objects – OO and manipulation
    • Simulating class declaration using dojo.declare
      • You need to provide:
        • The class name,
        • Its superclasses (multiple inheritance)
        • Its methods and members
    • Simulating superclass injection using dojo.delegate
      • Getting methods and members that don’t exist in one object from another object
    • Merging two object to become one using dojo.mixin
  • 17. A few more goodies
    • Internationalization – using a resource bundle based on the locale
    • Localization – adapting the presentation of time, date, number and currency to the locale
    • Drag and drop
    • Animation
    • Browser history management
    • Cookies manipulation
  • 18. Dijit
  • 19. What is dijit
    • The dojo component that is responsible for handling widgets
    • Fully accessible
    • Fully localized
    • Provides a rich set of widgets
      • General usage widgets
      • Layout widgets
      • Form widgets
    • Provides several themes and allows developers to provide themes of their own
    • Provides mechanisms for developers to develop new widgets using dojo’s OO approach for modules
      • By extending existing widgets
      • By creating brand new widgets
  • 20. What is a widget
    • A widget is an object, that contains not just logic, but also a way to be presented on the screen
      • The way a widget is presented is the widget’s template
    • Widget can contain other widgets
  • 21. Using widgets
    • Declarative - using widgets in the markup
    • <button dojoType =“dijit.form.Button”></button>
    • <div dojoType =“dijit.form.Button”></div>
    • Programmatic creation:
      • var theButton = new dijit.form.Button();
      • someNode.appendChild(theButton. domNode );
  • 22. General widgets
    • General purpose widgets that are used to make a web page more “application-like”
    • Menu
    • Dialogs
    • Inline editing
    • Toolbar
    • ProgressBar
    • Tree – that can be connected to data source
    • Rich text editor – with plugins architecture to configure the editor’s functions
    There are many more general widgets in dojoX
  • 23. Layout widgets
    • A layout widget is a widget that contains other widgets and defines how they will be placed on the screen
      • Usually contains a set of panes and responsible to lay them around
    • BorderContainer: splits the screen with border between the different areas
    • StackContainer, TabContainer, AccordionContainer
      • Show only one at any given time, the type of the container defines how to toggle between the panes
    There are many more layout widgets in dojoX
  • 24. Form widgets
    • Form widgets are widgets that are used to get input from users, usually as part of a web form
    • Text base input
      • Several predefined types – number, currency, general text, multi line
      • User can define constraints (e.g., required)
      • User can provide validating regular expression (e.g., for URLs)
      • Range based validation for numeric input
    • Time and date – using calendar and time selector
    • Selection
      • DropDownButton
      • ComboButton
      • RadioButton
      • CheckboxButton
    There are many more form widgets in dojoX
  • 25. What makes a widget
    • A widget is composed of two resources
      • A .js file that contains the logic of the widget
      • An html snippet that contains the way the widget is presented
        • This resource is called the widget’s template
        • The html code itself can be in another file or inlined in the .js file
    This allows later on to perform runtime optimizations, by placing the template in a separate file during development time, and inline it as part of the build process
  • 26. What makes a widget – cont.
    • Dojo allows the template and the widget’s object to interact
      • By defining nodes in the template as members of the widget’s object
          • <div dojoAttachPoint =“myDiv”>
      • By connecting events of nodes in the template to methods in the widget’s object
          • <div dojoAttachEvent=“onmouseover:handleMouseOverMyDiv” >
      • Predefined variables
        • The template’s root DOM element is a member of the widget’s object - domNode
        • The place in the widget’s DOM tree where other elements may be automatically added - containerNode
  • 27. <div> <table> <tbody> <tr> <td dojoAttachPoint=“v1”>….</td> <td dojoAttachEvent=“onclick:a”></td> </tr> <tbody> </table> </div> dojo.provide(“wid.My”); dojo.require(“dijit._Widget”); dojo.require(“dijit._Templated”); dojo.declare(“wid.My”, dijit._Widget,dijit._Templated, { templatePath:dojo.moduleUrl(“wid”,”my.html”); a: function(b){ … this.v1… doSomething… } });
    • The widget’s object knows about:
      • Specific nodes in the template (using the the dojoAttachPoint attribute)
      • Events fired from the template (using the dojoAttachEvent attribute)
  • 28. Widget’s lifecycle
    • Widgets have a predefined lifecycle – from creation to destruction
    • The developer can provide code that is executed based on that lifecycle
      • After they were just created ( constructor )
      • After they were connected to their inheritance chain ( postMixInProperties )
      • After their template was created ( postCreate )
      • After all of their internal content (mostly internal widgets) were created ( startup )
      • Before they are destroyed ( destroy )
  • 29. Themes
    • A theme is a general look to a page
    • Several themes are defined in dijit
    • It is possible for developers to provide themes of their own
  • 30. Themes - tundra
  • 31. Themes – Soria
  • 32. Themes - Nihilo
  • 33. dojoX
  • 34. What is dojoX
    • The experimental part of dojo
    • Many projects are included within it (~50)
      • Some of them may be removed on later releases
      • Not likely, though
    • Extending the core functionality
      • More widgets
      • More behaviors
  • 35. What is included in dojox
    • Many widgets – general, form and layout
    • Syntax highlighting
    • Many data stores
    • Grid
    • UUID
    • Xml handling
    • File uploading
    • Client side templating
    • Json handling
    • Editor plugins
  • 36. How to use dojo
    • Download it
      • http:// www.dojotoolkit.org /
    • Place it in your server
    • Add this line to your page:
          • <script type=&quot;text/javascript&quot; src=“ [relativePath] /dojo/dojo.js&quot;></script>
  • 37. More info
    • http:// www.dojotoolkit.org /
    • http:// dojocampus.org /
    • There are several books, but they become obsolete with any newer Dojo versions
  • 38. Questions?