JavaFX – How to Layout

Bookmark and Share

Just thought of providing an outline for design and implementation of JavaFX application. I briefly described this in one of previous post – Custom Layout.To start with we will most likely receive a huge PSD file from designer. You may use Production Suite tools to import the content into JavaFX. Here is manual approach..

First we need to identify various functional areas in the UI. Most likely the UI is already grouped. Areas can be Settings, Authentication, Data-Entry/Update View, ToolBar, Search etc. From this we can identify set of packages to be created in JavaFX. If the UI is simple, we may have the entire UI under “view” package. Now we can breakup the UI in to multiple classes based on the functional area. It will be easier if we could make these classes extend Container or CustomNode. From there we come down to actual layout of Controls..

Given below is the layout used in one of MiG Layout Demos – Layout Showdown. Refer to MiG Layout Site for more information. Refer to JFXtras project for more information on MiG Layout for JavaFX.

We will try to implement this UI in JavaFX…

Now we need to visualize a grid on top of the layout so as to identify some pattern in UI. It will be much easier if we could do this mapping. You may refer to various sites such as Layout Cookbook, RIA Screen Layouts or RIA Screen Design to get some idea..

Once we get the mapping, we can implement the layout using various layoutNode functions in Container. Please refer to PersonalDetailsView.fx source for more information.

To launch click on above image or

Please try it out and let me know feedback..


About Rakesh Menon

4 Responses to JavaFX – How to Layout

  1. Nice post!! Nice code!!

    I use a lot of HBox and VBox to try to make complex layouts. When I saw this image:
    I saw some HBox and some VBox…

    Using HBox and VBox is a wrong way to get this complex layouts? It makes the application slower?

  2. Rakesh Menon says:

    @William Using HBox and VBox is not wrong, but I think if we could visualize a plain grid, then may be Container is better (you have more control). One of the issue I found in many user code is the use of hpos, vpos attributes in HBox & VBox. This becomes a bit unpredictable when used in nested layout (controls tend slightly move around the first time). This many not be good user experience. Also use of Container brings down the number of Nodes and in most cases will provide manageable code. I don’t have real numbers on performance implication, may be need to try implementing same UI using HBox/VBox and Container and compare performance when we re-size the scene.

  3. Pingback: JavaFX links of the week, March 15 // JavaFX News, Demos and Insight // FX Experience

  4. Pingback: Java desktop links of the week, March 15 | Jonathan Giles

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: