Download ejb605: introducing the java pet store 2.0 application

EMTM 600 Spring 2007
(courtesy of Prof. J.A. Toronto)
Introducing the Java Pet Store 2.0 Application: Documentation and
Ajax Technology
Overview
The Java Pet Store 2.0 demo provides a meeting ground for buyers and sellers of pets, as well as or pet
lovers just wanting to look. This application illustrates how you can use the Java Platform, Enterprise
Edition 5 (Java EE 5) to develop an Ajax-enabled Web 2.0 application.
The application demo illustrates the use of Ajax-enabled Java Server Faces component libraries and the
Java Persistence API, the model-view-controller (MVC) and other design patterns, and mashups, which
are web applications that combine data from multiple sources.
The Blueprints team created the Java Pet Store 2.0 reference application using Web 2.0: All of its
content is user-driven, and it allows users to tag the data in way that makes sense to them. In addition,
the Java Pet Store demo uses an Ajax user interface (UI) throughout the application to provide a richer
user experience that resembles a desktop application. Lastly, the Java Pet Store demo includes dynamic
data and mashups of live services.
Web GUI with Ajax
Web sites that have to reload entire pages every time you click a menu item or link are such a nuisance.
Not only does this slow down the application, but it is jarring to the eyes and sometimes can be
disorienting, especially if you are viewing pages with a lot of data. To overcome some of these issues, all
of the pages in the Java Pet Store demo use Ajax to create a smoother user experience and to avoid
unsightly complete-page reload.
Ajax uses JavaScript technology with an HTML page to asynchronously make calls to the server and fetch
data. The JavaScript technology may then use this data to update or modify the Document Object Model
(DOM) of the HTML page. Developers originally used Ajax with XML documents to represent data, but
they increasingly use other formats.
Ajax interactions allows for a clear separation of presentation logic from the data. An HTML page can
pull small portions of data as needed rather than reloading the whole page every time a change is to be
displayed. Ajax requires different server-side architecture to support this interaction model.
Traditionally, server-side web applications have focused on generating HTML documents for every client
event that results in a call to the server. The client then refreshed and re-rendered the complete HTML
page for each response. Rich web applications, such as Java Pet Store 2.0 demo, focus on a client
fetching an HTML document, which acts as a template or container for injecting content based on client
events, using data retrieved from a server-side component.
The Java Pet Store 2.0 demo application can manipulate and display data on a page seamlessly without
requiring the reload of an entire page.
[INTRODUCING THE JAVA PET STORE 2.0 APPLICATION] April 5, 2007
RSS
RSS is a lightweight XML document designed for sharing headlines and other web content. RSS syntax
defines an XML document with a set of HTML-like tags for sharing news headlines, article titles, and so
forth. Each RSS XML file contains both static information about the site and dynamic information about
new stories, all surrounded by start and end tags. A web site then makes this RSS feed available to those
who want headline links to that data.
In this case, Java.net is providing the RSS service, hence the XML document, and the Java Pet Store 2.0
application is an aggregator that decodes that XML file into a format that fits on the news banner as live
links to news and blogs.
An example in the Java Pet Store 2.0 application demo is the news banner that is spread across all the
pages, it contains a link to the news page as well as links to several of the top stories and blogs from the
Blueprints live announcement RSS feed on Java.net. The use of Ajax avoids a whole-page refresh.
Instead, only the news items are replaced, allowing the page template to stay the same.
User-Driven Content
The Java Pet Store 2.0 application demo allows users to tag pets with descriptive criteria. This allows
users to browse the content by way of a user-driven categorization of that content.
When a user creates a tag for a pet, the tag is stored in the database and associated with that pet. The
system keeps track of all the tags that users have entered and the number of times that they have
entered the same tag.
The seller page allows the user to upload a pet’s photos and information about the pet to share within
the Java Pet Store 2.0 application.
A CAPTCHA, short for Completely Automated Public Turing test to tell Computers and Humans Apart,
requires that the user type the letters of a distorted image, sometimes with an addition of an obscured
sequence of letters or digits that appears on the screen. A CAPTCHA is included in the Java Pet Store 2.0
application, to discourage placement of false content.
Client and Server Side Validation
The Java Pet Store 2.0 application demo utilizes typical client-side web techniques by coding JavaScript.
JavaScript is used to check the form’s data before it is submitted. This method provides the user with a
quick response and doesn’t suffer from propagation delay. This form of validation does not add any
unnecessary traffic to the network.
The validation that was performed on the client side is reimplemented on the server side. This
functionality is necessary to catch cases in which users disable JavaScript code on the browser or try to
hack a submission by sending the request directly to the server by some alternate method.
The server-side validation goes beyond client-side validation to include checks that are not possible on
the client side. For example, checks on the server side guard against SQL injection of JavaScript attacks.
Instructor Val Tannen | EMTM 600
2
[INTRODUCING THE JAVA PET STORE 2.0 APPLICATION] April 5, 2007
Mashups with Google Maps
A mashup is the result of combining content-specific data with the service of another web site from one
or more providers into an integrated experience. Mashups differ from simply integrating a service from
simply integrating a service. For instance, the java.net RSS feed is a service that is provided and used
within the Java Pet Store application. The data from the XML file provided by java.net is simply pulled
into the application and formatted into the web page as links. When a user clicks on one of those links,
the browser takes the user to the java.net web site to read the article or blog.
With a mashup, however, the service is not only brought into the Java Pet Store application, it also
interacts with the data that the user has provided, and it then displays the customized results within the
application. In this way, the data from the search result is mashed up with the service from Google Maps
and conveniently displayed within the application.
The Java Pet Store 2.0 application consists of many technologies and a mashup of services:
 Client-side caching with Ajax, DHTML and a database
 Java EE 5 technologies: Java Server Faces, Java Server Pages (JSP), Java Servlet Technology, Java
Database Connectivity (JDBC), Java EE annotations, Java Persistence API, and Java Transaction
API
 Open-source toolkits, utilities, and services: Dojo toolkit, Dojo widgets, RSS feeds, Apache file
upload, Google Maps, Yahoo Geocoding
I will now go into more detail about how the Web 2.0 Java Pet Store application uses Ajax for smoother
user experience in detail and will provide information in depth of the code behind the scenes.
Ajax Technology
As described earlier, Ajax uses JavaScript technology with an HTML page to asynchronously make calls to
the server and fetch data. The JavaScript technology may then use this data to update or modify the
Document Object Model (DOM) of the HTML page.
With Ajax being a new technology like all technologies it may be difficult to learn and embrace. While it
is debatable as to whether an Ajax based application is really in fact faster, the user ultimately feels a
sense of immediacy because they are given active feedback while data is exchanged in the background.
In order to begin to implement Ajax into your web application you must plan to learn Dynamic HTML
(DHTML). DHTML enables browser-base real-time interaction between a user and a webpage. DHTML is
a combination of JavaScript, the Document Object Model (DOM) and Cascading Style Sheets (CSS).



JavaScript – Responds to events.
Document Object Model – API for accessing and manipulating structured documents.
CSS – The design, flow and layout presentation layer of a page. JavaScript may manipulate.
Some real uses for AJAX interactions are the following:
Instructor Val Tannen | EMTM 600
3
[INTRODUCING THE JAVA PET STORE 2.0 APPLICATION] April 5, 2007

Real-time form data validation: Form data such as user IDs, serial numbers, postal codes, or
even special coupon codes that require server-side validation can be validated in a form before the
user submits a form.

Auto completion: A specific portion of form data such as an email address, name, or city name
may be auto completed as the user types.

Load on demand: Based on a client event, an HTML page can fetch more data in the
background, allowing the browser to load pages more quickly.

Sophisticated user interface controls and effects: Controls such as trees, menus, data tables,
rich text editors, calendars, and progress bars allow for better user interaction and interaction with
HTML pages, generally without requiring the user to reload the page.

Partial submit: An HTML page can submit form data as needed without requiring a full page
refresh.

Mashups: An HTML page can obtain data using a server-side proxy or by including an external
script to mix external data with your application's or your service's data. For example, you can mix
content or data from a third-party application such as Google Maps with your own application.
Ajax Example using JavaScript and a Java Servlet Page
The following items represent the setups of an AJAX interaction as they appear in the diagram
1. A client event occurs from a client JavaScript event such as onkeyup.
Instructor Val Tannen | EMTM 600
4
[INTRODUCING THE JAVA PET STORE 2.0 APPLICATION] April 5, 2007
2.
3.
4.
5.
6.
7.
An XMLHttpRequest object is created and configured.
The XMLHttpRequest object makes a call.
The request is processed by the ValidateServlet.
The ValidateServlet returns an XML document containing the result.
The XMLHttpRequest object calls the callback() function and processes the result.
The HTML DOM is updated.
Upon analysing step 4 (A servlet mapped to the URI "validate" checks whether the user ID is in the user
database).
ValidateServlet processes an XMLHttpRequest just as it would any other HTTP request.
public class ValidateServlet extends HttpServlet {
private ServletContext context;
private HashMap users = new HashMap();
public void init(ServletConfig config) throws ServletException {
super.init(config);
this.context = config.getServletContext();
users.put("Aaron","account data");
users.put("Jordan","account data");
}
public void doGet(HttpServletRequest request, HttpServletResponse
throws IOException, ServletException {
response)
String targetId = request.getParameter("id");
if ((targetId != null) && !users.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<message>valid</message>");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<message>invalid</message>");
}
}
}
Following a successful request, JavaScript technology code may modify the DOM of the HTML page. The
object representation of the XML document that was retrieved from the ValidateServlet is available to
JavaScript technology code using the req.responseXML, where req is an XMLHttpRequest object. The
DOM APIs provide a means for JavaScript technology to navigate the content from that document and
use that content to modify the DOM of the HTML page.
Instructor Val Tannen | EMTM 600
5