JavaFX vs. Swing vs. HTML5, Who Wins? – My Interview with Alexander Casall

In November 2015 Dirk Lemmermann (Freelancer) and Alexander Casall of Saxonia Systems had a JavaOne session about JavaFX Real World Applications. The article 20 JavaFX real-world applications summarizes the presentation by showing the applications that they’ve talked about. In addition to providing example applications for the article, I was interviewed by Alexander to get my thoughts on JavaFX and desktop development in general. The interview appears below.

Can you tell us about the highlights when you used JavaFX?

The animated transitions and effects such as blurring or drop shadows make a huge difference in the user experience of the application when implemented properly. These are small details that sometimes get glossed over, but when introduced to an application can create a very polished UI.  The effects and transitions were something that were possible to do with Swing, but it was so painful.  I don’t remember how many times I had to override the paintComponent() method to customize the look of a particular component, but all of this is baked into the JavaFX framework, allowing you to do these things in literally a few lines of code.

What is your general opinion about JavaFX?

Overall I am pleased with JavaFX as a successor to Swing.  The addition of property bindings, which eliminate the need for event listeners in many circumstances helps cut down on some of the code complexity.  I also like the fact that there is a very clear seperation between the model, view, and controller, where the view is FXML, the model can be a collection of JavaFX properties, and the controller utilizes dependency injection to have the UI components passed in.  There are some nice tools for doing JavaFX development, including NetBeans for coding, SceneBuilder as a WYSIWYG design tool and ScenicView to help visual provide information about the application while it is running.

JavaFX, Swing, SWT, HTML5 – Who wins – or better, when to use what?

For a new application I would not consider Swing or SWT, which leaves either JavaFX or HTML5 as the remaining options.  In this case there is not a clear winner, but a set of tradeoffs one needs to consider when making a decision.  With HTML5 you have the advantage of being able to deploy your application across many different platforms (phones, tablets, and Desktops), as well as multiple OSs (Windows, Mac, Linux).  There is also the benefit of a huge development community and large selection of open source tools and frameworks.  The ease of deployment across platforms comes at a cost however, in that you must operate within the constraints that are placed on you by the browser. The amount of time debugging issues across different browsers or OSs is often overlooked or underestimated by teams when deciding whether or not to go the desktop or web app route.  We recently worked on a project where a very large chunk of time had been consumed in order to get a piece of functionality working correctly in IE 9 on Windows.With JavaFX the drawback is that the user has to download and install something to their desktop, which is becoming very old fashioned.  But if this is not an issue, then you are free to develop outside the constraints of the browser and use the full power of the Java language and the eco system that backs it.For applications that are used internally within the company I feel that it makes a lot of sense to deploy these at desktop applications for this reason.  Deployments are not an issue in this case as we can automatically push out new installations or updates to PCs in our network automatically.  We also bundle a private JRE with the application so we don’t need to worry about which version(s) of Java the user has installed on their PC.

How satisfied are you with the work of Oracle on JavaFX?

Jonathan Giles and his team have been doing great work at Oracle adding improving and enhancing the JavaFX libraries.  That being said, it would be nice if Oracle officially stated what their long term plans are with JavaFX.  When Oracle let go of some of their evangelists (who were big proponents of JavaFX), just before JavaOne it started a rumor mill of what may have been behind the move.  The uncertainty this has created, and lack of official communication from Oracle will likely deter some development teams who may be on the fence about whether they should port legacy Swing application to JavaFX or HTML5. Over time this will potentially affect how large the JavaFX community eventually becomes.

What do you miss in the work with JavaFX?

The amount of 3rd party component libraries (both open source and commercial) that are available for JavaFX is still somewhat limited at this point, but that should change as the JavaFX community continues to grow.

 

twitter: @RobTerpilowski
LinkedIn: Rob Terpilowski

Advertisements

Monitoring Real-Time Commodity Prices using JavaFX, NetBeans RCP, and Camel

Zoi Capital is a commodity investment firm which trades in the commodity futures markets on behalf of clients, with offices in New York and Seattle. We needed an application which could display the commodities we were currently holding as well as show any open profit/loss of our trades in real-time. In addition, we wanted to display the current performance of our trading strategy (named Telio) along with a comparison of the current performance of the S&P 500 stock index as well as the Dow Jones UBS commodity index.

Trades are placed from the Seattle office, but are monitored throughout the day from the New York office, so the application (which would be running in New York) needed a way to stay up to date with the current trades. The application also needed to be aesthetically pleasing as it was planned to put it on a large 50 inch LCD in the reception area of our New York office, where both staff and visitors could view the current trades and statistics in real time.

I had previously written an automated trading application on the NetBeans Rich Client Platform (RCP), where I had created a number of plug-ins, including a plug-in to connect to Interactive Brokers to retrieve real-time market data. Since I already had the plug-ins available in order to connect to a real-time data feed, it seemed a natural choice to also build the Quote Monitor application on the NetBeans RCP as well. Instead of using the existing Swing components however, I opted for JavaFX in order to give the application a polished look.

In order to get the trade information from the Seattle office to the Commodity Monitor application in the New York office, we made use of Camel to facilitate the communication between the 2 offices. The great thing about Camel is that it provides an abstraction layer for the actual communication mechanism between applications. Since the offices are not networked together we made use of the Camel email component in order to transfer the data from the Seattle office to the Commodity Monitor application. In the future we could move the communication mechanism to web services or JMS simply by changing a property file, with no code changes required as camel takes care of everything else under the hood.


System Architecture

enter image description here

Trades are placed in the Seattle office, and then emailed to a designated email box which the Commodity Monitor watches (via Camel). Trade information is then imported into the application, at which point it requests real-time quote information of the commodities from Interactive Brokers via their Java API. At this point the application can then update the profit/loss statistics in real-time.


Application Screen Shot

enter image description here

The grid in the top left portion of the screen displays the performance for our Telio trading strategy for today, for the month of August, and then the year-to-date return of the strategy. The table also shows the same statistics for the S&P 500 stock index and Dow Jones/UBS commodity index for comparison purposes.

Below the table is a candlestick chart displaying the performance of the S&P 500 Index futures for the current day. The chart made use of the charting API in JavaFX as well as CSS. The chart is updated in real-time throughout the day.

Finally, on the right half of the screen is a panel which displays the commodities that we are currently holding with current profit/loss on the trade. For example, we have a current profit of +0.18% since we bought natural gas.

To add additional eye candy to the application, I created a scrolling background with a slightly blurred Zoi Capital logo. The animation was extremely easy to set up in JavaFX, and I’ll post a short how-to blog on animations in the not-too-distant future.


Demo Video

Below is a 3 minute video demo showing the Commodity Monitor application with the animated scrolling background. About 40 seconds into the video an email is sent to the Camel email box, at which point the Commodity Monitor picks up the email and displays the commodities that were sent, and their corresponding profit/loss in real time. Another email is sent at the 2:10 mark that clears most of the commodities from the application.

 

twitter: @RobTerpilowski

My Interview with TechTarget.com on JavaFX, Swing, and the NetBeans Rich Client Platform

I sat down with Jan Stafford of Tech Target at JavaOne in September and discussed our experiences with beginning to migrate to JavaFX from Swing while continuing to use the NetBeans Rich Client Platform (RCP) as the foundation for our application.

I discuss some of the pros of using JavaFX and the NetBeans RCP, such as having the ability to develop very polished looking components using effects such as drop shadows, reflections, and gradients  which may have been do-able in Swing, but were extremely painful and time consuming.  These effects however are baked into the JavaFX framework.

The largest negative at this point has been the learning curve with getting up to speed on Cascading Style Sheets.  Since much of the look and feel of the UI can be applied via CSS, it took a bit of work to learn how to use the style sheets to properly style the UI components.  However, the benefit to using CSS is that the work can be given to a UX/UI developer rather than a Java developer, thus truly decoupling the UI development from the business logic development.

A link to the interview on Tech Target’s website is below.

Interview with Tech Target: JavaFX beats Swing: Changing RIA development platform

techTargetInterview

twitter: @RobTerp

JavaFX is Eye Candy and I Have a Sweet Tooth. (Another Extreme UI Makeover)

In a previous article I showed a redesigned user interface for our Freight Management System (FMS) application using JavaFX as we begin to migrate away from Swing.  We are continuing to design screens for new functionality in FMS, and in this article I will illustrate a makeover I implemented for this new screen using JavaFX, which we had originally had planned to use Swing when the UI was first designed.

The screenshot below shows the original wireframe mock-up of what will be the new “VFC Recovery” screen within our Inbound Planning module of the FMS application.  This module will be used by our warehouse planning personel to display all “Trips” that will be arriving at their terminal.  A trip could be an incoming truck, ship, rail, or flight which has freight destined for the terminal.  On this screen, inbound planners in our warehouses will have the ability to see these incoming trips by arrival date and time.  This is the first layer of nested tables on this tab.  The next layer of tables below the arrival date, is reserved for each trip.  ie in the example below “TOTE*11027” is a ship which is scheduled to arrive on 07-18-12 08:00.  Expanding the trip table, will show the next level of tables, which are the plans for the freight once it arrives at the terminal.  Expanding this table then would show all the shipping containers (called VFCs) that the inbound planners have assigned to their plans, and finally, the VFC rows in this table can be expanded one last time to display all the shipments within the specified container.  As can be seen, the amount of data displayed to the user can get overwhelming pretty quickly.

image
Wireframe mock-up of VFC Recovery screen

The first step in a makeover of the VFC Recovery screen was to try to separate the data in a way that was intuitive for the users to navigate while also giving them the information they need to make their planning decisions.  Below is a picture of what was designed during a whiteboard session.  The inbound trips to the Lynden Transport terminal (Anchorage in this case), would be displayed in a table in the top portion of the screen.  The table would contain a summary of information related to the incoming trip, such as the mode of travel (ie truck, rail, barge, etc), as well as the origin of the trip, and anticipated date/time of the arrival.  The user could select a trip in this table, and the details of the trip would be displayed in a section below the table.  The details section would contain additional information about the trip, as well as contain an “Accordion” component which would have a separate section for each Plan that the inbound planners would be putting together.  The user could then expand one of these sections to view details on all of the containers that had been assigned to a particular plan.

RecoveryDrawingUI
Results of UI design whiteboard session

Once again I used the JavaFX design tool, Scene Builder to construct the new user interface.  In addition, I wanted to make use of the open source JavaFX components that are part of the JFXtras project, which are located here.  Components that are in the JFXtras project unfortunately can’t be added to the component palette in Scene Builder, but it was still easy enough to manually add them to the FXML code that Scene Builder generates, at which point Scene Builder will display them in the application’s UI as if they had been part of the component palette.  (Exactly how I accomplished this could be a future blog post.)

Below is a screenshot of the new UI for the VFC Recovery tab.  I took a bit of inspiration from what I had seen at Grand Central Station in New York, with my goal to make the trip arrivals portion of the UI look something like what you may see in an airport or train station. Two components in the JFXtras library were perfect for this task.  I used the DotMatrixSegment component to create the arrival board’s column headers as well as display the terminal where the trips were arriving at, in this case Anchorage.  I then used the Splitflap component to display the actual summary data about the trip, including arrival date/time, the trip ID, the origin and also the mode.  I found a nice brushed metal background, and used inner and drop shadows to give the board a sense of depth. In the screen shot below, the trip that the user had selected is highlighted by giving the row a green background.

The details section below the arrival board is formatted in a similar fashion to the table found in the previous article’s JavaFX makeover.  I used CSS to create the gradients, rounded corners, borders, background, etc for the section header, accordion component, and data table.

image
JavaFX Mock of VFC Recovery Screen

As mentioned in my previous article, this screen will still reside as a TopComponent within a NetBeans RCP application which will manage our other freight management modules that we will be designing with JavaFX as the UI toolkit.

twitter: @RobTerp

Freight Management System on NetBeans Rich Client Platform

Lynden is a family of transportation and logistics companies specialized in shipping to Alaska [1] and other locations worldwide. Over land, on the water, in the air – or in any combination – Lynden has been helping customers solve transportation problems for over a century.

The Lynden Freight Management System is a NetBeans Platform application [2] which serves a dual purpose as both a planning and freight tracking tool.

  • The Planning module allows terminal managers to see all freight that is currently inbound to their location as well as freight that is scheduled to depart from their location so they can make the most efficient use of their dock space and resources as possible.
  • The Trace module allows customer service personnel to search for customer account information, view the tracking history of any given freight item in the system as well as display any documents related to the shipment, such as bills of lading or delivery receipts.

NetBeans Platform

Lynden has benefited from the NetBeans Platform as it allows developers to focus on the business logic of our applications rather than the underlying “plumbing”.  We are able to leverage built-in support for event handling, enable/disable functionality on UI controls, dockable windows, and automatic updates for our application with minimal work compared to rolling our own framework.

We chose to go the desktop application route as we have a number of existing desktop applications that this application will need to interface with, as well as a commercial set of rich UI components that we have been using for some time now. For the initial deployment, we will be pushing the application installer out to employees PCs via the Landesk remote desktop administration tool.  Future updates to various modules within the application will be done via the update center functionality built into the NetBeans Platform.

Screenshots