1-2 Working with Layouts in JavaFX. Figure 1–1 Sample Border Pane. A border
pane is useful for the classic look of a tool bar at the top, a status bar at the.
JavaFX Working with Layouts in JavaFX Release 2.1 E20476-05
June 2013 Learn how to use the Layout API and built-in layout panes to lay out the interface for your JavaFX application.
JavaFX Working with Layouts in JavaFX, Release 2.1 E20476-05 Copyright © 2011, 2013, Oracle and/or its affiliates. All rights reserved. Primary Author:
Joni Gordon
This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited. The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing. If this is software or related documentation that is delivered to the U.S. Government or anyone licensing it on behalf of the U.S. Government, the following notice is applicable: U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, delivered to U.S. Government end users are "commercial computer software" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, use, duplication, disclosure, modification, and adaptation of the programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, shall be subject to license terms and license restrictions applicable to the programs. No other rights are granted to the U.S. Government. This software or hardware is developed for general use in a variety of information management applications. It is not developed or intended for use in any inherently dangerous applications, including applications that may create a risk of personal injury. If you use this software or hardware in dangerous applications, then you shall be responsible to take all appropriate fail-safe, backup, redundancy, and other measures to ensure its safe use. Oracle Corporation and its affiliates disclaim any liability for any damages caused by use of this software or hardware in dangerous applications. Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners. Intel and Intel Xeon are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks are used under license and are trademarks or registered trademarks of SPARC International, Inc. AMD, Opteron, the AMD logo, and the AMD Opteron logo are trademarks or registered trademarks of Advanced Micro Devices. UNIX is a registered trademark of The Open Group. This software or hardware and documentation may provide access to or information on content, products, and services from third parties. Oracle Corporation and its affiliates are not responsible for and expressly disclaim all warranties of any kind with respect to third-party content, products, and services. Oracle Corporation and its affiliates will not be responsible for any loss, costs, or damages incurred due to your access to or use of third-party content, products, or services.
Contents Part I
About This Tutorial
1 Using Built-in Layout Panes BorderPane................................................................................................................................................. 1-1 HBox............................................................................................................................................................ 1-3 VBox............................................................................................................................................................ 1-4 StackPane ................................................................................................................................................... 1-5 GridPane .................................................................................................................................................... 1-6 FlowPane.................................................................................................................................................... 1-8 TilePane................................................................................................................................................... 1-10 AnchorPane ............................................................................................................................................ 1-11 Additional Resources ........................................................................................................................... 1-13
2
Tips for Sizing and Aligning Nodes Sizing Nodes ............................................................................................................................................. Making Buttons the Same Size ......................................................................................................... Using a VBox ............................................................................................................................... Using a TilePane.......................................................................................................................... Keeping Nodes at Their Preferred Size........................................................................................... Preventing Resizing ........................................................................................................................... Aligning Content...................................................................................................................................... Centering the Grid ............................................................................................................................. Aligning Controls in the Columns .................................................................................................. Centering the Buttons........................................................................................................................ Additional Resources ..............................................................................................................................
2-1 2-3 2-3 2-4 2-5 2-5 2-6 2-8 2-8 2-8 2-9
3 Styling Layout Panes with CSS Creating Style Definitions...................................................................................................................... Style Properties for Layout Panes.................................................................................................... Assigning a Style Sheet to the Scene ............................................................................................... Styling the Layout Sample ..................................................................................................................... Defining a Style for Shared Properties............................................................................................ Styling the Border Pane..................................................................................................................... Styling the HBox Panes ..................................................................................................................... Styling the VBox Pane .......................................................................................................................
3-2 3-3 3-3 3-3 3-3 3-4 3-4 3-5
iii
Styling the Stack Pane........................................................................................................................ Styling the Grid Pane......................................................................................................................... Styling the Flow Pane or Tile Pane .................................................................................................. Styling the Anchor Pane.................................................................................................................... Using a Background Image .................................................................................................................... Additional Resources ..............................................................................................................................
iv
3-5 3-5 3-6 3-6 3-7 3-8
Part I Part I
About This Tutorial
The JavaFX SDK provides layout panes that support several different styles of layouts. This tutorial provides information on using these panes to create graphical user interfaces for your JavaFX applications. An intermediate level of Java language programming skills is assumed. This tutorial contains the following topics: ■
■
■
Using Built-in Layout Panes - Describes the built-in layout panes and provides an example of each pane. Tips for Sizing and Aligning Nodes - Provides examples of overriding the default size and position of nodes. Styling Layout Panes with CSS - Describes how to customize layout panes using CSS.
Expand the Table of Contents in the sidebar for a more detailed list of topics.
1 Using Built-in Layout Panes
1
This topic describes the layout container classes, called panes, that are available with the JavaFX SDK. Use layout panes to easily manage the user interface for your JavaFX application. A JavaFX application can manually lay out the UI by setting the position and size properties for each UI element. However, an easier option is to make use of layout panes. The JavaFX SDK provides several layout panes for the easy setup and management of classic layouts such as rows, columns, stacks, tiles, and others. As a window is resized, the layout pane automatically repositions and resizes the nodes that it contains according to the properties for the nodes. This topic provides an overview and a simple example of each of the layout panes provided by the JavaFX layout package. The LayoutSample.java file contains the source code for the UI built in this topic. The LayoutSample.zip file contains the NetBeans IDE project for the sample application.
BorderPane The BorderPane layout pane provides five regions in which to place nodes: top, bottom, left, right, and center. Figure 1–1 shows the type of layout that you can create with a border pane. The regions can be any size. If your application does not need one of the regions, you do not need to define it and no space is allocated for it.
Using Built-in Layout Panes
1-1
BorderPane
Figure 1–1 Sample Border Pane
A border pane is useful for the classic look of a tool bar at the top, a status bar at the bottom, a navigation panel on the left, additional information on the right, and a working area in the center. If the window is larger than the space needed for the contents of each region, the extra space is given to the center region by default. If the window is smaller than the space needed for the contents of each region, the regions might overlap. The overlap is determined by the order in which the regions are set. For example, if the regions are set in the order of left, bottom, and right, when the window is made smaller, the bottom region overlaps the left region and the right region overlaps the bottom region. If set in the order of left, right, and bottom, when the window is made smaller, the bottom region overlaps both the left and right regions. Example 1–1 shows the code for creating the border pane that is used for the UI that is built by the Layout Sample application. The methods that create the layout panes used in each region are described in the remaining sections of this topic. Example 1–1 Create a Border Pane BorderPane border = new BorderPane(); HBox hbox = addHBox() border.setTop(hbox); border.setLeft(addVBox()); addStackPane(hbox); // Add stack to HBox in top region border.setCenter(addGridPane()); border.setRight(addFlowPane());
1-2 Working with Layouts in JavaFX
HBox
Note that the bottom region of the border pane is not used in this sample. If you want to add something to the bottom region, use the following statement and replace node with the control of your choice: border.setBottom(node);
HBox The HBox layout pane provides an easy way for arranging a series of nodes in a single row. Figure 1–2 shows an example of an HBox pane. Figure 1–2 Sample HBox Pane
The padding property can be set to manage the distance between the nodes and the edges of the HBox pane. Spacing can be set to manage the distance between the nodes. The style can be set to change the background color. Example 1–2 creates an HBox pane for a tool bar that contains two buttons. Example 1–2 Create an HBox Pane public HBox addHBox() { HBox hbox = new HBox(); hbox.setPadding(new Insets(15, 12, 15, 12)); hbox.setSpacing(10); hbox.setStyle("-fx-background-color: #336699;"); Button buttonCurrent = new Button("Current"); buttonCurrent.setPrefSize(100, 20); Button buttonProjected = new Button("Projected"); buttonProjected.setPrefSize(100, 20); hbox.getChildren().addAll(buttonCurrent, buttonProjected); return hbox; }
The setTop() method in Example 1–1 adds the HBox pane to the top region of the border pane. The result is shown in Figure 1–3.
Using Built-in Layout Panes
1-3
VBox
Figure 1–3 HBox Pane in a Border Pane
VBox The VBox layout pane is similar to the HBox layout pane, except that the nodes are arranged in a single column. Figure 1–4 shows an example of a VBox pane. Figure 1–4 Sample VBox Pane
The padding property can be set to manage the distance between the nodes and the edges of the VBox pane. Spacing can be set to manage the distance between the nodes. Margins can be set to add additional space around individual controls. Example 1–3 creates a VBox pane for a list of options. Example 1–3 Create a VBox Pane public VBox addVBox(); { VBox vbox = new VBox(); vbox.setPadding(new Insets(10)); vbox.setSpacing(8); Text title = new Text("Data"); title.setFont(Font.font("Arial", FontWeight.BOLD, 14)); vbox.getChildren().add(title);
1-4 Working with Layouts in JavaFX
StackPane
Hyperlink options[] = new Hyperlink[] { new Hyperlink("Sales"), new Hyperlink("Marketing"), new Hyperlink("Distribution"), new Hyperlink("Costs")}; for (int i=0; i
