Friday August 04, 2006 
Mark A. Basler's Weblog
All
|
Java
Friday August 04, 2006
The Java BluePrints Petstore 2.0 Reference Application that uses Web 2.0 technologies like AJAX, RSS and client-side/server-side mashups is now available for download...
The Java
BluePrints Petstore
2.0 Application is a reference application designed to illustrate
how the Java EE 5 platform
can be used with Web 2.0 technologies. It shows real-world
examples of AJAX, RSS and client-side/server-side mashups that can be
used with Java EE 5 technologies like JavaServer Faces (JSF) and Java
Persistence APIs. The
application comes with full source-code that utilizes the Google Maps
service for location specific
searches of pets, the PayPal service for purchases, an RSS feed as
a data source, and much more.
Many of the AJAX enabled JSF components, like the Popup Balloon,
FileUpload with Progress Bar, Auto-Complete, Rating, PayPal mashup,
Google Map mashup, Yahoo GEO Code Mashup, and RSS Bar came from the Java BluePrints
Solutions Catalog
that can also be downloaded and used in your web applications.
The components and write-ups that the Solutions Catalog contains are
described in more detail in a previous
entry from my blog.
All that needs to be done to get started is to download and install Sun's Open Source
Application Server, Glassfish and then download, configure, and
deploy the Petstore
2.0 reference application. This is a great opportunity to
jump start you and your web application
with Web 2.0 functionality with a minimal learning curve.
Below are some screen shots of the main pages in the application with
brief descriptions of the pages functionality.
Hope this helps - Thanks - Mark
Main Catalog Page
This screen shot is of the main catalog page that contains a large amount of functionality and is the center of the Petstore 2.0 reference application. Some of the main functionality it includes is as follows:
- An image slider bar populated through an AJAX call as the user scrolls
- An accordion menu bar populated from the database though the Java Persistence APIs.
- A cool master-detail transparent display that enables the user to
show/hide the products detailed information.
- The Solutions Catalog's AJAX
Rating component. This component uses a GUI 5 star display
and updates the database with the user selected rating through an AJAX
call. The user value is then averaged with the other user ratings
that
already exist.
- The Solutions Catalog's PayPal
client-side mashup component. This allows the user to
purchase the catalog item through the third party facility.
- The Solutions Catalog's RSS Bar
server-side mashup component which is linked to the Java BluePrints
RSS feed and presented in the header on every page.
PayPal Page
This is a screen shot of the PayPal Developer sandbox page that is populated with the catalog item data from the Petstore's database. This page is presented when the "PayPal" button is clicked on from the Petstore's Catalog Page.
Apache's Lucene Search Engine Page
This page is the front-end search page that utilizes the Apache's Lucene Search Engine on the server. This page searches the indexes and displays a list of results that matches all the entered words in the search string. The AJAX Popup Balloon component that shows more detailed information is triggered when the user mouses-over the name for more than a second. This page is also a lead- in to the Google Maps client-side mash-up page. The user can select the items that they want shown on the map and by entering an optional center-point address with a search area (in miles), can further restrict the map to show only the items in the specific area around the center point.
More information about our experiences using the Apache's Lucene Search Engine can be found in a previous entry from my blog.
Google Map Search Page
This page is the front-end map page that utilizes the database through the Java Persistence APIs to retrieve catalog items by category. This page leads into the Google Maps client-side mashup page and displays the catalog items on the map for the selected category. By entering an optional center-point address with a search area (in miles), the user can further restrict the category to show only the items in the specific area around the center point.
Google Map Mashup Page
This screen shot is of the Google Maps client-side mashup page and shows the selected items, either from the Lucene Search page or the Map Search page. Some of the main functionality it includes is as follows:
- A list of hyper-linked catalog items that activates the
correlated points on the Google Map.
- The Solutions Catalog's Google
Maps client-side mashup component. That plots the catalog item's
addresses as points on a map.
- The Solutions Catalog's AJAX Popup Balloon component that shows more detailed information which is triggered when the user mouses-over the name for more than a second.
- The Solutions Catalog's RSS Bar server-side mashup component which is linked to the Java BluePrints RSS feed and presented in the header on every page.
Seller Catalog Item Upload Page
This screen shot is of the second pane of the Seller Catalog Item Upload Page and shows the item's image being uploaded to the server while displaying the status of the upload to the user. Some of the main functionality it includes is as follows:
- The Captchas security mechanism is utilized in the form of an
image to ensure that the uploaded item is coming from a live user and
not a automated mechanism.
- The Solutions Catalog's AJAX Fileupload and Progress Bar component. This component upload's the entire HTML form through AJAX utilizing Dojo's dojo.io.bind form node functionality. The uploaded stream is parsed and stored on the server using Apache's Commons FileUpload and IO libraries. The optional Progress Bar that shows status of the upload to the user is refreshed using a second AJAX call to retrieve information from the server.
- The Solutions Catalog's Auto-Complete
component provides a list of cities and states that are populated
from the database through the Java Persistence APIs. This list is
retrieved through an AJAX call and is narrowed as the user types
- The Solutions Catalog's Yahoo
GEO Coder server-side mashup component is used to retrieve the
latitude and longitude of the entered address which is used when the
item is displayed on the Google Map.
- Also, the Apache's Lucene
Search
Engine indexes are updated once the fileupload is completed
successfully.
Posted by basler Aug 04 2006, 01:51:56 PM PDT Permalink
Comments:
Post a Comment:
Comments are closed for this entry.
