java xml界面布局_Java开发笔记（一百四十三）FXML布局的基本格式

前面介绍了JavaFX的常见控件用法，虽然JavaFX控件比起AWT与Swing要好用些，但是一样通过代码编写控件界面，并没有提高什么开发效率。要想浏览界面的展示效果，都必须运行测试程序才能观看，即使只是微调控件的大小，也得重新运行程序查看效果，显然既费时又费力。为此JavaFX提供了另一种给界面排版的方式，不必使用Java代码堆砌控件，而是利用FXML文件开展界面布局，同时借助于idea的预览功能，无需运行程序即可直接观察FXML的布局效果。所谓“FXML”意思是JavaFX专用的XML格式，它基于XML标准并加以扩展，每个JavaFX控件均有对应的XML标签，把这些蕴含控件的标签组装起来，便形成了一个窗口界面专属的布局文件。

举个简单的例子，现在准备画登录界面，包含用户名输入框、密码输入框，以及登录按钮，这些控件自上往下分成三行排列。该界面预期的展示效果如下图所示。

倘若完全使用代码实现以上的登录界面，无疑要反复地调整代码并多次执行程序，才能达到满意的布局效果。那么采用FXML方式的话，可以把与界面相关的控件元素剥离出来，改为在FXML文件中书写XML标签结构。比如上述登录页对应的FXML文件名叫login.fxml，其内容示例如下：

在idea中打开login.fxml，注意到该文件界面的左下角有两个选项卡，一个叫“Text”，另一个叫“Scene Builder”。当前打开的login.fxml展示为文本内容，对应的正是“Text”选项，此时单击右边的“Scene Builder”选项，原先的文本内容迅速变为一组可视化页面，页面中央呈现着login.fxml的预览效果，正如下图所示。

原来fxml文件类似于html文件，尽管html文件内部充斥着各种文本标签，但使用浏览器打开html文件总能看到排版精美的网页；而idea自带的Scene Builder承担了fxml浏览器的角色，只要程序员修改了fxml文件的格式内容，切换至“Scene Builder”选项就能立刻看见修改后的界面效果，比起传统的运行程序看效果的方式，Scene Builder的渲染速度要快得多。

回头再看前述的login.fxml，它的文件内容分为两大块，前面一块形如“<?import ***?>”，其作用是导入指定包名路径的控件，与Java代码的import语句相似；后面一块包含各级控件的嵌套结构，其标签格式为“控件名称>”，如果当前控件不存在下级控件，则它的标签格式可简化为“”。依据login.fxml的标签内容，可知该界面采取FlowPane流式窗格，且流式窗格拥有下列三类控件：

1、容纳用户名组件的水平箱子HBox，它的编号是hbUser。该箱子内部又有编号为labelUser的用户名标签，以及编号为fieldUser的用户名输入框；

2、容纳密码组件的水平箱子HBox，它的标识为hbPassword。该箱子内部又有编号为labelPassword的密码标签，以及编号为fieldPassword的密码输入框；

3、编号为btnLogin的登录按钮；

引入FXML布局之后，Java代码要改为从指定的fxml文件中加载界面，也就是将场景的创建过程改成如下两行代码：

// 从FXML资源文件中加载程序的初始界面

Parent root = FXMLLoader.load(getClass().getResource("login.fxml"));

Scene scene = new Scene(root, 410, 240); // 创建一个场景

于是绘制界面的JavaFX代码缩小到了下面寥寥几行：

//登录窗口的程序入口(FXML布局控件)

public class LoginMain extends Application {

@Override

public void start(Stage stage) throws Exception { // 应用程序开始运行

stage.setTitle("登录窗口"); // 设置舞台的标题

// 从FXML资源文件中加载程序的初始界面

Parent root = FXMLLoader.load(getClass().getResource("login.fxml"));

Scene scene = new Scene(root, 410, 240); // 创建一个场景

stage.setScene(scene); // 设置舞台的场景

stage.setResizable(true); // 设置舞台的尺寸是否允许变化

stage.show(); // 显示舞台

}

public static void main(String[] args) {

launch(args); // 启动JavaFX应用，接下来会跳到start方法

}

}

接着运行上面的LoginMain程序，弹出的登录界面正如预期所示。

JavaFX的绝大多数静态控件，都能以单个标签的形式添加到fxml之中，除了前面例子提及的流式窗格FlowPane、水平箱子HBox、按钮Button、标签Label、文本输入框TextField、密码输入框PasswordField，还包括网格窗格GridPane、边界窗格BorderPane、垂直箱子VBox、多行输入框TextArea、复选框CheckBox、下拉框ComboBox等。然而单选按钮RadioButton的添加方式别具一格，缘由在于好几个单选按钮要构成一个按钮小组，这样才能让同组的单选按钮联动起来。因此fxml得先声明一个ToggleGroup标签，并给它分配标签编号，然后在RadioButton标签后面添加toggleGroup属性，指定加入前一步的ToggleGroup编号。操作单选按钮的具体fxml片段示例如下：

text="密码登录" selected="true" />

text="验证码登录" />

当然，新来的RadioButton和ToggleGroup也要在fxml头部添加以下的导入语句：

把与单选按钮有关的xml标签补充到login.fxml，再另存为新的fxml文件名叫login_with_flow.fxml，完整的文件内容如下所示：

text="密码登录" selected="true" />

text="验证码登录" />

然后利用Scene Builder观察login_with_flow.fxml的预览界面，由下图可见单选按钮组合已经添加至登录窗口的上方。

接着修改LoginMain.java，将创建场景时加载的资源文件名改为login_with_flow.fxml，再重新运行测试程序，此时弹出的登录界面如下图所示：

比较Scene Builder的预览界面，以及实际运行的窗口界面，总体而言两者大同小异，基本的布局排列是吻合的。