0% found this document useful (0 votes)
190 views

The Dojo Javascript Toolkit Ajax Support: System Consultant

The document discusses the Dojo JavaScript toolkit and its support for Ajax. It provides an overview of Dojo's core utilities for DOM manipulation, event handling and Ajax support. It also describes Dojo's more extensive widget library called Dijit and additional graphics libraries called DojoX. The document includes examples of making Ajax requests using dojo.xhrGet and manipulating DOM elements using dojo.query, as well as comparing Dojo's Ajax support to other libraries like jQuery.

Uploaded by

Harsh Chhabra
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
190 views

The Dojo Javascript Toolkit Ajax Support: System Consultant

The document discusses the Dojo JavaScript toolkit and its support for Ajax. It provides an overview of Dojo's core utilities for DOM manipulation, event handling and Ajax support. It also describes Dojo's more extensive widget library called Dijit and additional graphics libraries called DojoX. The document includes examples of making Ajax requests using dojo.xhrGet and manipulating DOM elements using dojo.query, as well as comparing Dojo's Ajax support to other libraries like jQuery.

Uploaded by

Harsh Chhabra
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 56

The Dojo JavaScript Toolkit

Ajax Support

System Consultant
Topics in This Section

Overview of Dojo
Installation and documentation

Quick summary of dojo.query and selectors

The dojo.xhrGet function and variants


Basics
OptionsO ti
Sending data
5
Inserting HTML
Handling JSON data
• Comparing Ajax support to other libraries

– Prototype, jQuery, Ext-JS


Overview of Dojo

• Core
Utilities for Ajax, CSS querying, DOM manipulation,
cross-browser event handling, and general JavaScript
programming
7 Very similar to jQuery

• Dijit

Large set of rich GUI components


Much more extensive than jQuery UI

• DojoX
Charts, graphs, vector graphics, fancy widgets
Similar to the jQuery Plugins

8
Core Utilities

• dojo.query("css selector")
– Returns a NodeList of matching DOM elements.
• Almost identical to $("css selector") in jQuery.

• dojo.xhrGet({options})
– Makes an Ajax GET request. Also dojo.xhrPost, etc.
• Moderately similar to $.ajax({options}) in jQuery

– Example
• dojo.xhrGet({ url: "address", load: responseHandler });

• dojo.addOnLoad(function)
– Calls function after DOM loaded.
• Almost identical to $(function) jQuery

• dojo.require("dojo.libraryName")
– Loads Dojo libraries on the fly
Downloading and Installation

• Download
– http://download.dojotoolkit.org/
– Choose “Download latest Stable Release”, then
dojo release x.y.z.zip dojo release x.y.z.tar.gzdojo-release-x.y.z.zip or
dojo-release-x.y.z.tar.gz

• Installation

– Unzip release file, creating 3 subfolders: dojo, dijit, dojox

9 • Folders are quite large, but core file (dojo.js) is small.


• Other files are loaded on-the-fly based on dojo.require
statements.

– Copy 3 folders to WebContent/scripts of Eclipse project

– http://dojotoolkit.org/docs

• Online documentation
Browser Compatibility

• Firefox

• Internet Explorer
– 6.0 or later (same as jQuery)
• Safari
– 3.1 or later (vs. 3.0 for jQuery)
• Opera

• Chrome
– 1.0 or later
– Core: 1.5 or later (vs 2.0 for jQuery)
– Dijit: 2.0 or later (same as jQuery)
– Core: 9.6 or later (vs. 9.0 for jQuery)
– Dijit: not supported!
dojo.query & Selectors

11

Basics
Selecting DOM Elements
• Idea
– Use dojo.query("css selector") to get a set of DOM elements

• Then, perform operations on each (see next page)

• Examples

– dojo.query("#some-id")
• Return 1-element set (or empty set) of element with id
• Simplest use and most common for Ajax (note the “#”!)
• Can also use dojo.byId("some-id") to get single element

13 – dojo.query(".blah")
• Return all elements that have class="blah"

• Return all p elements

– dojo.query("p")

– dojo.query("li b span.blah")

• Return all <span class="blah"> elements that are inside b


elements, that in turn are inside li elements
Manipulating DOM Elements

• Common functions on matched elements

– dojo.query("selector").forEach(function)
• Calls function on each element. “this” set to element.

– dojo.query("selector").addClass("name")
• Adds CSS class name to each. Also removeClass toggleClass

– dojo.query("selector").wipeOut().play()
• Makes invisible. Also wipeIn, fadeOut, fadeIn, etc.

– dojo.query("selector").onclick(function)
• Adds onclick handler. Also onchange, onmouseover, etc.

– dojo.query("selector").html("<tag>some html</tag>") 14

• Sets the innerHTML of each element.


– Must use dojo.require("dojo.NodeList-html");

– dojo.byId("some-id").value
• Returns value of input element. Notice no “#”.#.

• Chaining

– dojo.query("a").onclick(f1).addClass("name").forEach(f2)
Example: Randomizing
Background Colors (JavaScript)

dojo.require("dojo.NodeList-fx");

Like smart Loads extra JavaScript on the fly.


window.onload.
Explained in next
section.ti
The main two needed for basics apps are
dojo.NodeList-fx and dojo.NodeList-html. The
online docs tell you if a certain function
15 necessitates a “dojo require” statement“dojo.require”
statement.

dojo.addOnLoad(function() {
dojo.query("#button1").onclick(randomizeHeadings);
dojo.query("#button2").onclick(revertHeadings);
});

Sets onclick handlers

16
Example: Randomizing Colors
(JavaScript Continued)

function randomizeHeadings() {
dojo.query("h3").forEach(setRandomStyle);
dojo.query("h3.green").wipeOut().play();
Slowly hide every h3 that has CSS style “green”.

}
Note difference from jQuery approach: wipeOut
returns an Animation, which you then call play on.

function setRandomStyle(heading) {
dojo.query(heading).addClass(randomStyle());
}

Add “red”, “yellow” or “green” CSS names to each


Example: Randomizing Colors
(JavaScript Continued)

function randomStyle() {
var styles = ["red", "yellow", "green"];
return(randomElement(styles));
}

function randomElement(array) {
var index = Math.floor(Math.random()*array.length);
return(array[index]);
}
17

function revertHeadings() {
dojo.query("h3.green").wipeIn().play();
dojo.query("h3").removeClass("red")
.removeClass("yellow")
.removeClass("green");
}

Example: Randomizing Colors


(Style Sheet)
.red { background-color: red }
.yellow { background-color: yellow }
.green { background-color: green }

18
Example: Randomizing Colors
(HTML)


<head><title>Dojo Basics</title>
<link rel="stylesheet"
href="./css/styles.css"
type="text/css"/>
<script src="./scripts/dojo/dojo.js"
type="text/javascript"></script>
<script src="./scripts/dojo-basics.js"
type="text/javascript"></script>
</head>

20
Example: Randomizing Colors

(HTML Continued)
<h3>Foo, bar,<h3>Foo bar baz</h3>
<h3>Blah, blah, blah</h3>
<h3>Yadda, yadda, yadda</h3>
<h3>Foo, bar,<h3>Foo bar baz</h3>
<h3>Blah, blah, blah</h3>
<h3>Yadda, yadda, yadda</h3>
<h3>Foo, b<h3>Fbar, b </h3>baz</h3> The ids to which onclick
handlers were attached.
<h3>Blah, blah, blah</h3>
<h3>Yadda, yadda, yadda</h3>
<form action="#">#
<input type="button" id="button1"
21
value="Randomize Headings"/>
<input type="button" id="button2"
value="Revert Headings"/>
</form> …

Example: Randomizing Colors


(Results) After “Randomize Headings”. Some headings turned
green, then gradually disappeared.

When page originally loaded, or after “Revert Headings”


22
Understanding Operations on
Sets of Elements

• Instead of this
function randomizeHeadings() {
dojo.query("h3").forEach(setRandomStyle);
dojo.query("h3.green").wipeOut().play();
}
function setRandomStyle(heading) {
23 dojo.query(heading).addClass(randomStyle());
}

• Why can’t I simply do this?

function randomizeHeadings() {
dojo.query("h3").addClass(randomStyle());
dojo.query("h3.green").wipeOut().play();
}
dojo.xhrGet: Basic Syntax

• dojo.xhrGet(optionsObject)

– Minimal form: dojo.xhrGet({url: "address", load: funct});

• Also dojo.xhrPost, dojo.xhrPut, dojo.xhrDelete, etc.

25
– Handler function gets response text. Response text is
considered a string unless you use handleAs option.

•Options for dojo.xhrGet({…})

• url, load

– Almost-always used

– Other common options

• content, error, preventCache, handleAs

26
Data-Centric Ajax with and
without Toolkits

• With basic JavaScript


function getRequestObject() {
if (window.XMLHttpRequest) {
return(new XMLHttpRequest());
} else if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else { return(null); }
}
function sendRequest() {
var request = getRequestObject();
request.onreadystatechange =
function() { someFunct(request); };
request.open("GET", "some-url", true);
request.send(null);
}
Data-Centric Ajax with and
without Toolkits

• jQuery (handler passed response text)

$.ajax({url: "address",
success: handlerFunct});

• Prototype (handler passed response object)


27

new Ajax.Request("address",
{onSuccess: handlerFunct});

• Ext (handler passed response object)

Ext.Ajax.request({url: "address",
success: handlerFunct});

• Dojo (handler passed response text)


dojo.xhrGet({url: "address","
load: handlerFunct});
dojo.xhrGet Example Code:
JavaScript

function showTime1() {
The preventCache option is not required, but is a
dojo.xhrGet({ convenient option when the same URL (including query
data) yields different responses. This way, you don’t
url: "show-time.jsp", have to send Cache-Control and Pragma headers from
server.
load: showAlert,
preventCache: true
});
}
This is the response text, but you can declare a
second argument (ioArgs) if you want the response
object (XmlHttpRequest) and other information. Also
note that the latest Firefox does not let you pass
function showAlert(text) { native functions here, so you cannot use alert instead, y
of showAlert for the success parameter.
alert(text);
}

28
dojo.xhrGet Example Code:
HTML


<head><title>Dojo and Ajax</title>Ajax</title>...
<script src="./scripts/dojo/dojo.js"
type="text/javascript"></script>
<script src="./scripts/dojo-ajax.js"src=" /scripts/dojo ajax
js"
type="text/javascript"></script>
</head>
29 <body>...
<fieldset>
<legend>dojo.xhrGet: Basics (Using explicit
onclick handler in HTML)</legend>) /
<form action="#">
<input type="button" value="Show Time"
onclick="showTime1()"/>
</form>
</fieldset>…

dojo.xhrGet Example Code: JSP

It is now <%= new java.util.Date() %>

30
dojo.xhrGet : Results
Registering Event Handlers in
JavaScript

• Basic approach
– Previous example set the onclick handler in the HTML.
Although this is common with other Ajax libraries, Dojo
(and jQuery) advocate setting it in the JavaScript instead

• Often referred to as “unobtrusive JavaScript”: no explicit


JavaScript anywhere in the HTML page

• Function runs after the DOM is loaded, but does not wait,
for images, as with window.onload
• Use this approach to set up all event handlers

– dojo.query("#some-id").onclick(someHandler);
• Assigns onclick handler. Handler is passed a DOMEvent

with characteristics that are unified across browsers

• Dojo support
– dojo.addOnLoad(function() {…});
Redoing Time Alert: JavaScript
dojo.addOnLoad(function() {
dojo.query("#time-button-1").onclick(showTime1);
});

function showTime1() {
dojo.xhrGet({
url: "show-time.jsp",
33 load: showAlert, These two functions
are unchanged from
preventCache: true previous example.

});
}

function showAlert(text) {
alert(text);
}

34
Redoing Time Alert: HTML

<fieldset>
<legend>dojo.xhrGet: Basics (Registering onclick handler
in JavaScript)</legend>
<form action="#">
<input type="button" value="Show Time"
id="time-button-1"/>
</form></f>
</fieldset>
Redoing Time Alert: Results

Works exactly the same as previous exampleexample.

35

dojo.xhrGet
Sending Data
Ajax Functions

• dojo.xhrGet({options})

– Make a GET request

• dojo.xhrPost({options})
37
– Makes a POST request

• dojo.xhr("method", {options}, hasBody)

– Lets you send arbitrary HTTP commands

• dojo.xhrPut, dojo.xhrDelete

– Make a PUT or DELETE request


– Unsupported on many servers

• dojo.rawXhrPost, dojo.rawXhrPut

– Sends a POST or PUT request, but lets you provide the


raw data for the body of the request
38
Overview

• dojo.xhrGet({ url: …, load: …, content: …});

– Content value is an object: query string gets built out of


property names and URL-encoded property values
• On end of URL for ajax.xhrGet;
in POST body for dojo.xhrPost
• See later example for building the string automatically
using the “form” option
• Works identically to “parameters” option in Prototype or
“data” option in jQuery

• Examples
– dojo.xhrGet({… content: { param1: "foo bar!“,
param2: "baz"}});
Content Example: JavaScript

dojo.addOnLoad(function() {
dojo.query("#params-button-1").onclick(showParams1);

});

function showAlert(text) {
alert(text);
39 } Same function used in earlier examples.

function showParams1() {
dojo.xhrGet({
url: "show-params.jsp",
content: { param1: "foo",
param2: "bar" },
load: showAlert
});
} The preventCache option is not used since the same
data always results in the same response.

40
Content Example: HTML


<fieldset>
<legend>dojo.xhrGet: The 'content' Option</legend>
<form action="#">
<input type="button" value="Show Params"
id="params-button-1"/>
</form>
</fieldset>

param1 is ${param.param1},
param2 is ${param param2}

41

Content Example: Results

42
Content Example: JSP
Overview

• Options (almost) always used: url, load

– dojo.xhrGet({url: "some-address", load: someFunc});

• load is not strictly required; you might want to just fire off
some data to the server and not display any thing
• Options apply equally to dojo.xhrPost and others

• Common options: example


dojo.xhrGet({
url: "address",
load: successHandlerFunction,,
content: { param1: "foo bar", param2: "baz"},
error: errorHandlerFunction,
preventCache: true,
handleAs: "json" });
Options
Name Description Default

content Data tD t to send t server, in the form on an object with param namesd toi th fbj t ith EmptyE t
and raw (non-escaped) param values. The object property names
become request param names and property values get URL-
encoded and become request param values. & and = inserted
automatically. Sent in the appropriate place depending ontti ll S t i thi t lddi
whether it is GET or POST.

error Function to be called if request fails due to server error, expired


timeout, or exception thrown from main response handler.
None
45
Function gets passed 2 args: the data returned from the server
(formatted according to the handleAs property), and an ioArgs
object. The ioArgs object has many properties, but most useful
are args, query, url, and xhr.

form Id of a form whose fields will be serialized to form the query


data.
None

Function to be called whether or not request was successful. None


handle
More common t use separate load and error properties.Mtot l d dti

The format in which to pass the response to the handler function. "text"
handleAs
Legal values are text, json, xml, json-comment-optional, json-
comment-filtered, and javascript.

46
Options (Continued)

headers ExtraE t HTTP request headers to be sent to the server.th d t bt t th NoneN

Function to be called if request succeeds. Function gets passed 2 None


load args: the data returned from the server (formatted according to
the handleAs property), and an ioArgs object. The ioArgs objectp p y),gjgj
has many properties, but most useful are args, query, url, and xhr.
preventCache Is browser prohibited from caching the page? Set to true if you
false
sync use GET and you could get different responses back from the
same data If true then the URL is appended with adata. true,
dojo.preventCache parameter with a timestamp that changes with
each request.

timeout Should the request be synchronous? Use synchronous requests false


Name with caution sinceDescription
they lock up the browser. Default

url Timeout in milliseconds. If request takes longer, the error handler Infinity
will be called instead of the load handler.

None
The address to req est Sho ld be a relati e URLrequest. Shouldrelative
URL.
Inserting Results into HTML:
The “html” Function

Content-Centric Ajax with and


without Toolkits
• jQuery
function ajaxResult(address, resultRegion) {
$(resultRegion).load(address);
}

• Prototype
function ajaxResult(address, resultRegion) {
new Ajax.Updater(resultRegion, address);
}

• Dojo
– N explicit support for content-centric Ajax. Response
handler uses “html” to do the insert.

• Ext-JS
function ajaxResult(address, resultRegion) {
Ext.get(resultRegion).load({ url: address});
}

48
Reading Textfield Values

1. Use dojo.byId("some-id").value
– Note that there is no # before the ID, since you are not
doing a CSS match, but rather using a shortcut for
document.getElementById
– Also note that Dojo has no way of looking up values
directly from a NodeList resulting from a Dojo query.
I.e., nothing equivalent to jQuery’s $("#some-id").val().

2. Supply values to “content” property

– No need to escape values first


• dojo.xhrGet({… content: { param1:
dojo.byId("id1").value });

• Shortcut
– See upcoming section on “form” property
49

50
Ajax with HTML Insertion:
JavaScript (Setup)

dojo.require("dojo.NodeList-html");

dojo.addOnLoad(function() {
dojo.query("#params-button-2")
.onclick(showParams2);

});
Ajax with HTML Insertion:
JavaScript (Main Code)

function showParams2() {

dojo.xhrGet({
url: "show-params.jsp",
content: { param1: dojo.byId("field1").value,
param2: dojo byId("field2") value},
load: function(text) {
insertText(text, "#result1");
51 }
});
}

function insertText(text, selector) {


dojo.query(selector).html(text);
}

52
HTML Insertion: HTML Page


<fieldset>
<legend>dojo.xhrGet: HTML Insertion</legend>
<form action="#">
param1:
<input type="text" id="field1"/>
<br/>
param2:
<input type="text" id="field2"/>
<br/>
<input type="button" value="Show Params"
id="params-button-2"/>
<h2 id="result1"></h2>
</form>/
</fieldset>

HTML Insertion: JSP
param1 is ${param.param1},
param2 is ${param param2}.

53

HTML Insertion: Results

54
HTML Insertion: Comparing
Prototype, jQuery and Dojo

• Prototype
function ajaxResult(address, resultRegion) {
new Ajax.Updater(resultRegion, address); }

• jQuery
55
function ajaxResult(address, resultRegion) {
$(resultRegion).load(address); }

• Dojo (also need dojo.require))

function ajaxResult(address, resultRegion)


dojo.xhrGet({ url: address,
load: function(text) {
insertText(text, resultRegion);
} }); }
function insertText(text, selector) {
dojo.query(selector).html(text); }
Building Parameter Strings
Automatically with “form”

Using “form” Option


• Idea
– You specify a form, and Dojo automatically builds query
string from all appropriate input elements.
– The element names (not ids) become the param names
• Syntax
– dojo.xhrGet({ url: …, load: …, form: "some-id" });

• Note: no # before the id

• Advantages

– One simple option, no matter how many input elements


– Only takes values of active elements (e.g., unchecked
radio buttons or checkboxes are ignored)
– Giving names to input elements is familiar to HTML
developers
“form” Example: JavaScript

dojo.require("dojo.NodeList-html");

dojo.addOnLoad(function() {
dojo.query("#params-button-3")
.onclick(showParams3);
57});

function showParams3() {
dojo.xhrGet({
url: "show-params.jsp",
form: "form1",
load: function(text) {
insertText(text,”#result2");
}
});
} …

58
“form” Example: HTML

<fieldset>
<legend>dojo.xhrGet: Simplifying Params
with 'form'</legend>
<form action="#" id="form1">
param1:
59
<input type="text" name="param1"/>
<br/>
param2:
<input type="text" name="param2"/>
<br/>
<input type="button" value="Show Params"
id="params-button-3"/>
<h2 id="result2"></h2>
</form>
</fieldset> …

“form” Example: JSP


param1 is ${param.param1},
param2 is ${param param2}.

60
“form” Example: Results

61

Handling JSON Data


Approach

• Server

– Returns JSON object with no extra parens. E.g.:


• { cto: "Resig ", ceo: "Gates ", coo: "Ellison" }

• Code that calls dojo xhrGetdojo.xhrGet


63

– Specifies “json” for handleAs. E.g.:

• dojo.xhrGet({url: address, load: handler, handleAs: "json"});j({j})

• Response handler

– Receives JavaScript data as first argument. No need for


parsing or “eval”. Must build HTML from result. E.g.:i“ l” M b ildfl E

• function handler(companyExecutives) {
dojo.query("#some-id")
.html("<b>Chief Technology Officer is " +
companyExecutives.cto + "</b>");
}
64
JSON Example Code: Core
JavaScript

dojo.require("dojo.NodeList-html");
dojo.addOnLoad(…);dojo addOnLoad( );

function showNums() {
j({dojo.xhrGet({
url: "show-nums",
handleAs: "json",
load: showNumberList,
preventCache: true
});
}

function showNumberList(jsonData) {
var list = makeList(jsonData.fg, jsonData.bg,
jsonData.fontSize,jsonData fontSize
jsonData.numbers);
int
dojo.query("#result3").html(list);
Array of doubles
}
JSON Example Code: Auxiliary
JavaScript

function makeList(fg, bg, fontSize, nums) {


return(
listStartTags(fg, bg, fontSize) +
listItems(nums) +
listEndTags());
65 }

function li tSt tTftilistStartTags(fg, b(fbg, f tSi ) {fontSize)


return(
"<div style='color:" + fg + "; " +
"background-color:" + bg + "; " +
"font-size:" + fontSize + "px'>\n" +
"<ul>\n");
}

66
JSON Example Code: Auxiliary
JavaScript (Continued)

function listItems(items) {
var result = "";;
for(var i=0; i<items.length; i++) {
result = result + "<li>" + items[i] + "</li>\n";
}
return(result);
}

function listEndTags() {
return("</ul></div>");
}
JSON Example Code: HTML


<fieldset><fi ld t>
<legend>dojo.xhrGet: Treating Response
67
as JSON</legend>
<form action="#">
<input type="button" value="Show Nums"
id nums button />id="nums-button"/>
<div id="result3"></div>
</form>
</fieldset></fi ld t>

68
JSON Example Code: Servlet

public class ShowNumbers extends HttpServlet {


public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");p(g,)
String fg = ColorUtils.randomColor();
request.setAttribute("fg", fg);
String bg = ColorUtils.randomColor();
request.setAttribute( bg ,request.setAttribute("bg", bg);
String fontSize = "" + (10 + ColorUtils.randomInt(30));
request.setAttribute("fontSize", fontSize);
double[] nums =
{ Math random() Math random() Math random() };Math.random(), Math.random(),
Math.random()
request.setAttribute("nums", nums);
response.setContentType("application/json");
String outputPage = "/WEB-INF/results/show-nums.jsp";
RequestDispatcher dispatcher =
request.getRequestDispatcher(outputPage);
dispatcher.include(request, response);
}}
JSON Example Code: JSP

• Notes
{ fg: "${fg}",
bg: "${b }"b"${bg}",
fontSize: ${fontSize},
numbers: [ ${nums[0]}, ${nums[1]}, ${nums[2]}]{[ ]}, {[ ]},
{[ ]}]
}
69

– No enclosing parens. Dojo will wrap in parens and then


pass to “eval” (or equivalent functionality)eval
– Types
• fg and bg: Strings
• f tSifontSize: i tint
• numbers: Array of doubles
JSON Example Code:
Auxiliary Java Code

public class ColorUtils {


pprivate static String[] colors = {g[]
"aqua", "black", "blue", "fuchsia", "gray",
"green", "lime", "maroon", "navy", "olive",
"purple", "red", "silver", "teal", "white", "yellow"
};

/** A random number between 0 and range-1, inclusive. */

public static int randomInt(int range) {


return(new Random().nextInt(range));
}

/** One of the official HTML color names, at random. */

public static String randomColor() {


return(colors[randomInt(colors.length)]);( l[d( llh)])
}
70

}
JSON Example: Results

71

Wrap-up
“Best” JavaScript Librariesp
• General JS programming • Traditional Ajax support
– Leader: Prototype – Tie
• Other programming (Java) • Server communication
– Leader (only): GWT – Leader: GWT
• DOM manipulation – 2nd tier: DWR, JSON-RPC
– Leader: jQuery • Usage in industry
• Oth copying jQuery approach andOthersi jQh d – Leader: jQuery
closing gap. jQuery released CSS
– 2nd tier: Ext-JS, Dojo, YUI,
matching library separately
(http://sizzlejs.com) Prototype, Scriptaculous, GWT
• Rich GUIs • Looking ahead
– Leaders: Ext-JS, YUI, Dojo – All these entries are likely to
– 2nd tier: jQuery UI GWTUI, c ge s g cchange significantlyy
• Familiarity to JS developers – Lurking on the horizon:
73 – Lowest: GWT Google “Closure” library

Books and References


• Dojo: The Definitive Guide
– by Matthew A. Russell
• Mastering Dojo
– b C i Ri k et alby Craig Rieckel
• Concise Guide to Dojo
– by Leslie M. OrchardM
• http://dojotoolkit.org/docs
– Moderately complete
– Moderately well organized
– Large number of explicit examples
74
Summary

• Assigning event handlers programmatically


dojo.addOnLoad(function() {
dojo.query("#some-id").onclick(someFunction);
});

• General Ajax requests (data-centric Ajax)


75

dojo.xhrGet({ url: "relative-address",


,load:
handlerFunction,
form: "form-id,
handleAs: "json" });

• Inserting HTML (content-centric Ajax)

dojo.require("dojo.NodeList-html");
dojo.xhrGet({ … (omit handleAs) … });
function h dl FftihandlerFunction(text) {ti (t t)
dojo.query("#some-id").html(text);
}

You might also like