In this hands-on lab, you are going to learn how to use Dojo toolkit
widgets first and then how to associate event handlers to the widgets.
Expected duration: 90 minutes
This hands-on lab assumes you have some basic knowledge of, or programming experience with, the following technologies.
Before you begin, you need to install the following software on your
computer. The Dojo Toolkit 0.4.3 is already included in the
hands-on lab zip file so there is no need for you to download it
yourself.
Dojo toolkit comes with many useful
ready-to-use widgets. In this exercise, you will learn how to use
these widgets. In subsequent exercises, you will learn how to
create your own widgets.
1. Right click dojo-event1
project and select Copy Project.
The Copy Project dialog box
appears.
2. In the Project Name: field,
type in dojo-widget-datepicker.
The copying project might take a couple of minutes. The dojo-widget-datepicker project
appears under Projects tab
window.
3. Right-click dojo-widget-datepicker
project and select Properties.
The Project Properties dialog
box appears,
4. Select Run and change the Context Path: field to /dojo-widget-datepicker.
We are now going to modify the index.jsp in which we are going to
use datePicker widget from
Dojo toolkit.
1. Double-click the index.jsp file of the dojo-widget-datepicker project to open it in the source editor. Please make sure you do not change the index.jsp file of the other projects - they all share the same file name, index.jsp.
| <html> <head> <script language="JavaScript" type="text/javascript" src="dojo-0.4.3-ajax/dojo.js"> </script> <!-- Dojo is loaded, include the widgets --> <script> dojo.require("dojo.widget.DatePicker"); dojo.require("dojo.widget.DropdownDatePicker"); </script> <style> body { font-family: Arial, Helvetica, sans-serif; padding: 0; margin: 0; } .page { padding: 10px 10px 10px 10px; } </style> <title>Usage of datePicker Widget from Dojo Toolkit</title> </head> <body> <h1><center>Usage of datePicker Widget from Dojo Toolkit</center></h1> <hr/> <table> <tbody> <tr> <td style="vertical-align:top;"> <h4>In document:</h4><div dojoType="datepicker" widgetId="foo"></div> </td> <td style="vertical-align:top;"> <form action="" onsubmit="return false;"> <h4>Dropdown:</h4> <div dojoType="dropdowndatepicker"></div> </form> </td> </tr> </tbody> </table> </body> </html> |
1. Right click dojo-widget-datepicker
project and select Copy Project.
The Copy Project dialog box
appears.
2. In the Project Name: field,
type in dojo-widget-fisheye.
The copying project might take a couple of minutes. The dojo-widget-fisheye project
appears under Projects tab
window.
3. Right-click dojo-widget-fisheye project
and select Properties.
The Project Properties dialog
box appears,
4. Select Run and change the Context Path: field to /dojo-widget-fisheye.
We are now going to modify the index.jsp in which we are going to
use FisheyeList and FisheyeItem widgets from
Dojo toolkit.
1. Double-click the index.jsp file of the dojo-widget-fisheye project to open it in the source editor. Please make sure you do not change the index.jsp file of the other projects - they all share the same file name, index.jsp.
| <html> <head> <script language="JavaScript" type="text/javascript" src="dojo-0.4.3-ajax/dojo.js"> </script> <!-- Dojo is loaded, include the widget --> <script> dojo.require("dojo.widget.FisheyeList"); dojo.hostenv.writeIncludes(); </script> <script> function load_app(id){ alert('Icon '+id+' was clicked'); } </script> <style> .dojoHtmlFisheyeListBar { margin: 0 auto; text-align: center; } .outerbar { background-color: #666; text-align: center; position: absolute; left: 0px; top: 0px; width: 100%; } body { font-family: Arial, Helvetica, sans-serif; padding: 0; margin: 0; } .page { padding: 60px 20px 20px 20px; } </style> <title>Usage of FisheyeList & FisheyeItem Widgets from Dojo Toolkit</title> </head> <body> <h1><center>Usage of FisheyeList & FisheyeItem Widgets from Dojo Toolkit - Move your mouse over the images!</center></h1> <hr/> <div class="dojo-FisheyeList" dojo:itemWidth="50" dojo:itemHeight="50" dojo:itemMaxWidth="200" dojo:itemMaxHeight="200" dojo:orientation="horizontal" dojo:effectUnits="2" dojo:itemPadding="10" dojo:attachEdge="top" dojo:labelEdge="bottom" dojo:enableCrappySvgSupport="false" > <div class="dojo-FisheyeListItem" onmouseover="load_app(1);" dojo:iconsrc="dojo-0.4.3-ajax/demos/widget/images/icon_browser.png" dojo:caption="Browser" > </div> <div class="dojo-FisheyeListItem" onmouseover="load_app(2);" dojo:iconsrc="dojo-0.4.3-ajax/demos/widget/images/icon_calendar.png" dojo:caption="Calendar" > </div> <div class="dojo-FisheyeListItem" onmouseover="load_app(3);" dojo:iconsrc="dojo-0.4.3-ajax/demos/widget/images/icon_email.png" dojo:caption="Email" > </div> <div class="dojo-FisheyeListItem" onmouseover="load_app(4);" dojo:iconsrc="dojo-0.4.3-ajax/demos/widget/images/icon_texteditor.png" dojo:caption="Text Editor" > </div> <div class="dojo-FisheyeListItem" onmouseover="load_app(5);" dojo:iconsrc="dojo-0.4.3-ajax/demos/widget/images/icon_update.png" dojo:caption="Update" > </div> </div> </body> </html> |
1. Right click dojo-widget-datepicker
project and select Copy Project.
The Copy Project dialog box
appears.
2. In the Project Name: field,
type in dojo-widget-editor.
The copying project might take a couple of minutes. The dojo-widget-editor project
appears under Projects tab
window.
3. Right-click dojo-widget-editor project
and select Properties.
The Project Properties dialog
box appears,
4. Select Run and change the Context Path: field to /dojo-widget-editor.
We are now going to modify the index.jsp in which we are going to
use Editor widget from
Dojo toolkit.
1. Double-click the index.jsp file of the dojo-widget-editor project to open it in the source editor. Please make sure you do not change the index.jsp file of the other projects - they all share the same file name, index.jsp.
| <html> <head> <script language="JavaScript" type="text/javascript" src="dojo-0.4.3-ajax/dojo.js"> </script> <!-- Dojo is loaded, include the widget --> <script> dojo.require("dojo.widget.Editor"); </script> <style> body { font-family: Arial, Helvetica, sans-serif; padding: 0; margin: 0; } .page { padding: 10px 10px 10px 10px; } </style> <title>Usage of Editor Widget from Dojo Toolkit</title> </head> <body> <h1><center>Usage of Editor Widget from Dojo Toolkit</center></h1> <hr/> <div dojoType="Editor" items="formatblock;|;insertunorderedlist;insertorderedlist;|;bold;italic;underline;strikethrough;|;createLink;"> <p>This <b>is</b> <i>the</i> text inside the editor. Go ahead and edit it.</p> <p> This example shows the usage of Editor widget from Dojo toolkit. </p> </div> </body> </html> |
In this exercise, you will learn how to
use JSON as a data format of choice between the
browser and the server. (This exercise was created based on the "Using
Dojo and JSON to Build Ajax Applications" article that was authored
by Zarar Siddiqi with the author's permission.)
| <%@ page import="java.util.Iterator, java.util.List, com.esolaria.dojoex.Book, com.esolaria.dojoex.BookManager" %> <% List books = BookManager.getBooks(); %> <html> <body> <head> <title>Dojo and JSON Example</title> <script language="javascript" src="dojo-0.4.3-ajax/dojo.js"></script> <script language="javascript"> dojo.require("dojo.io.*"); dojo.require("dojo.event.*"); dojo.require("dojo.html.*"); // Event handler when a user hovers a mouse over function trMouseOver(bookId) { getBookInfo(bookId); } // Event handler when a user hovers a mouse out function trMouseOut(evt) { var bookDiv = document.getElementById("bookInfo"); bookDiv.style.display = "none"; } // Invoked from trMoustOver(bookId) function call above function getBookInfo(bookId) { var params = new Array(); params['bookId'] = bookId; // Perform remote operation using JSON as data format // that will be returned from the server var bindArgs = { url: "actions/book.jsp", error: function(type, data, evt){alert("error");}, mimetype: "text/json", content: params }; var req = dojo.io.bind(bindArgs); // The "populateDiv" gets called as an event handler dojo.event.connect(req, "load", this, "populateDiv"); } // Function call to populate the "bookInfo" div element that is // defined at the end of this file. function populateDiv(type, data, evt) { var bookDiv = document.getElementById("bookInfo"); if (!data) { bookDiv.style.display = "none"; } else { bookDiv.innerHTML = "ISBN: " + data.isbn + "<br/>Author: " + data.author; bookDiv.style.display = ""; } } </script> </head> <body> <h1><center>Dojo and JSON Example - Move your mouse over the book titles!</center></h1> <table cellspacing="0" cellpadding="3" style="background-color:lavender; border: solid 1px #CCCCCC"> <!-- Display each book with Id and it title in a table format --> <% for (Iterator iter = books.iterator(); iter.hasNext();) { Book book = (Book) iter.next(); %> <!-- Whenever you hover your mouse over and out on a book title, trMouseOver() and trMouseOut event handlers get called --> <tr onmouseover="trMouseOver(<%=book.getBookId()%>)" onmouseout="trMouseOut(<%=book.getBookId()%>)"> <td><%=book.getTitle()%></td> </tr> <% } %> </table> <!-- This is the div element that will be populated in the populateDiv JavaScript function above, which req object is loaded --> <div id="bookInfo" style="display:none;"></div> </body> </html> |
|
// Invoked from trMoustOver(bookId) function call above function getBookInfo(bookId) { var params = new Array(); params['bookId'] = bookId; // Perform remote operation using JSON as data format // that will be returned from the server var bindArgs = { url: "actions/book.jsp", error: function(type, data, evt){alert("error");}, mimetype: "text/plain", content: params }; var req = dojo.io.bind(bindArgs); // The "populateDiv" gets called as an event handler dojo.event.connect(req, "load", this, "populateDiv"); } // Function call to populate the "bookInfo" div element that is // defined at the end of this file. function populateDiv(type, data, evt) { var bookDiv = document.getElementById("bookInfo"); if (!data) { bookDiv.style.display = "none"; } else { alert("Returned data from server in the JSON format but display in plain form = " + data); bookDiv.innerHTML = "ISBN: " + data.isbn + "<br/>Author: " + data.author; bookDiv.style.display = ""; } } |
| package com.esolaria.dojoex; /** * * @author sang */ public class Publisher { private String name; private String address; private int year; /** Creates a new instance of Publisher */ public Publisher() { } public Publisher(String name, String address, int year) { this.name = name; this.address = address; this.setYear(year); } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } public int getYear() { return year; } public void setYear(int year) { this.year = year; } } |
| package com.esolaria.dojoex; import org.json.JSONObject; import org.json.JSONException; public class Book { private int bookId; private String title; private String isbn; private String author; private Publisher publisher; public Book(){ } public Book(int bookId, String title, String isbn, String author, Publisher publisher) { this.bookId = bookId; this.title = title; this.isbn = isbn; this.author = author; this.setPublisher(publisher); } public String toJSONString() throws JSONException { JSONObject jsonObj = new JSONObject(); jsonObj.put("bookId", new Integer(this.bookId)); jsonObj.put("title", this.title); jsonObj.put("isbn", this.isbn); jsonObj.put("author", this.author); JSONObject jsonObj2 = new JSONObject(); jsonObj2.put("name", this.getPublisher().getName()); jsonObj2.put("address", this.getPublisher().getAddress()); jsonObj2.put("year", this.getPublisher().getYear()); jsonObj.put("publisher", jsonObj2); return jsonObj.toString(); } public void setBookId(int bookId) { this.bookId = bookId; } public int getBookId() { return this.bookId; } public void setTitle(String title) { this.title = title; } public String getTitle() { return this.title; } public void setIsbn(String isbn) { this.isbn = isbn; } public String getIsbn() { return this.isbn; } public void setAuthor(String author) { this.author = author; } public String getAuthor() { return this.author; } public Publisher getPublisher() { return publisher; } public void setPublisher(Publisher publisher) { this.publisher = publisher; } } |
| package com.esolaria.dojoex; import java.util.ArrayList; import java.util.Iterator; import java.util.List; public class BookManager { private static List books = new ArrayList(); // Initialize List of Book's' static { books.add(new Book(1, "Crime and Punishment", "0679734503", "Fyodor Dostoevsky", new Publisher("Google Publishing", "1 Google Land", 1900))); books.add(new Book(2, "The Collected Tales of Nikolai Gogol", "0375706151", "Nikolai Gogol", new Publisher("Yahoo Publishing", "1 Yahoo Land", 2002))); books.add(new Book(3, "King Rat", "0440145465", "James Clavell", new Publisher("Shin Company", "1 Never Land", 1899))); books.add(new Book(4, "The Alchemist", "0062502182", "Paulo Coelho", new Publisher("Daniel Company", "1 Boston", 1999))); books.add(new Book(5, "A Tale of Two Cities", "0451526562", "Charles Dickens", new Publisher("Young Publishing", "1 Dream Land",2001))); } public static Book getBook(int bookId) { Book returnValue = null; for (Iterator iter = books.iterator(); iter.hasNext();) { Book book = (Book) iter.next(); if (book.getBookId() == bookId) { returnValue = book; break; } } return returnValue; } public static List getBooks() { return books; } } |
| <%@ page import="java.util.Iterator, java.util.List, com.esolaria.dojoex.Book, com.esolaria.dojoex.BookManager" %> <% List books = BookManager.getBooks(); %> <html> <body> <head> <title>Dojo and JSON Example</title> <script language="javascript" src="dojo-0.4.3-ajax/dojo.js"></script> <script language="javascript"> dojo.require("dojo.io.*"); dojo.require("dojo.event.*"); dojo.require("dojo.html.*"); // Event handler when a user hovers a mouse over function trMouseOver(bookId) { getBookInfo(bookId); } // Event handler when a user hovers a mouse out function trMouseOut(evt) { var bookDiv = document.getElementById("bookInfo"); bookDiv.style.display = "none"; } // Invoked from trMoustOver(bookId) function call above function getBookInfo(bookId) { var params = new Array(); params['bookId'] = bookId; // Perform remote operation using JSON as data format // that will be returned from the server var bindArgs = { url: "actions/book.jsp", error: function(type, data, evt){alert("error");}, mimetype: "text/json", content: params }; var req = dojo.io.bind(bindArgs); // The "populateDiv" gets called as an event handler dojo.event.connect(req, "load", this, "populateDiv"); } // Function call to populate the "bookInfo" div element that is // defined at the end of this file. function populateDiv(type, data, evt) { var bookDiv = document.getElementById("bookInfo"); if (!data) { bookDiv.style.display = "none"; } else { bookDiv.innerHTML = "ISBN: " + data.isbn + "<br/>Author: " + data.author + "<br/>Publisher Name: " + data.publisher.name + "<br/>Publisher Address: " + data.publisher.address + "<br/>Publisher Established Year: " + data.publisher.year; bookDiv.style.display = ""; } } </script> </head> <body> <h1><center>Dojo and JSON Example - Move your mouse over the book titles!</center></h1> <table cellspacing="0" cellpadding="3" style="background-color:lavender; border: solid 1px #CCCCCC"> <!-- Display each book with Id and it title in a table format --> <% for (Iterator iter = books.iterator(); iter.hasNext();) { Book book = (Book) iter.next(); %> <!-- Whenever you hover your mouse over and out on a book title, trMouseOver() and trMouseOut event handlers get called --> <tr onmouseover="trMouseOver(<%=book.getBookId()%>)" onmouseout="trMouseOut(<%=book.getBookId()%>)"> <td><%=book.getTitle()%></td> </tr> <% } %> </table> <!-- This is the div element that will be populated in the populateDiv JavaScript function above, which req object is loaded --> <div id="bookInfo" style="display:none;"></div> </body> </html> |
In this exercise, you are going to modify
"Dojo and JSON" sample application (dojo-json
project under NetBeans)
you built in Exercise 4 to use Fisheye widget. More precisely
what you are going to do here is to retrieve the book data from the
server whenever you hover your mouse over an icon.
| <%@ page import="java.util.Iterator, java.util.List, com.esolaria.dojoex.Book, com.esolaria.dojoex.BookManager" %> <% List books = BookManager.getBooks(); %> <html> <body> <head> <title>Dojo and JSON Example</title> <script language="javascript" src="dojo-0.4.3-ajax/dojo.js"></script> <script language="javascript"> dojo.require("dojo.io.*"); dojo.require("dojo.event.*"); dojo.require("dojo.html.*"); // Add Fisheye packages dojo.require("dojo.widget.FisheyeList"); dojo.hostenv.writeIncludes(); // Event handler when a user hovers a mouse over function trMouseOver(bookId) { getBookInfo(bookId); } // Event handler when a user hovers a mouse out function trMouseOut(evt) { var bookDiv = document.getElementById("bookInfo"); bookDiv.style.display = "none"; } // Invoked from trMoustOver(bookId) function call above function getBookInfo(bookId) { var params = new Array(); params['bookId'] = bookId; // Perform remote operation using JSON as data format // that will be returned from the server var bindArgs = { url: "actions/book.jsp", error: function(type, data, evt){alert("error");}, mimetype: "text/json", content: params }; var req = dojo.io.bind(bindArgs); // The "populateDiv" gets called as an event handler dojo.event.connect(req, "load", this, "populateDiv"); } // Function call to populate the "bookInfo" div element that is // defined at the end of this file. function populateDiv(type, data, evt) { var bookDiv = document.getElementById("bookInfo"); if (!data) { bookDiv.style.display = "none"; } else { bookDiv.innerHTML = "ISBN: " + data.isbn + "<br/>Author: " + data.author + "<br/>Publisher Name: " + data.publisher.name + "<br/>Publisher Address: " + data.publisher.address + "<br/>Publisher Established Year: " + data.publisher.year; bookDiv.style.display = ""; } } // Add event handler function for Fisheye widget function load_app(bookId){ getBookInfo(bookId); } </script> <!-- Add new style for Fisheye widget --> <style> .dojoHtmlFisheyeListBar { margin: 0 auto; text-align: center; } .outerbar { background-color: #666; text-align: center; position: absolute; left: 0px; top: 0px; width: 100%; } body { font-family: Arial, Helvetica, sans-serif; padding: 0; margin: 0; } .page { padding: 60px 20px 20px 20px; } </style> </head> <body> <h1><center>Dojo and JSON and FishEye Example - Move your mouse over the book titles or Icons!</center></h1> <div class="dojo-FisheyeList" dojo:itemWidth="50" dojo:itemHeight="50" dojo:itemMaxWidth="200" dojo:itemMaxHeight="200" dojo:orientation="horizontal" dojo:effectUnits="2" dojo:itemPadding="10" dojo:attachEdge="top" dojo:labelEdge="bottom" dojo:enableCrappySvgSupport="false" > <div class="dojo-FisheyeListItem" onmouseover="load_app(1);" dojo:iconsrc="dojo-0.4.3-ajax/demos/widget/images/icon_browser.png" dojo:caption="Browser" > </div> <div class="dojo-FisheyeListItem" onmouseover="load_app(2);" dojo:iconsrc="dojo-0.4.3-ajax/demos/widget/images/icon_calendar.png" dojo:caption="Calendar" > </div> <div class="dojo-FisheyeListItem" onmouseover="load_app(3);" dojo:iconsrc="dojo-0.4.3-ajax/demos/widget/images/icon_email.png" dojo:caption="Email" > </div> <div class="dojo-FisheyeListItem" onmouseover="load_app(4);" dojo:iconsrc="dojo-0.4.3-ajax/demos/widget/images/icon_texteditor.png" dojo:caption="Text Editor" > </div> <div class="dojo-FisheyeListItem" onmouseover="load_app(5);" dojo:iconsrc="dojo-0.4.3-ajax/demos/widget/images/icon_update.png" dojo:caption="Update" > </div> </div> <table cellspacing="0" cellpadding="3" style="background-color:lavender; border: solid 1px #CCCCCC"> <!-- Display each book with Id and it title in a table format --> <% for (Iterator iter = books.iterator(); iter.hasNext();) { Book book = (Book) iter.next(); %> <!-- Whenever you hover your mouse over and out on a book title, trMouseOver() and trMouseOut event handlers get called --> <tr onmouseover="trMouseOver(<%=book.getBookId()%>)" onmouseout="trMouseOut(<%=book.getBookId()%>)"> <td><%=book.getTitle()%></td> </tr> <% } %> </table> <!-- This is the div element that will be populated in the populateDiv JavaScript function above, which req object is loaded --> <div id="bookInfo" style="display:none;"></div> </body> </html> |
