Introduction To Dojo
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Introduction To Dojo






Total Views
Views on SlideShare
Embed Views



1 Embed 1 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Introduction To Dojo Presentation Transcript

  • 1. Introduction to Dojo Yoav Rubin, IBM Research – Haifa,
  • 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.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 –
      • 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 :
      • : allows for background form submission, file uploads
      • 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:// /
    • 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:// /
    • http:// /
    • There are several books, but they become obsolete with any newer Dojo versions
  • 38. Questions?