Cars Online Part 1 - Introduction to the Simple web frontend

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

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.

<script type="text/javascript"> $(document).ready(function(){ $("#traildiv").load("../resource/cars-online/CarsOnlineTrail.html"); }); </script>

Overview


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.

Scenario

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.

Web Interface


Existing Interface

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.

New Interface

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 lightweight HTML / JavaScript / AJAX implementation that was capable of running on a lightweight Web Server (Apache / Tomcat) rather than an Application Server. This therefore provides an extremely light weight implementation that uses CSS to control the layout, JavaScript for AJAX & Page Fragments and JQuery to theme (the simple drop-down at the bottom of the screen allows for quick theme changes) and simplify the JavaScript.

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 server implemented.

Page 1

Page 1 Page 1 Page 1 Page 1 Page 1 Page 1

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 2

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 3

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.

Page 4

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 simplify implementation.

Comments:

Post a Comment:
Comments are closed for this entry.
About

As a member of the Oracle A-Team we specialise in enabling and supporting the Oracle Fusion Middleware communities.

Search

Archives
« April 2014
MonTueWedThuFriSatSun
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    
       
Today