Extreme UI Makeover, JavaFX Edition

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 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.

next proposed version

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 from this wireframe diagram and corresponding workflow is that 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.

makeover with javafx

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 platform application which will manage our other freight management modules that we will be designing with javafx as the ui toolkit as well.