DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Software Design and Architecture
  3. Cloud Architecture
  4. Extreme UI Makeover, JavaFX Edition

Extreme UI Makeover, JavaFX Edition

Rob Terpilowski user avatar by
Rob Terpilowski
·
Nov. 01, 12 · Interview
Like (0)
Save
Tweet
Share
8.59K Views

Join the DZone community and get the full member experience.

Join For Free

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.

image

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.

image

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.

image

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.

image

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

image

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.

Database Container JavaFX

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • The Role of Data Governance in Data Strategy: Part II
  • 2023 Software Testing Trends: A Look Ahead at the Industry's Future
  • How To Use Terraform to Provision an AWS EC2 Instance
  • Choosing the Best Cloud Provider for Hosting DevOps Tools

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: