EJB605: INTRODUCING THE JAVA PET STORE 2.0 APPLICATION



| |

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.

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, 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 . 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.

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 RSS feed is a service that is provided and used within the Java Pet Store application. The data from the XML file provided by 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 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:

• 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

[pic]

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.

2. An XMLHttpRequest object is created and configured.

3. The XMLHttpRequest object makes a call.

4. The request is processed by the ValidateServlet.

5. The ValidateServlet returns an XML document containing the result.

6. The XMLHttpRequest object calls the callback() function and processes the result.

7. 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 response) |

|throws IOException, ServletException { |

| |

|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("valid"); |

|} else { |

|response.setContentType("text/xml"); |

|response.setHeader("Cache-Control", "no-cache"); |

|response.getWriter().write("invalid"); |

|} |

|} |

|} |

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.

[pic][pic]

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download