Introduction To Dojo


Published on

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction To Dojo

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