Introduction
These days we can see that
the concept of Web 2.0 is becoming popular. Web 2.0 refers to the concept
of new web applications that are interactive in nature and are intended
to help people to collaborate and offer services for them, not just
static HTML. This stuff became possible, in part, by means of the AJAX
technology. For us, java developers, to build applications that are
aligned with this very concept of Web 2.0 involves the selection of
one tool (or framework) that helps us to accomplish our needs.
This article help us in writing a simple web application with the most popular AJAX frameworks
designed for Java, in this way we can highlight the main benefits and
drawbacks between each of them.
Sample application
To exemplify the benefits and
pitfalls for each framework we are going to show the same application
developed for a number of frameworks that, we consider, are the most
relevant at the moment.
The application that we are
going to use is a simple web application that contains a table which
is updated with data retrieved from the server. Although it is a
very simple and unrealistic (system are often much more complex) application,
it shows the basics of each framework and let us perceive the facilities
for implementing this functionality. Besides that, this functionality
is very commonly used among real projects and it may be crucial at the
time we make a decision about which tool to use.
Prototype
The first framework that we
want to afford is Prototype and this is not an arbitrary decision. Recently, it
has been ranked as the most widely used framework for AJAX
development based on Java [1], see Figure 1.
Figure 1.
Prototype is the more flexible
approach as it provides lower level functions (compared with other tools presented here)
on the Javascript side.
As the literature [2] mentioned,
there exist three ways of designing the Ajax interaction between server
and client:
- Content-centric.
This approach involves returning from the server side the HTML code
that would be inserted directly into the client page.
- Data-Centric.
We can receive the information from the server in a standard format,
such as XML or JSON, this way we gain independence of the data with
respect to the presentation layer.
- Script-Centric.
Using this approach you write client code (Javascript code) in the server
side enabling you to update the appropriate client’s structures by
means of the script code.
For this example, we will use
the Content-centric approach because it takes advantage of one
of the Ajax helper classes that Prototype implements, the Updater object.
We will use it in the page in the following way:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Prototype Table Example</title>
</head>
<script type="text/javascript" src="js/prototype.js"></script>
<script>
function loadTable() {
var divObj = $('PrototypeTableDiv');
new Ajax.Updater(
"PrototypeTableDiv",
"tablePrototypeServlet",
{
method: "get",
onComplete: function(){
//Do something
}
}
);
}
</script>
<body>
<form name="tableForm">
<div id="PrototypeTableDiv"></div>
<input type=button onclick="loadTable();"
value="Load data!">
</form>
</body>
</html>
At a glance, you probably ask
yourself what does the $’s operator means. It is a very handly alias
for the javascript function: document.getElementById, that you
might used before. The Ajax.Updater object, as you can see, receives,
in an anonymous array, the following elements:
- Identificator
for the HTML element which will be filled with the server data.
- URL of the server
resource which generates the data.
- Optional parameters.
In this case, we indicate the method of the request (if it is not specified post
is the default value) and a javascript function that is invoked
if everything went ok.
The server side code, executed
when the tablePrototypeServlet is requested, should be something
like the following:
package javabeat.net.example.prototype;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class for Servlet: TablePrototypeServlet
*
*/
public class TablePrototypeServlet extends
javax.servlet.http.HttpServlet
implements javax.servlet.Servlet {
private static String[] columns= {
"Fruit", "Price", "Stock", "Descrption"
};
private static String[][] data = {
{"Lemon", "23.4", "25", "Lemon fruit"},
{"Apple", "34.4", "5", "Apple fruit"},
{"Banana", "10.4", "10", "Banana fruit"},
{"Melon", "17.8", "7", "Melon fruit"},
{"Pear", "20.6", "8", "Pear fruit"},
{"India Berry", "18.5", "15", "India Berry"}
};
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException,
IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException,
IOException {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
PrintWriter writer = response.getWriter();
writer.write("<TABLE>");
writer.write("<THEAD>");
writer.write("<TR>");
for (int i=0;i<columns.length;i++) {
writer.write("<TH>");
writer.write(columns[i]);
writer.write("</TH>");
}
writer.write("</TR>");
writer.write("</THEAD>");
writer.write("<TBODY>");
for (int i=0;i<data.length;i++) {
writer.write("<TR>");
for (int j=0;j<data[i].length;j++) {
writer.write("<TD>");
writer.write(data[i][j]);
writer.write("</TD>");
}
writer.write("</TR>");
}
writer.write("</TBODY>");
writer.write("</TABLE>");
}
}
Our implementation of the server
side is done by means of a Servlet class, for this code to run properly
you have to configure the deployment descriptor’s files according
to the application server of your preference. Then, when you deploy
that web component, the expected result of clicking in the “Load data”
button should be as follows:
Figure 2.
As you can see, Prototype provides
a very flexible and strong support for the usage of Ajax technologies
using a Content-centric approach. If we want to use another approach,
that provides a cleaner separation of the user interface and the business
logic implemented on the server, the burden of the code will be translated
to the client side, this should happen because we got to:
- Parse the data in
a standard format (JSON or XML) based on the particular semantics defined
for the application being developed.
- And then, manipulate
the interface elements of the DOM to generate the appropriate output.
|
