Your SlideShare is downloading. ×
0
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Dojo >= 1.7  Kickstart
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Dojo >= 1.7 Kickstart

2,037

Published on

This presentation targets the people who wants to learn the basics of Dojo (>= 1.7).

This presentation targets the people who wants to learn the basics of Dojo (>= 1.7).

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,037
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
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: Hazem Saleh
  • 2.          What is Dojo? Dojo Architecture dojo.js Getting Started with Dojo AMD DOM functions Event model Ajax References
  • 3.   Dojo is rich Java Web component framework that can be used for building interactive Web 2.0 applications. Dojo is an open source work.
  • 4.  Architecture:      Dojo base: The framework kernal (dojo.js) around 60 kb. It contains the Ajax, Classes System (dojo.declare), dojo.query, AMD ...etc. Dojo core: Utilities over the dojo base. It contains i18n, animation, integration with data sources (data stores), ...etc. Dijit: Dojo Widgets. Dojox: Dojo extension components (Includes Dojo mobile). Util: Some Dojo utilities that have no access from web pages (ShrinkSafe, DOH, ...etc)
  • 5.             Module Loader Lang Utils (Classes System) & Array Extras Cookie functions Query, Node & Style Utils I/O (Ajax) JSON serialization Fast CSS Style manipulation Events Color functions Browser detection URL functions Animation Utilities
  • 6.    Include the CSS styles that your Dojo application needs. Include the dojo.js file as follows: <script src="http://ajax.googleapis.com/ajax/libs/doj o/1.8.1/dojo/dojo.js" data-dojo-config="async: true"></script> Include the required modules.
  • 7.    Since Dojo 1.7, Dojo is complaint with the AMD (Asynchronous Module Definition) standard. Most of the Dojo modules are using AMD since Dojo 1.7. The benefits of AMD: Asynchronous.  Faster.  Standard.   Dojo AMD modules can work with other JavaScript libraries which supports AMD (theoretically).
  • 8. Dojo < 1.7 (synchronous): dojo.require("dojo.cookie"); dojo.require("my.widget"); dojo.addOnLoad(function(){ alert("DOM is ready"); })  Dojo >= 1.7 (AMD asynchronous): require(["dojo/cookie", "my/widget", "dojo/domReady!"], function(cookie, myWidget){ alert("DOM is ready"); }) 
  • 9. Dojo < 1.7 (Class Declaration): dojo.provide("my.widget"); dojo.require("dijit._Widget"); dojo.declare("my.widget", dijit._Widget, { // ... });  Dojo >= 1.7 (Class Declaration): define(["dojo/_base/declare", "dijit/_Widget"], function(declare, _Widget){ return declare(“my.widget”, [_Widget], { // ... }); }); 
  • 10.   AMD brings “convenient” modularity to Dojo. Let’s see how to:    Create AMD module class. Create AMD module object. Let’s create the following:   Doubler class that has one method calculate (divID, number). Factorial object that has one method calculate (divID, number).
  • 11.  Doubler class (Doubler.js under “custom” folder): define([ "dojo/dom", "dojo/_base/declare" ], function(dom, declare){ return declare("Doubler", null, { calculate: function(divID, number){ var node = dom.byId(divID); node.innerHTML = "Double value (" + number + "): " + (number * 2); } }); });
  • 12. factorial object (Factorial.js under “custom” folder):  define([ "dojo/dom" ], function(dom){ return { calculate: function(divID, number){ var node = dom.byId(divID); var factorial = 1; for (i = 1; i <= number; ++i) { factorial *= i; } node.innerHTML = "Factorial value (" + number + "): " + factorial; } }; });
  • 13.  In order to use the “custom” module in the page, you need to change Dojo config before Dojo script include as follows: <script> var dojoConfig = { async: true, packages: [{ name: "custom", location: location.href.replace(//[^/]*$/, '') + "/custom" }] }; </script>
  • 14. Use the module objects and classes peacefully: require([..., "custom/Factorial", "custom/Doubler", ...], function(..., factorial, Doubler, ...) { // ... factorial.calculate("result1", 6); new Doubler().calculate("result2", 6); // ... }); 
  • 15.  There are useful packages which are facilitating DOM processing: DOM retrieval: require(["dojo/dom", "dojo/domReady!"], function(dom) {  //Get DOM element by Id. var one = dom.byId("one"); });
  • 16. DOM Construction: require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"], function(dom, domConstruct) { var list = dom.byId("list"); domConstruct.create("li", { innerHTML: "Seven", className: "seven", style: { fontWeight: "bold" } }, list); });
  • 17.  DOM destruction:   domConstruct.destroy(item) destroys the item with all of its children. domConstruct.empty(“someElement”) destroys the children of the element without destroying the element itself.
  • 18. Simple Action: require(["dojo/on", "dojo/dom", "dojo/domReady!"], function(on, dom) { var myButton = dom.byId("myButton");  on (myButton, "click", function(evt){ alert("Iam clicked"); }); });
  • 19.  Publish/Subscribe model: require(["dojo/on", "dojo/topic", "dojo/dom", "dojo/domReady!"], function(on, topic, dom) { var alertButton = dom.byId("alertButton"); on(alertButton, "click", function() { // When this button is clicked, // publish to the "alertUser" topic topic.publish("alertUser", "I am alerting you."); }); // Register the alerting routine with the "alertUser" topic. topic.subscribe("alertUser", function(text){ alert(text); }); });
  • 20.  “dojo/_base/xhr” module wraps the complexity of Ajax request creation and response retrieval. Sample Ajax GET request: require(["dojo/_base/xhr", "dojo/dom", "dojo/domReady!"], function(xhr, dom) { // Using xhr.get, as very little information is being sent xhr.get({ // The URL of the request url: "get-content.php", // The success callback with result from server load: function(newContent) { dom.byId("contentNode").innerHTML = newContent; }, // The error handler error: function() { // Do nothing -- keep old content there } }); });
  • 21.  Sample Ajax POST request: var messageNode = dom.byId("messageNode"); // Using xhr.post, as the amount of data sent could be large xhr.post({ url: "submission.php", form: dom.byId("contactForm"), load: function(response) { messageNode.innerHTML = "Thank you for contacting us!"; }, error: function() { messageNode.innerHTML = "Your message could not be sent, please try again." } });
  • 22. If you work with Dojo >= 1.8, use “dojo/request” module instead.  require(["dojo/dom", "dojo/on", "dojo/request", "dojo/domReady!"], function(dom, on, request){ var resultDiv = dom.byId("resultDiv"); request.get("/someServlet").then( function(response){ // Display the text file content resultDiv.innerHTML = "<pre>"+response+"</pre>"; }, function(error){ // Display the error returned resultDiv.innerHTML = "<div class="error">"+error+"<div>"; } ); } );
  • 23.  Dojo toolkit documentation: http://dojotoolkit.org/documentation/
  • 24.    Twitter: http://www.twitter.com/hazems Blog: http://www.technicaladvices.com Email: hazems@apache.org

×