• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction To Dojo

Introduction To Dojo






Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.slideshare.net 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 Introduction To Dojo Presentation Transcript

    • Introduction to Dojo Yoav Rubin, IBM Research – Haifa, yoav@il.ibm.com
    • 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
    • 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
    • Dojo core
      • “ In theory there is no difference between theory and practice. In practice there is”
      • Yogi Berra
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Dijit
    • 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
    • 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
    • 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 );
    • 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
    • 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
    • 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
    • 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
    • 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
    • <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)
    • 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 )
    • 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
    • Themes - tundra
    • Themes – Soria
    • Themes - Nihilo
    • dojoX
    • 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
    • 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
    • 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>
    • More info
      • http:// www.dojotoolkit.org /
      • http:// dojocampus.org /
      • There are several books, but they become obsolete with any newer Dojo versions
    • Questions?