Cars Online Part 8 - A JavaFX Implementation

As mentioned in previous Blog entries in this series I have been planning to re-develop the Simple Web Application using JavaFX. This Article will explain how I have done this and the video at the end will hopefully give you a feel for what can be done, without any extensive experience, with JavaFX. This redevelopment is a re-skinning of the back-end service and and hence it integrates to the previously built Coherence Solution and in this release the GlassFish ESB Web Services (although these will be replaced). The net result is that both solution will run together although the simple Web interface will not access the Gallery Functionality.

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

Overview


The JavaFX implementation was build and designed to run as a stand-alone application and hence I did not look into the Mobile functionality of JavaFX. Instead I simply looked at Skinning the backend functionality with an alternative GUI. You will notice that the screens have a different layout to those built in my first blog entry of the series "Cars Online Part 1 - Introduction to the Simple web frontend" replacing the simple web images with a Media wall displaying multiple images and videos which I decided to serve from a web application although the videos can be streamed directly from the manufactures, Aston Martin, web site. The use of the Media Wall allowed me to change the layout of the screen to provided data entry / selection at the top whilst allowing the user to view the car whenever they wanted.

Java FX Pages


I will briefly discuss the 4 pages that have been translated to the JavaFX layout before discussing the code behind the application.

It should be noted that all prices, accessories, etc are completely fictional.

Page1 - Your Car

The first page in the application allows the user to select the Make / Model / Body Style of the vehicle and then further configure the engine, exterior, etc. It can be seen from the image below that the page is essentially split into 3 areas.

  1. Car Selection - Allows Selection of the car with dynamically updated list boxes. Selecting the Get Delivery Date button will execute the existing Web Service described in previous entries.
  2. Car Description
  3. Additional Configuration Tables

In addition to these page specific regions you can see the common Media Wall (based on the standard JavaFX Tutorials) that displays a number of image and video thumbnails. On selection of one of these the Media Wall will cause the full size image to be displayed.

Page 1
Full Size

Page 2 - Your Details

The Your Details page, below, allows the user to enter their information and is a simplified version of the Web Interface. I have chosen to remove the Search button because in the next blog I will not but migrating the Search Process. Instead we assume the user know who they are although the page still has its integration to Google Maps. As you can see although the page changes the Media Wall is still available.

Page 2

Page 3 - Payment Terms

The Payment Terms page simply displays a summary of the previously entered information and allows the Sales Representative to apply a number of discounts and dynamically update the price.

Page 3

Page 4 - Quote

The Quote page is now simply a summary of all the information previously entered giving a full list of all the previously entered information and on agreement the user has the option to place the order which will execute the existing Web Service and Business Process.

JavaFX Code

NodesThe JavaFX code, although extensive, is quite simple we have the standard controlling Main.fx, below, and a number of sub nodes to display appropriate information / elements. You will note from the code below that I have created a number of commons re-usable elements that allow for rapid development.

The main.fx below defines the Header, Button Bar and Footer components and then based on the selection from the button bar will display one of the four pages.

  1. CarSelectionNode
  2. CustomerDetailsNode
  3. PaymentTermsNode
  4. QuoteNode

You will notice that all the control methods are executed as part of the main process and the function references passed to the various sub node. This allows for the sub nodes to be kept simple and hence are not required to understand the processing that is to be executed when the button / action is executed. This is particularly relevant for the WallNode that is required to be able to Show, Replace and Hide the media it is displaying.

In addition to this the Main.fx controls the Timelines associated with the changing images, in the Header, and the execution of the Web Services via a Java Facade.


JavaFX Cars Online In Action


This short Video shows the enhance UI provided by JavaFX in action.

Video
Comments:

Andrew ... GREAT user interface for CarsOnline. You'll be -again- the designer for my next demonstrator. Love this !

Posted by Rik De Deyn on June 29, 2010 at 04:11 AM GMT #

Thanks for such a wonderful article could you please share Node files like Header Node,wall node etc...

Posted by Manoj on November 04, 2010 at 12:07 PM GMT #

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
« May 2015
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
31
       
Today