Cars Online Part 8 - A JavaFX Implementation
By The Old Toxophilist on May 14, 2010
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
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
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,
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.
- 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.
- Car Description
- 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 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 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 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, 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.
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.