What's New in JavaFX 1.2?
Just as in the early days of the Java platform, new releases for JavaFX are coming out in rapid-fire succession. JavaFX 1.0 was released in December 2008, followed quickly by JavaFX 1.1 in February 2009. Now JavaFX 1.2 has hit the street, in time for the JavaOne conference (June 2-5,2009). Besides adding much-anticipated support for Linux and OpenSolaris, JavaFX 1.2 has several new user interface (UI) features worthy of note:
- Improved graphical node layout framework
- New UI Control classes
- New Chart package for creating data charts
- New Alert class for showing simple dialog boxes
This article covers some of these major interface enhancements.
Layout
JavaFX 1.1 provided meager support for node layout on the screen, with Group and Container classes that required the programmer to position each node explicitly. For automatic layout, there were only two classes, HBox and VBox, which laid out the scene graph nodes in horizontal rows and vertical columns, respectively. However, even these two layout classes had limitations; the HBox class always aligned its nodes across the top, whereas VBox aligned all its nodes at left. These limitations have been fixed in JavaFX 1.2. In addition, there are four new layout classes: Flow, Stack, Tile, and ClipView.
The following list summarizes the classes for node layout:
- HBox lays out its contents in a single horizontal row (see Figure 1).
- VBox lays out its contents in a single vertical column (see Figure 2).
- Flow lays out its contents in either a horizontal or vertical flow, wrapping at its geometric boundaries (see Figure 3).
- Stack lays out its contents in a back-to-front stack (see Figure 4).
- Tile lays out its contents in uniformly sized spaces or tiles (see Figure 5).
- ClipView provides a clipped view of its contents, with optional panning (see Figure 6). The underlying node is clipped to the viewable region. If panning is specified, by dragging the mouse within the ClipView the underlying node is moved around the viewable region.
Inherent in the new layout scheme is the addition of new instance variables to govern how a node should be laid out in the available layout space. Each node now has an instance variable called layoutInfo. This variable may contain an instance of the LayoutInfo class that defines the minimum, preferred, and maximum sizes of the node, along with variables for telling the layout manager how the node should be aligned vertically and horizontally within its allocated space. Some layout managers will try to resize the node to fill the allocated space if the node is resizable; others may not. If the resulting node size is smaller than the allocated space, the node will be positioned based on its horizontal or vertical position variables.
If the node's layoutInfo variable is absent, you can define defaults for the positioning of the node on the layout container itself. To illustrate this concept, let's examine the horizontal box example. The HBox class defines an instance variable, nodeVPos, that contains the default vertical position for each of its nodes. By default, this variable is set to javafx.geometry.VPos.TOP, which is the same positioning that the JavaFX 1.1 system forced. However, in JavaFX 1.2, you can set the nodeVPos to TOP (shown in Figure 7), CENTER (Figure 8), or BOTTOM (Figure 9). Notice that the last two rectangles in the node change relative positions in Figures 7-9, because they're shorter than the first two rectangles in the node.
Now, suppose you want the third rectangle (the green one) in the node to always be centered. You can arrange for this positioning by assigning a LayoutInfo instance to the node's layoutInfo variable on the third rectangle. Then set the vertical position variable, vpos, within LayoutInfo. For example (note the relevant coding in bold):
Rectangle { width: 75 height: 75 fill: Color.GREEN stroke: Color.BLACK layoutInfo: LayoutInfo { vpos: VPos.CENTER } }
The results are shown in Figures 10-12. Regardless of the alignment of the other rectangles—top (Figure 10), center (Figure 11), or bottom (Figure 12)—the third (green) rectangle now stays centered.
You can do much more with the new layout classes—even creating your own custom layout! This is exactly what's being done in the open source project JFXtras. This project has several of its own layout containers, such as Grid layout, and the JavaFX version of the MIG Layout developed by Dean Iverson.