Adding visual to your voice

Tomás Müller
May 28, 2009 · 4 min read

Last year I started to develop a 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, canceled, and so on).

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.

Before I start, it was necessary to go back to the Voice Hotel project and make some modifications and improvements in the system architecture, as follows:

  • Added Jersey support to implement RESTful Web Services, offering an 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. Another reason to use RichFaces is to demonstrate one possibility of integration between JavaServer Faces and JavaFX, through Java LiveConnect and Ajax.

My JavaFX application consists of 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.

The intention here is just to show an efficient and interesting way to integrate this two view technologies, 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 the 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 the server by ajax request” where “parameter returned from the 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:

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/


Originally published at tomasmuller.com.br on May 27, 2009.

My Sketchbook

Here you’ll find more information about me and some random…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store