Working with JavaFX UI Layouts

UI layouts form the basis of an interface design wherein we generally place controls in a manner so that overall interface have a consistent look. Most GUI frameworks provide some sort of a support in the form of APIs to manage layouts irrespective of any programming language. JavaFX is no exception. It has a rich set of layouts that can be availed to leverage the richness and consistency of looks in the interface design.

JavaFX UI Layouts

Choosing the right layout forms the basis of UI design. The layout forms the work area where we basically place the UI controls. Imagine an empty wall; if we are to hang our favorite paintings, posters, a wall clock, and so forth, we need lay them out in a specific fashion such as horizontally, vertically in a tabular form, and the like. Each of these forms is actually a layout of a particular kind. The name layout suggests its type and how the specific layout will lay out the elements. However, laying out elements on an empty wall is simple because the arrangement is static. But, the layout in the display area of a computer is more complex. Here, the arrangement is dynamic because the elements are scaled dynamically according to the screen resolution or window resizing. Therefore, managing the layout of a UI has a lot of constraints associated with it; these constraints need to be addressed before giving a consistent look and feel. Fortunately, the APIs provided by JavaFX do most of the hard work and we can almost do away with them by setting bare minimum parameters. But, before getting into that, let's see five of the most commonly used JavaFX layout classes.

Layout

Description

javafx.scene.layout.HBox

Lays out controls horizontally

javafx.scene.layout.Vbox

Lays out controls vertically

javafx.scene.layout.FlowPane

Lays out controls in a horizontal flow, wrapping nodes when space is needed

javafx.scene.layout.BorderPane

Lays out controls in the following positions: top, bottom, left, right, and center

javafx.scene.layout.GridPane

Lays out controls in a grid or tabular structure

Note:

This article uses plain and simple Java code to design the interface. There are other ways to design a JavaFX interface, such as using FXML. Also, there is designer software called JavaFX Scene Builder, which makes designing complex user interfaces quick and easy. The scribe believes that if one is familiar with designing an interface in hard Java code, learning other forms of interface design is almost a walk in the park. So, here we'll focus mostly on hard-coded interface design.

The examples in this article only show the design aspect of the interface. Actual functionality of it, such as implementing business logic or user input events with respect to the interface, is out of the scope of this article.

The HBox Layout

The HBox lays out controls horizontally in a row. We simply can add one child node at a time with the add() method or choose to add all child nodes with the single method called addAll(). The layout automatically adjusts the space occupied by the nodes according to their sizes. In case the parent node is non-re sizable, such as the Group node, the row size of the layout takes on the size of the greatest child node. Nodes are aligned at the top-left position by default, but they can be changed by the Pos enum constants such as: Pos.TOP_LEFT, Pos.TOP_RIGHT, Pos.LEFT_CENTER, and so forth. Other constraints that can be manipulated are: padding, margin, border, spacing, and the like. Here is a quick example to illustrate the idea.

The VBox Layout

The Vbox layout is very similar to the Hbox layout except that the child nodes are arranged in a vertical column. The parameters and other constraints have a similar effect and can be manipulated like the example code in Listing 1. Here is a quick code snippet to illustrate the idea. Note that the code is almost same as stated in the preceding example.

The FlowPane Layout

The nodes in the FlowPane layout are arranged in a horizontal sequence by default and wrap to the next line when the horizontal space cannot accommodate all the nodes. This flow-based layout can also be furnished in a vertical sequence by setting the orientation property either during instantiation of the layout class or later, through the setOrientation() method. There are many other properties that can be set, such as margin, border, vertical/horizontal gaps between nodes, alignment, wrap length, and so forth. Here is a quick example to illustrate a few of these parameters.

The BorderPane Layout

This is the most commonly used layout of all and, in practice, forms the basis of all other layouts while designing. It segments the display area into five regions: left, top, right, bottom, and center. Each region can hold only one node. Therefore, developers nest other layouts and set them in a particular region. We can set the layout with UI controls as follows.

Output 4: Illustrating nodes set in five regions of a BorderPane layout

The GridPane Layout

The GridPane layout is the most common layout used in constructing user input forms. This is one of the advanced layouts where we can specify row, column, and cell constraints. The structure typically resembles a table where we set nodes as its children. This tabular form can be customized to fit the controls, such as by spanning the column or row, setting up the background, and specifying the gap between rows and columns. With this layout, we can furnish a complex user interface with nesting other layouts. Listing 5 shows how we manipulate the properties to fit our needs.

Output 5: Interface designed using GridPane layouts (this is a kind of interface we see while creating a JavaFX Application in NetBeans)

Conclusion

Undoubtedly, a JavaFX layout in comparison with Swing layouts is a significant improvement over its design. It is not only easy but also seems more intuitive in terms of its implementation. It requires less code and can be quickly set up with the required properties to get a desired format of laying out UI controls. Seemingly, it still lacks the simplicity and elegance provided by QtJambi. QtJambi is Qt C++ Framework's reciprocal to Java GUI development. Although JavaFX is feature rich, the core GUI framework of QtJambi seems to be much better than JavaFX, even though their paradigm of built architecture is entirely different.

IT Solutions Builder
TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD

Which topic are you interested in?

Mobile

Security

Networks/IoT

Cloud

Data Storage

Applications

Development

IT Management

Other

What is your company size?

What is your job title?

What is your job function?

Searching our resource database to find your matches...

Please enable Javascript in your browser, before you post the comment! Now Javascript is disabled.

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.

Thanks for your registration, follow us on our social networks to keep up-to-date