ajax|j2ee| Program
Dynamic HTML technology has been on the show for years. Recently, Google's latest web apps, Gmail, Google suggests and Google Maps, reintroduced a standards-based DHTML development model on the front-end pages.
Google has proven that the DHTML development model enables developers to create visually appealing and highly interactive rich Internet application (Web applications, RIA).
Jesse James Garrett of Adaptive Path created the term Ajax (asynchronous JavaScript + XML) for this standards-based RIA development model. Compared with the traditional web-based Web application model, Ajax has 3 different points:
There is a client engine acting as an intermediary between the user interface (UI) and the server.
User behavior is handled by the client engine instead of generating page requests to the server.
XML data is transmitted between the client engine and the server.
In other words, the Ajax solution includes a client engine that renders the user interface and communicates with the server using XML format. The engine is made up of a number of JavaScript functions in a Web browser that does not require plug-ins and does not require a user installation.
An AJAX-based Ria is rapidly becoming a benchmark for Web application front-end, as it can provide both advantages: richness and accessibility. Ajax applications are as rich and responsive as desktop applications, and can provide all the data on a single page without refreshing the page. They also have the accessibility features of Standards-based browser applications that can be deployed without browser plug-ins or client applets.
The Ajax software provided by Backbase has the following features: Standards-based, full-featured, and easy to use. Backbase presentation Client (BPC) is based on Ajax technology, which extends DHTML with additional tags called Backbase XML (bxml). Backbase XML Server Edition for Java (BXS) contains server-side components that enable Java developers to quickly develop Ajax front-end for Java EE applications.
In this article, I used backbase to develop an AJAX-based front-end for the Java Pet store. This case study demonstrates how to use the Backbase technology as the AJAX presentation layer for Java EE applications. You can view the online demo of the application described in the article, the URL is http://www.backbase.com/xmlserver.
backbase Ajax Presentation Layer
Web developers should be able to easily create rich Internet application (RIA) with the following features: completely based on the HTML standard (the World Service), without the need for end users to install Plug-ins, fast, and able to operate on all browsers, and is fully integrated with the Java EE Runtime and development environment. RIA leverages client (web browser) resources to create and manage user interfaces to provide end users with a responsive and application-style user interface.
This approach has recently been called Ajax. The term Ajax is inspired by applications such as Gmail, Google Maps, and Google suggests, which raise existing browser technology to a new level. Ria fundamentally improves the usability and effectiveness of online applications. Ajax Ria does this only by using standard browser techniques such as JavaScript, XHTML, and XMLHttpRequest objects. By using XMLHttpRequest, you do not need to refresh the page when you asynchronously load data into an interface.
Backbase provides an AJAX presentation layer in the Java EE architecture that combines the advantages of the current Java server and advanced rich-client technology. The Backbase presentation layer controls every aspect of the rich user interface: An interaction model with end users, integration with backend systems, and full client-server communication. Backbase directly provides the next paradigm for aggregating XML from any location, binding data to advanced rich user interface controls, and delivering composite applications in a unified rich user interface.
The Backbase presentation layer consists of a client and a server. Backbase presentation Client (BPC) is an AJAX-based GUI engine that allows developers to quickly build an RIA in a declarative manner. Backbase XML (bxml) is an extension of XHTML. It provides developers with additional tags for delivering rich front-end functionality (B tag). Backbase XML Server (BXS) provides an XML pipelined architecture that enables you to aggregate and transform the data from Web services, databases, or Java objects, and bind it to UI elements in the BPC. The combination of BPC and Bxs can build a powerful bridge between Web browsers and application servers, and provide a complete rich Internet presentation layer distributed across the client and server.
Figure 1 illustrates where the backbase is located in the logical and physical application architecture. The application consists of a Java-EE back end and an AJAX-based Ria front-end. Logically, Backbase provides the presentation layer, while Java EE provides the business logic and data tier. Physically, the presentation layer is distributed between the client and the server. On the client side, Backbase uses the BPC to extend the browser. On the server, Backbase uses Bxs to extend the application server.
Figure 1. Backbase Rich Internet presentation layer
Pet Store Case Analysis
We will use the Java Pet Store as a case to analyze how to add the Backbase ria front end for an Java EE application. The Java Pet Store Demo is a sample application provided by Sun Microsystems to demonstrate how to use Java 2 Platform, Enterprise Edition (EE) Build the Web application (see Http://java.sun.com/developer/releases/petstore for details).
The Java pet Store is a well-known reference application in the industry (pet store and.) NET and Flash versions). For the following two reasons, it becomes the perfect case for adding an AJAX-based RIA front-end to the Java EE application:
The Java Pet Store is a complete Web application.
The purpose of Sun Design Pet Store is to demonstrate all the common Web application features. By using the pet store as a case, I can explain all aspects of adding the RIA layer to the Java EE application.
As a typical online store, it includes the following features:
Browse Product Categories.
Add and remove items from your shopping cart.
Fill out the order form.
Submit the order.
The Java Pet Store has a traditional HTML front-end.
The goal of using RIA front-end is to provide a simpler and more responsive GUI, as well as a generally richer web user experience. I'll show you how to dramatically improve the front-end of your application with backbase RIA technology without making any changes to backend and overall system requirements.
The RIA front end of the Pet store will improve availability in the following ways:
Turn the front end into a single page interface (SPI).
Provides more advanced UI controls, such as modal pop-up menus.
Use visualizations (for example, putting pets in a shopping cart).
More efficient use of the operating area of the computer screen.
RIA Pet Store front end
In this section, I will discuss the improved new pet Store Ria front-end.
The following two screenshot shows improvements to the front end. To get a more intuitive feel for the front end of the Backbase Ria, visit the online demo on http://www.backbase.com/xmlserver, or download the Backbase community version to Http://www.backbase.com/download.
The following two graphs make a visual comparison of the two front-end. Figure 2 shows the original static, multiple-page HTML front end. Figure 3 shows the new Backbase SPI front-end:
Figure 2. Raw HTML Front End
Figure 3. New Backbase Front End
Backbase offers many possibilities for creating a rich, single page Web interface. The following is a list of examples used in pet store.
tabbed single page browsing
In the Web interface, different animal species (dogs, cats, etc.) are represented as different tabs. Clicking on a tab will open the appropriate category to show the pets available for sale.
In the Backbase SPI, you can open a tab without refreshing the page. The BPC requests only the required data from the server, and then updates the client's view. The SPI mechanism can greatly shorten response times, allowing customers to navigate back and forth between categories at their whim.
Active multi-function interface
There are three main features of the interface-category browsing, shopping cart, and page boot history, which are always visible on the interface. As a result, shoppers are always able to view the current contents of a shopping cart or the records of a pet that has recently been seen.
These features are highly synchronized: When browsing a pet, the history is automatically updated to show the pet in the record. When you order a pet, it is added to the shopping cart. All of this happens on one page of the client (for example, you can update parts of the interface without reloading the page).
Smooth visualization of interface changes
When browsing, customers will see a changing interface view. For example, he can sort pets by price and by name. The interface needs to display the updated pet list according to the new order.
In the front end of the Backbase Ria, the previous view was replaced with a new view of the visualization, and the new view showed the end user what was changing. Figure 4 illustrates how to change the order of names into order by price by using a smooth positioning effect:
Figure 4. Permutation and order conversion of category views
Information Bar validation to improve conversion speed
In order to perform the purchase, the purchaser must fill in a form with personal details. Backbase greatly simplifies this purchase process, provides immediate feedback through the client's Information Bar validation, and provides step-by-step guidance and overviews in the process of providing all the data.
Figure 5 shows the verification of the e-mail address InfoBar in the first step of filling out the form. When the purchaser fills in the next column, it provides immediate feedback.
Figure 5. Information Bar Validation-e-mail Bar
Architecture of Backbase RIA Pet store
To enhance the front end of the pet Store (or any other Web application), we will continue to rely on the following two architectural fundamentals:
End users still use a standard Web browser to access the pet Store without adding any plug-ins.
The entire backend, composed of Java EE business logic and data, remains unchanged.
The fact that the existing backend is completely isolated during development and does not change is true for architects and it executives
