四、如何使用内置的布局面板
JavaFX应用程序支持手动设置UI布局，可以为每个UI元素来设置合适的位置和大小属性，而最简单的方法是充分利用布局面板。JavaFX SDK提供了几个布局容器类，称之为面板，用于轻松创建和管理一些经典的布局，比如行、列、栈等。作为调整后的窗口，布局面板可以根据节点的属性来灵活自动调整位置和大小。
使用JavaFX提供的布局面板如下：
1、BorderPane：
BorderPane布局面板提供了五个区域来放置节点：上下左右中。图1-1显示了布局类型，可以用来创建边框面板，可以灵活调整区域大小。
边框面板可以用于创建顶部经典的工具条，底部状态栏，左端导航栏面板，右边额外信息，中间的工作区。
以下代码为如何在每个区域里创建一个多边形边框面板
Example 1-1 Create a Border Pane
BorderPane layout = new BorderPane();
layout.setTop(new Rectangle(200, 50, Color.DARKCYAN));
layout.setBottom(new Rectangle(200, 50, Color.DARKCYAN));
layout.setCenter(new Rectangle(100, 100, Color.MEDIUMAQUAMARINE));
layout.setLeft(new Rectangle(50, 100, Color.DARKTURQUOISE));
layout.setRight(new Rectangle(50, 100, Color.DARKTURQUOISE));
BorderPane layout = new BorderPane();
layout.setTop(new Rectangle(200, 50, Color.DARKCYAN));
layout.setBottom(new Rectangle(200, 50, Color.DARKCYAN));
layout.setCenter(new Rectangle(100, 100, Color.MEDIUMAQUAMARINE));
layout.setLeft(new Rectangle(50, 100, Color.DARKTURQUOISE));
layout.setRight(new Rectangle(50, 100, Color.DARKTURQUOISE));
2、Hbox
Hbox布局面板提供了一种简单的方法来调整单行中的节点。
Padding属性可以用来设置节点和Hbox面板之间的间距。Spacing属性可以用来管理节点之间的距离。可以调整背景色来调整风格。
以下示例为使用Hbox面板来创建一个工具条，包含两个按钮
Example 1-2 Create an HBox Pane
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);
BorderPane border = new BorderPane();
border.setTop(hbox);
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);
BorderPane border = new BorderPane();
border.setTop(hbox);
3、VBox
VBox布局面板与Hbox布局面板相似。Padding属性可以用来调整节点和VBox面板边缘的间距。Spacing属性用于调整节点之间的间距。
Example 1-3 Create a VBox Pane
VBox vbox = new VBox();
vbox.setPadding(new Insets(10, 10, 10, 10));
vbox.setSpacing(10);
Text title = new Text("Data");
title.setFont(Font.font("Amble CN", FontWeight.BOLD, 14));
vbox.getChildren().add(title);
Text options[] = new Text[] {
new Text(" Sales"),
new Text(" Marketing"),
new Text(" Distribution"),
new Text(" Costs")};
for (int i=0; i<4; i++) {
vbox.getChildren().add(options[i]);
}
border.setLeft(vbox); // Add to BorderPane from Example 1-2
VBox vbox = new VBox();
vbox.setPadding(new Insets(10, 10, 10, 10));
vbox.setSpacing(10);
Text title = new Text("Data");
title.setFont(Font.font("Amble CN", FontWeight.BOLD, 14));
vbox.getChildren().add(title);
Text options[] = new Text[] {
new Text(" Sales"),
new Text(" Marketing"),
new Text(" Distribution"),
new Text(" Costs")};
for (int i=0; i<4; i++) {
vbox.getChildren().add(options[i]);
}
border.setLeft(vbox); // Add to BorderPane from Example 1-2
4、GridPane
GridPane布局面板允许你创建一个灵活的网格，在行列中灵活调整节点的布局。
网格可以按照需要在单元格中灵活放置节点。网格面板适用于创建由行列组成的表格，图1-8显示了网格面板，包含了图标、标题、副标题、文本和饼图。gridLinesVisible属性可以用来显示网格线条，显示行和列。
Example 1-5 Create a Grid Pane
GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(0, 0, 0, 10));
// Category in column 2, row 1
Text category = new Text("Sales:");
category.setFont(Font.font("Tahoma", FontWeight.BOLD, 20));
grid.add(category, 1, 0);
// Title in column 3, row 1
Text chartTitle = new Text("Current Year");
chartTitle.setFont(Font.font("Tahoma", FontWeight.BOLD, 20));
grid.add(chartTitle, 2, 0);
// Subtitle in columns 2-3, row 2
Text chartSubtitle = new Text("Goods and Services");
grid.add(chartSubtitle, 1, 1, 2, 1);
// House icon in column 1, rows 1-2
ImageView imageHouse = new ImageView(
new Image(LayoutSample.class.getResourceAsStream("graphics/house.png")));
grid.add(imageHouse, 0, 0, 1, 2);
// Left label in column 1 (bottom), row 3
Text goodsPercent = new Text("Goods\n80%");
GridPane.setValignment(goodsPercent, VPos.BOTTOM);
grid.add(goodsPercent, 0, 2);
// Chart in columns 2-3, row 3
ImageView imageChart = new ImageView(
new Image(LayoutSample.class.getResourceAsStream("graphics/piechart.png")));
grid.add(imageChart, 1, 2, 2, 1);
// Right label in column 4 (top), row 3
Text servicesPercent = new Text("Services\n20%");
GridPane.setValignment(servicesPercent, VPos.TOP);
grid.add(servicesPercent, 3, 2);
border.setCenter(grid); // Add to BorderPane from Example 1-2
GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(0, 0, 0, 10));
// Category in column 2, row 1
Text category = new Text("Sales:");
category.setFont(Font.font("Tahoma", FontWeight.BOLD, 20));
grid.add(category, 1, 0);
// Title in column 3, row 1
Text chartTitle = new Text("Current Year");
chartTitle.setFont(Font.font("Tahoma", FontWeight.BOLD, 20));
grid.add(chartTitle, 2, 0);
// Subtitle in columns 2-3, row 2
Text chartSubtitle = new Text("Goods and Services");
grid.add(chartSubtitle, 1, 1, 2, 1);
// House icon in column 1, rows 1-2
ImageView imageHouse = new ImageView(
new Image(LayoutSample.class.getResourceAsStream("graphics/house.png")));
grid.add(imageHouse, 0, 0, 1, 2);
// Left label in column 1 (bottom), row 3
Text goodsPercent = new Text("Goods\n80%");
GridPane.setValignment(goodsPercent, VPos.BOTTOM);
grid.add(goodsPercent, 0, 2);
// Chart in columns 2-3, row 3
ImageView imageChart = new ImageView(
new Image(LayoutSample.class.getResourceAsStream("graphics/piechart.png")));
grid.add(imageChart, 1, 2, 2, 1);
// Right label in column 4 (top), row 3
Text servicesPercent = new Text("Services\n20%");
GridPane.setValignment(servicesPercent, VPos.TOP);
grid.add(servicesPercent, 3, 2);
border.setCenter(grid); // Add to BorderPane from Example 1-2
