1 / 19

Dojo toolkit

Dojo toolkit. First program. <html> <head>     <meta charset="utf-8">     <title>Tutorial: Hello Dojo!</title>     <!-- load Dojo -->     <script src =" http://ajax.googleapis.com/ ajax /libs/dojo/1.6.0/dojo/dojo.xd.js "></script> </head> <body>     <h1 id="greeting">Hello</h1> </body>

temple
Download Presentation

Dojo toolkit

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Dojo toolkit

  2. First program <html> <head>     <meta charset="utf-8">     <title>Tutorial: Hello Dojo!</title>     <!-- load Dojo -->     <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script> </head> <body>     <h1 id="greeting">Hello</h1> </body> </html>

  3. Dojo.ready <html> <head>     <meta charset="utf-8">     <title>Tutorial: Hello Dojo!</title>     <!-- load Dojo -->     <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>     <script> dojo.ready(function(){             alert("Dojo version " + dojo.version + " is loaded");         });     </script> </head> <body>     <h1 id="greeting">Hello</h1> </body> </html>

  4. Dojo.ready (contd) <html> <head>     <meta charset="utf-8">     <title>Tutorial: Hello Dojo!</title>     <!-- load Dojo -->     <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>     <script> dojo.ready(function(){ dojo.byId("greeting").innerHTML += ", from " + dojo.version;         });     </script> </head> <body>     <h1 id="greeting">Hello</h1> </body> </html>

  5. Dojo modules / fx // New: Require in the dojo.fx module dojo.require("dojo.fx"); // Remember, dojo.ready waits for both the DOM and all dependencies dojo.ready(function(){     // The piece we had before - change our innerHTML dojo.byId("greeting").innerHTML += ", from " + dojo.version;     // Now, slide the greeting dojo.fx.slideTo({         top: 100,         left: 200,         node: dojo.byId("greeting")     }).play(); });

  6. Dojo DOM fx <html>     <head>         <meta charset="utf-8">         <title>Demo: DOM Functions</title>         <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>         <script> dojo.ready(function(){          // "ready" entry point             });         </script>     </head>     <body>         <ul id="list">             <li id="one">One</li>             <li id="two">Two</li>             <li id="three">Three</li>             <li id="four">Four</li>             <li id="five">Five</li>         </ul>     </body> </html>

  7. Modifying dojo function setText(node, text){     node = dojo.byId(node); node.innerHTML = text; } dojo.ready(function(){ var one = dojo.byId("one"); setText(one, "One has been set"); setText("two", "Two has been set as well"); });

  8. Creating items in list dojo.ready(function(){ var list = dojo.byId("list"),         three = dojo.byId("three"); dojo.create("li", { innerHTML: "Six"     }, list); dojo.create("li", { innerHTML: "Seven", className: "seven",         style: { fontWeight: "bold"         }     }, list); dojo.create("li", { innerHTML: "Three and a half"     }, three, "after"); });

  9. Placements in list • <button onclick="moveFirst();">The first item</button> • <button onclick="moveBeforeTwo();">Before Two</button> • <button onclick="moveAfterFour();">After Four</button> • <button onclick="moveLast();">The last item</button> function moveFirst(){ var list = dojo.byId("list"),         three = dojo.byId("three"); dojo.place(three, list, "first"); } function moveBeforeTwo(){ var two = dojo.byId("two"),         three = dojo.byId("three"); dojo.place(three, two, "before"); } function moveAfterFour(){ var four = dojo.byId("four"),         three = dojo.byId("three"); dojo.place(three, four, "after"); } function moveLast(){ var list = dojo.byId("list"),         three = dojo.byId("three"); dojo.place(three, list); }

  10. Removing items from list • <button onclick="destroyFirst();">Destroy the first list item</button> • <button onclick="destroyAll();">Destroy all list items</button> function destroyFirst(){ var list = dojo.byId("list"),         items = list.getElementsByTagName("li");     if(items.length){ dojo.destroy(items[0]);     } } function destroyAll(){ dojo.empty("list"); }

  11. Dojo and Ajax • Since Ajax is used throughout the numerous classes and widgets found in Dojo, Dijit, and DojoX, Ajax capabilities are baked right into the base dojo object via dojo.xhrGet and dojo.xhrPost methods. • That means that there are no extra dojo.require statements needed to use Ajax — simply including Dojo within the page enables quick Ajax coding!

  12. How it works? // The "xhrGet" method executing an HTTP GET dojo.xhrGet({     // The URL to request     url: "get-message.php",     // The method that handles the request's successful result     // Handle the response any way you'd like!     load: function(result) {         alert("The message is: " + result);     } }); The code above executes an Ajax request to get-message.php, which returns a plain text message and alerts it to the user via the load function we specified. What if there's an error though? Or the response is XML or JSON? What if there's form data we want to send to the server? No problem —dojo.xhrGet and dojo.xhrPost allow for complete request customization.

  13. Customizing ajax request • Web developers need flexibility in Ajax requests to accomplish different tasks. Reasons for using Ajax calls include, but are not limited to: • Loading static data from the server • Accessing XML or JSON data from a web service • Sending form data to the server • Refreshing content on a page

  14. Customizing ajax request • Customization of the request takes place in each method's single argument: an object containing request properties and desired values. Let's review the most-used request options available: • url - The URL to make the request to. • handleAs - A string representing the form of data we expect returned. Possible formats include: "text" (the default), "json", "javascript" (fragments to load and execute), and "xml". • timeout - Time in milliseconds before considering the request a failure. The error handler is triggered. • content - A key-value object containing data to provide to the server. Depending on use ofxhrGet or xhrPost, this data will either be translated to the query string or set as the post body. • form - A utility option which populates the content option from keys and values in a form. If you don't specify a URL, and are using this option, it will try to use the URL as specified in the form's "action" property. Also, if you specify any content, it will override anything in the form, so typically you'll use either content or form, but not both.

  15. Call back fx • The options above manage how the request is sent, but what about the response? The answer to that lies in three handler functions, often referred to as callback functions or just callbacks, which are also provided to the request object: • load(response, ioArgs) - The callback that fires when the request successfully completes. The first argument of load is the result of the request in the format designated by the handleAs option. • error(errorMessage) - The callback that fires when the request fails. The first argument is the error message, if available. • handle(response, ioArgs) - The callback that fires regardless of request success or failure.

  16. example dojo.xhrGet({     // The URL of the request     url: "get-content.php",     // The success callback with result from server     load: function(newContent) { dojo.byId("contentNode").innerHTML = newContent;     },     // The error handler     error: function() {         // Do nothing -- keep old content there     } });

  17. <html > <head> <title>Demo: Refresh a Node's Content</title> <!-- load dojo and provide config via data attribute --> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true,parseOnLoad: true"> </script> <script> // Function that refreshes the SPAN node function refreshContent() { // Using dojo.xhrGet, as very little information is being sent dojo.xhrGet({ // The URL of the request url: "get-content.php", // The success callback with result from server load: function(newContent) { dojo.byId("contentNode").innerHTML = newContent; }, } }); }

  18. // When the DOM is ready.... dojo.ready(function(){ // Populate content initially refreshContent(); // Connect button dojo.connect(dojo.byId("refreshButton"),"onclick",refreshContent); }); </script> </head> <body> <h1>Demo: Refresh a Node's Content</h1> <p>Click the button below to refresh the content.</p> <button id="refreshButton">Refresh Content</button> <br /><br /> <p id="contentNode"></p> </body> </html>

  19. Checking user’s name availability // Local var representing the node to be updated varavailabilityNode = dojo.byId("availabilityNode"); // Using dojo.xhrGet, as very little information is being sent dojo.xhrGet({     // The URL of the request     url: "check-username.php",     // Allow only 2 seconds for username check     timeout: 2000,     // Send the username to check base on an INPUT node's value     content: {         username: dojo.byId("usernameInput").value.toLowerCase()     },     // The success callback with result from server     load: function(result) {         if(result == "available") { availabilityNode.innerHTML = "Username available!";         }         else { availabilityNode.innerHTML = "Username taken!  Please try another.";         }     } });

More Related