Cars Online Part 1 - Introduction to the Simple web frontend
By The Old Toxophilist on Feb 03, 2010
Whilst working closely with the UK Pre-Sales team building a new
version of their Cars Online demo it seemed a good time to document
some processes and strategy used within the team to build the new demo.
This new version of the demo is built primarily on the GlassFish ESB
2.2 platform and will be designed to leverage existing interfaces but
ultimately replace them, where appropriate, with pure GlassFish ESB
In essence this blog entry will be the first in a trail of entries
based around the new Cars Online demonstration that takes the reader
through the build and integrations and some of the design patterns
used. I expect to show how the solution can interface with a number is
different interfaces and hopefully we will also be able to show the
same external implementations running on differing application servers.
Therefore this first entry will give an overview of the Cars Online
Demonstration and introduce the radically updated web application which
now conforms with the Look & Feel seen in the BPEL
Monitor and an associated IEP backed BAM Application.
The original Cars Online Demonstration was built using the SeeBeyond
ICAN product set and has since been updated to run on the JavaCAPS 6
platform. With the advent of GlassFish ESB 2.2 and some spare cycles it
was decided that we should try and build a new primarily GlassFish ESB
based version leveraging the available functionality and flexibility.
The Cars Online Demonstration is a fictitious car dealership sales application that allows the sales person to select and configure a vehicle and then generate a guaranteed delivery date based on a real-time feed generating delivery time for each of the features required (Body, Engine, Exterior and Interior). Once the car has been configured the salesperson will then be able to enter the customer details and /or search for them in case they have had dealings before. The search functionality backing the Cars Online demo is linked to the Sun MDM solution which provides a single customer view of all the customer data. Having finally entered the customers data and moved onto the financial arrangements the order is placed and the customer emailed.
The existing Web Application is built using the NetBeans 6.1 Visual
Web Pack components (Faces) available within the JavaCAPS 6 product and
used AJAX and Web Services to retrieve and process the displayed
information. This provided a server dependent implementation with the
majority of the functionality implemented in Java.
Because Visual Web Pack is no-longer a key part of the NetBeans
6.7.1 platform shipped with GlassFish ESB 2.2 it was decided to build a
running on a lightweight
Web Server (Apache / Tomcat)
rather than an Application Server. This therefore provides an extremely
& Page Fragments and JQuery to theme
(the simple drop-down at the bottom of the screen allows for quick
Because of the lightweight nature of the
front-end implementation we could easily run the pages on their own Web
Server, running in a DMZ, and interface to a GlassFish instance to do
the heavy lifting but given that these will be used for
demonstration purposes it is deployed on the same GlassFish instance as
its backing Servlets and ESB functionality.
Page 1 - Your Car
Page 1 provides the user with the ability to select the manufacture,
model and body style of the car to be sold. This now uses Ajax and
JQuery to update the drop-down on the fly without the need to refresh
or process the page. Once the car has been selected the various Engine,
Exterior, Interior, Wheels, Packages and Options tabs are built, again
using Ajax, without the need to post anything to the server or refresh
the page. Thus the user can freely navigate around the screen and
change the options .
It can be seen from the image below that the page now links directly
into the BAM results generated using the GlassFish IEP processing
engine and provides a quick indication of the number of day to deliver
the cars with a specific Engine size. Switching between tabs will
provide the user with the appropriate information on delivery for
that tab. Simply clicking the "Get Delivery Date" will generate a
Delivery date based on the IEP results of all the chosen options
(Engine, Exterior, Interior etc).
As you would expect selecting any of the chargeable options will
calculate the price and again this is front-end based rather than
Page 2 - Your Details
Page 2 allows the user to enter the Customers details or as many of
those details as are known and then Search the MDM to identify if the
Customer has done any business with them or their Group previously. If
the information provided returns a single result them all fields will
be populated otherwise a score will be displayed to the user and they
will need to enter additional information. The address fields provide a
simple simple Data Mashup functionality integration the data retrieved
from MDM with Google Maps which also provides simple address look-ups
using a point and click solution (i.e. just click the Google Map and it
will populate the address fields as best it can).
Page 3 - Payment Terms
Once the user has selected the car and entered the customer details
Page 3 will summarise the information and allow the entry of discount
and payment information. If Finance is chosen then the user is able to
check that the deposit specified is ok. This is achieved by running a
simple Credit Check process on the application server. Once these
details have been enter the user can proceed to the final Quote Screen.
Page 4 - Quote
Page 4 simply summarises the information entered and allows the user
to place the order which will initiate the main Bussiness Process for
ordering the selected car.
The exact functionality provided by each of the Business Processes
called from the application will be discussed in future blog entries
within this trail along with some of the design criteria used to