Last year I started to develop an hotel booking application called Voice Hotel. The word Voice was used in the name because the user interface with all features offered by the system is through the voice. It was missing an interface for viewing the reservations made, and the situation of each one (confirmed or canceled).
This year I decided to study JavaFX language for developing an initial prototype for this interface, where it should at least allows visualizing existing reservations and the new reservations in real time.
To start this development, it was necessary to go back to Voice Hotel project and make some modifications and improvements in the system architecture, as follows the list below:
- Added Jersery support to implement RESTful Web Services, offering a interface to communicate and exchange information with JavaFX application.
- Jersey Spring contribution to use Spring Framework beans through dependency injection using annotations in the RESTful services.
- Updated Spring Framework to 2.5.6. Now using annotations to configure Spring beans and cut xml code when possible. Added DelegatingVariableResolver in faces-config.xml variable-resolver configuration, to use Spring beans as JavaServer Faces managed-beans.
- JavaServer Faces, RichFaces and Facelets to develop a rich user interface, where the JavaFX application will be available. Other reason to use RichFaces is to demonstrate one possibility of integration between JavaServer Faces and JavaFX, through Java LiveConnect and Ajax.
The Application
My JavaFX application consists in a data table, with all reservations information. All data is retrieved from the database used by Voice Hotel application, through a RESTful web service.
To display data, it was used a Swing JTable component, one PullParser implementation to interpret returned data from the web service and a bi-directional bind to update data in the table component.
If you want a little more information about this powerful JavaFX language feature – data-binding and triggers – I recommend reading these slides.
For asynchronous communication between JavaFX and the Web service, it was implemented a class that defines a task to update the data and that must be run on a fixed interval of time. This way any user interaction with the Voice Hotel system appears automatically after the end of the respective transaction.
JavaServer Faces integration
The intention here is just to show up a way to integrate this two view technologies in a efficiently and interesting manner, using Java LiveConnect, available only in JavaSE 6u12 and above, and Ajax request, sending an attribute from the managed-bean for the JavaFX application.
Using RichFaces component library, we have access to a4j:jsFunction and a4j:commandButton components.
Let’s see:
With the a4j:commandButton component we set in the action attribute a method of the managed-bean that should be performed in the Ajax request. This method can perform any processing on the server, databases, and so on, and update the objects that you want to send to the JavaFX application. For this demonstration, the method executed only assigns a value for the string object “testParameter”.
The trick is done through the use of oncomplete attribute that performs a call, when the Ajax request is completed, to the javascript function defined with a4j:jsFunction component as explained below.
a4j:commandButton value=”Reset grid data”
action=”#{reservationList.searchParameter}”
oncomplete=”searchParameter();”
We define a javascript function with the a4j:jsFunction component, indicating in the data attribute which managed-bean attribute will be sent by parameter to the JavaFX application.
a4j:jsFunction name=”searchParameter”
data=”#{reservationList.testParameter}”
oncomplete=”sendParameterToJavaFX(data);”
Continuing, the sendParameterToJavaFX function is performed, getting the JavaFX application by id (“app”), and sending the value of the managed-bean object as a parameter value to the JavaFX function (“resetGridData” in this case).
function sendParameterToJavaFX(parameter) {
try {
var dataGrid = document.getElementById(“app”);
dataGrid.script.resetGridData(parameter);
} catch (e) {
reportException(e);
}
}
JavaFX application at JSF page:
javafx(
{
archive: “javafx/VoiceHotelFXViewer.jar”,
draggable: true,
width: 800,
height: 240,
code: “net.java.dev.voicehotel.viewer.Main”,
name: “VoiceHotelFXViewer”,
id: “app”
}
);
This sequence is performed by clicking the “Reset grid data” button (the a4j:commandButton). Looking at the java webstart console the following message appears: “parameter received from ajax request: parameter returned from server by ajax request” where “parameter returned from server by ajax request” is the value of the String object of the managed-bean used for this demonstration.
With this demo we can think, for example in a rich JavaFX component library for JavaServer Faces applications. Why not? For more information about Java LiveConnect see:
https://jdk6.dev.java.net/plugin2/liveconnect/
http://java.sun.com/products/plugin/1.3/docs/jsobject.html
https://developer.mozilla.org/en/LiveConnect
https://developer.mozilla.org/En/Core_JavaScript_1.5_Guide:LiveConnect_Overview
Conclusion
JavaFX is a powerful scripting language that can be used to develop and deploy rich user experiences, where the same application can be used in different environments, from cell phones to desktops. The integration between JavaFX and JRE in desktop applications and between JavaME in mobile devices, offers a great advantage by reducing the learning curve and reusing existing knowledge over these platforms.
You can check the final JavaFX application here:
http://inf.unisc.br/tmuller/view/home.jsf
The VoiceHotel project is available here:
https://voicehotel.dev.java.net/
To test the application make a free call using Skype Voip to the following number: +99000936 9996079911, and make a reservation. When the reservation process finish you will see the new reservation on top of the JavaFX data table automatically.
If you want, follow the instructions to deploy locally the VoiceHotel project, and change the URL for the RESTful web service in Main.fx file, to localhost.
The instructions for deploying VoiceHotel can be found here:
https://voicehotel.dev.java.net/source/browse/voicehotel/trunk/artifacts/
Like this:
Like Loading...
Coderwall
Github
Hello people! How much time, isn’t?
Cris 9:10 am on August 6, 2009 Permalink
Congratulations, Tunico! An Honorable Mention has more value then the first prize to me! This boy is a genious!!!!!
David M Young 3:16 am on August 15, 2009 Permalink
Congratulations!