dojo toolkit n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Dojo toolkit PowerPoint Presentation
Download Presentation
Dojo toolkit

Loading in 2 Seconds...

play fullscreen
1 / 19

Dojo toolkit - PowerPoint PPT Presentation


  • 159 Views
  • Uploaded on

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>

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Dojo toolkit' - temple


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
first program
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>

dojo ready
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>

dojo ready contd
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>

dojo modules fx
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();

});

dojo dom fx
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>

modifying dojo
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");

});

creating items in list
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");

});

placements in list
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);

}

removing items from list
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");

}

dojo and ajax
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!
how it works
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.

customizing ajax request
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
customizing ajax request1
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.
call back fx
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.
example
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

    }

});

slide17

<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;

},

}

});

}

slide18

// 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>

checking user s name availability
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.";

        }

    }

});