We have decided to move forward with JavaFX here at Lynden as we design the next version of our Freight Management System (FMS) application. The initial version of the application was built on the Netbeans Rich Client Platform and will remain so, but we will be moving from the Swing and Jide (Commercial Swing components) component libraries to JavaFX. The first application module that we are looking at tackling is called “Inbound Planning”. This module will be used by warehouse managers at our various terminals to plan how and when to pick up and stage freight that is inbound to their location.
Below is a screenshot of the current FMS application with Planning module that is currently in use. Warehouse managers run a query for their location and a Jide table displays all shipping containers that are inbound to their location. Containers are grouped by destination, with each destination being represented by a row in the table.
Each destination row can then be expanded to reveal a Jide nested table showing all the shipping containers for a particular destination, with each container as a sub row to the destination row. Finally, each container row can then be expanded to show all the shipments within that specific shipping container, for a total of 3 layers of tables. In addition, when a user select a shipment, all the details about that shipment are displayed in a separate table in the lower pane of the UI.
In the next version of the FMS Planning module we will be adding functionality to the application to allow the users to create plans for the incoming containers. The initial wire frame diagram below was created for the new planning module. The purpose of the new functionality is to allow the manager to see all incoming containers separated by mode of transit, i.e. ship, rail, truck, etc. and then plan for the container’s arrival accordingly by assigning it to a “Unit Plan”.
The top level table is represented by transit mode, which can then be expanded to reveal all the incoming trucks, ships, and trains to the user’s location. For example, the user could expand the “Steamship” row which would show a sub-table showing all scheduled incoming barges to that location. The manager would like to ensure that all containers are picked up at the shipyard for an incoming voyage and are properly staged at the warehouse for final delivery to the customer. This could be accomplished by expanding the row for a particular voyage which would display sub rows to group the containers by Full-Load, Consolidation, and Transfer shipments. The user would then expand the appropriate row to see all the containers that fall within one of those three categories. In order to assign the container to a Unit Plan, the user would click the “Update” button on each row which would display a dialog asking the user which plan to assign the container to, at which point the container would disappear from this screen indicating that the container’s arrival had been planned.
The feedback that was received regarding this wireframe diagram and corresponding workflow is that this is an overwhelming amount of data to display to the user. There are 5 levels of nested-tables within this framework and when all are fully expanded it is easy to get lost in the resulting sea of nested rows and columns.
I was tasked with helping to redesign the UI to make the data a bit more manageable for the users as well as provide an efficient means for them to be able to select the containers they are interested in and assign them to the appropriate Unit Plan as well as give them visibility as to which containers still needed to be assigned to a plan.
The result of a whiteboard session appears below. Transit modes would be displayed within a row of buttons at the top of the screen which would also show summary data regarding the number of shipments within each category. The user could then select one of the categories and the data would be displayed in a table in the main portion of the UI. For example, if the user selected “Steamship”, the table below would show tabs on its left side, one for each inbound voyage. When the user selects a voyage, the table would populate with all containers on that voyage that have not yet been assigned to a plan. The tabs would have a progress meter to indicate to the user what percentage of containers on the voyage have been assigned to a plan. An “Accordian” widget would be used to partition the data in the table by container type “Full Load”, “Consolidation” or “Transfer”. Rather than making the user click a button on each row and display a dialog asking which plan the user wanted to assign the container to, the plans are instead shown in a table on the same screen. The user could then select one or more container rows and then drag them directly over to the plan they wanted to assign those containers to, at which point the containers would disappear from the table, and the progress meter for the voyage would be updated to reflect the changes.
With the help of the JavaFX design tool, Scene Builder, I was able to design a mock UI of the new Inbound Planning screen. The screenshot below illustrates the “Steamship” mode selected, which changes the button’s color as well as creates a slight glow around the button.The Tote*55433 voyage has been selected and displays all the “Full Load” containers that have not yet been assigned to a plan, but could be dragged over to one of the plans on the right-side table. The “Sea Land” unit plan is highlighted to illustrated what the table could look like if the user had dragged any containers over to from the voyage table. (Green and gold are Lynden colors, that which is why the choice of this particular palate).
Scene Builder made it extremely easy to add effects such as gradients to the buttons, tabs and unit plan rows to give the components a glossy look. Also, adding the reflections to the buttons along the top row was a very straightforward task as well as creating the translucent rows of the Unit Plan table.
As previously mentioned, the Inbound Planning module 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 as well.
twitter: @RobTerp
Sometimes I thing all the shiny gloss is pointless then I remember how happy I am when a new feature or shiny object is added to eclipse, which is My own day to day tool. It must be massively empowering for end users to have software that looks this good.
Great joooob !!! I do really love your design, nice colors, reflection !! I wish I can come up with something like this by myself !
Thanks guys! Appreciate the feedback!
Pingback: Java desktop links of the week, October 5 | Jonathan Giles
Really really nice. I love it and JavaFX 2.
Thanks Mircea!
Why moving from swing ? Why all those reworks ?
The application as it is now is still in its infancy, with only about 10% of its functionality implemented JavaFX will be able to give us a much more polished application and our users a better experience, which is why we have decided to redesign the current application with JavaFX and then continue with it for all new functionality we will be implementing. In my opinion, JavaFX will be replacing Swing as the UI Toolkit of choice.
Pingback: JavaFX is Eye Candy and I Have a Sweet Tooth. (Another Extreme UI Makeover) | Rob's Blog
I looked at JavaFX when it first came out & then I abandoned it when thing seemed unstable. Only really started looking at it again last week & was pleasantly surprised! Your interface looks amazing, well done!!! One thing that I’ve been battling with is the simple request to right-align numbers in a TableView. It appears to be easy enough, just slap some CSS on it, but it doesn’t have any effect. Ended up with a CellFactory on a String field (instead of numeric/double/float), but then of course it doesn’t sort right when you click on a column… Done a lot of Googling too… I see all your numeric fields are left-aligned, have you found a solution for making numerics right-align?
Since this was a mock screen the data is fictitious and thus the field is currently formatted as a string. As we begin actual development of this screen though, we will need to find a solution to this problem as well.
Thanks for the reply. I’ll let you know if I find an elegant solution.
Not so bad, this should do it:
pricePaidCol.setCellFactory(new Callback() {
public TableCell call(TableColumn p) {
TableCell cell = new TableCell() {
@Override
public void updateItem(Double item, boolean empty) {
super.updateItem(item, empty);
setText(empty ? null : getString());
setGraphic(null);
}
private String getString() {
return getItem() == null ? “” : getItem().toString();
}
};
cell.setStyle(“-fx-alignment: top-right;”);
return cell;
}
});
Awesome! Thanks for following up!
Hi Rob,
I am evaluating Java FX currently for a rework, too. I am also using Jide components for tables. This is the main reason why I still did not yet start. Jide is a very powerful library for tables (filtering, transposing, various table models out of the box) and currently I do not see a similar library that works with Java FX. How have / or will you handle this issue?
Hi Tom,
we haven’t decided yet how we will handle this. We are going to be scheduling meetings with the users of the application to determine if they truly require all the bells and whistles that the Jide table provides. If so, we’ll see if we could embed Swing inside of JavaFX or possible extend the JavaFX table to provide the needed functionality
Swing works on Windows 8, my Enterprise Swing Apps needs very little rework for Windows 8, for touch UI we just make the button a bit bigger and revise the UI workflow to be more intuitif. We did not change the core foundation, it even still connect via JDBC (without web services) though we are currently evaluating of implementing web services. so JavaFX is not a major necessity. Oracle should have just focused on revising and refining Swing to be more flexible toward future applications not trashing it.
I wouldn’t necessarily advocate a complete rewrite of an application from Swing to JavaFX unless you wanted to take advantage of features that are exclusively in the JavaFX framework. Moving forward however, we plan on using JavaFX for any new desktop app or Netbeans modules that we develop.
Hello,
Very good posts, I really appreciate the details (going from business requirements to the javafx Solutions). Thank you for this series.
Today, With you experience in both Netbeans RCP & JavaFX, do you thing that it’s still worthy to go with netbeans RCP for starting a new (large) application and then to apply JavaFX top components ? or it’s more interesting to do it 100% in JavaFX ?
Hi there,
I’m looking at JavaFX as a replacement for the Swing components. Swing itself was not meant to be an application framework, that’s why something like the Netbeans RCP is so useful. JavaFX is also more of a component library than an application framework, so for the current application we are developing, we are still getting value out of the Netbeans RCP even though we have been moving toward JavaFX for the actual UI components. I have heard of some JavaFX application frameworks that are currently being developed, but I’m not sure if any at this point are ready for prime time production use.
Hello,
How did you make the tab pane like that? Using CSS?
Yes, it was using CSS, but they were custom components I built using Panes, and not part of an actual TabbedPane control.