4使用FXML创建用户界面

2019独角兽企业重金招聘Python工程师标准>>>

本教程展示了使用JavaFX FXML的好处，它是一种基于XML的语言，它提供了构建与代码应用程序逻辑分离的用户界面的结构。

如果您从一开始就开始使用本文档，那么您已经看到如何使用JavaFX创建登录应用程序。在这里，您使用FXML创建相同的登录用户界面，将应用程序设计与应用程序逻辑分开，从而使代码更易于维护。本教程中构建的登录用户界面如图4-1所示。

图4-1登录用户界面

“图4-1登录用户界面”说明

本教程使用NetBeans IDE。确保您所使用的NetBeans IDE版本支持JavaFX 2.2。有关详细信息，请参阅系统要求。

设立项目

您的第一个任务是在NetBeans IDE中设置JavaFX FXML项目：

从文件菜单中，选择新建项目。
在JavaFX应用程序类别中，选择JavaFX FXML应用程序。单击下一步。
将项目命名为FXMLExample，然后单击完成。

NetBeans IDE打开一个包含基本Hello World应用程序代码的FXML项目。该应用程序包括三个文件：
- FXMLExample.java。该文件负责FXML应用程序所需的标准Java代码。
- Sample.fxml。这是您定义用户界面的FXML源文件。
- SampleController.java。这是用于处理鼠标和键盘输入的控制器文件。
将SampleController.java重命名为FXMLExampleController.java，以便该名称对此应用程序更有意义。
1. 在“项目”窗口中，右键单击SampleController.java，然后选择“ 重构”，然后选择“ 重命名”。
2. 输入FXMLExampleController，然后单击Refactor。
将Sample.fxml重命名为fxml_example.fxml。
1. 右键单击Sample.fxml并选择重命名。
2. 输入fxml_example，然后单击确定。

加载FXML源文件

您编辑的第一个文件是该FXMLExample.java文件。该文件包括用于设置应用程序主类和定义舞台和场景的代码。更具体的FXML，该文件使用FXMLLoader该类，负责加载FXML源文件并返回生成的对象图。

在示例4-1中，以粗体显示更改。

示例4-1 FXMLExample.java

Example 4-1 FXMLExample.java

    @Override
    public void start(Stage stage) throws Exception {
       Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml"));
    
        Scene scene = new Scene(root, 300, 275);
    
        stage.setTitle("FXML Welcome");
        stage.setScene(scene);
        stage.show();
    }

一个好的做法是设置场景的高度和宽度，当你创建它，在这种情况下，由300加上275; 否则场景默认为显示其内容所需的最小大小。

修改导入语句

接下来，编辑fxml_example.fxml文件。该文件指定应用程序启动时显示的用户界面。第一个任务是修改import语句，这样你的代码就像例4-2一样。

示例4-2 XML声明和导入语句

Example 4-2 XML Declaration and Import Statements

与Java一样，类名可以是完全限定的（包括包名称），也可以使用import语句导入，如例4-2所示。如果您愿意，可以使用引用类的特定导入语句。

创建一个GridPane布局

NetBeans生成的Hello World应用程序使用AnchorPane布局。对于登录表单，您将使用GridPane布局，因为它可以创建一个灵活的行和列格网，以便布置控件。

删除AnchorPane布局及其子代，并将其替换GridPane为示例4-3中的布局。

示例4-3 GridPane布局

Example 4-3 GridPane Layout

在此应用程序中，GridPane布局是FXML文档的根元素，因此具有两个属性。fx:controller当您在标记中指定基于控制器的事件处理程序时，该属性是必需的。该xmlns:fx属性始终是必需的，指定fx命名空间。

代码的其余部分控制网格窗格的对齐和间距。对齐属性将网格的默认位置从场景的左上角更改为中心。在gap性能管理行和列之间的间距，而padding物业管理围绕网格窗格边缘的空间。

当窗口调整大小时，网格窗格中的节点将根据其布局约束进行调整大小。在这个例子中，当您增长或缩小窗口时，网格保持在中心。当您缩小窗口时，填充属性确保网格周围有一个填充。

添加文本和密码字段

回头看图4-1，您可以看到登录表单需要标题“欢迎”和用于从用户收集信息的文本和密码字段。示例4-4中的代码是GridPane布局的一部分，必须位于语句的上方。

示例4-4文本，标签，文本框和密码字段控件

Example 4-4 Text, Label, TextField, and Password Field Controls

第一行创建一个Text对象并将其文本值设置为Welcome。该属性GridPane.columnIndex和GridPane.rowIndex属性对应于Text控件在网格中的位置。网格中的行和列的编号从零开始，Text控件的位置设置为（0,0），表示它位于第一行的第一列。该GridPane.columnSpan属性设置为2，制作欢迎标题跨网格中的两列。当您添加样式表以将文本的字体大小增加到32点时，教程中稍后将需要此宽度。

下一行创建Label与文本对象User Name在第0列，第1行和TextField第1栏目的是它的右侧，第1行的另一种Label和PasswordField对象被创建并添加到网格以类似的方式。

使用网格布局时，可以显示网格线，这对于调试目的很有用。在这种情况下，通过在声明之后添加声明gridLinesVisible来设置属性。然后，当您运行应用程序时，您将看到网格列和行的行以及间隙属性，如图4-2所示。truetrue

图4-2具有网格线的登录表单

“图4-2带网格线的登录表”

添加按钮和文本

应用程序所需的最后两个控件是Button用于提交数据的Text控件和用户按下按钮时显示消息的控件。代码示例4-5。之前添加此代码。

示例4-5 HBox，按钮和文本

Example 4-5 HBox, Button, and Text

HBox需要一个窗格来设置不同于应用于GridPane布局中其他控件的默认对齐方式的按钮的对齐方式。该alignment属性被设置为bottom_right将空间的底部垂直放置在空间的底部并且在水平的右边缘处。该HBox窗格添加到网格在列1，行4。

该HBox窗格有一个孩子，一个Button与text属性设置为Sign in和onAction设置属性handleSubmitButtonAction()。虽然FXML是定义应用程序用户界面结构的便捷方式，但它并没有提供实现应用程序行为的方法。您可以handleSubmitButtonAction()在本教程的下一部分“ 添加代码处理事件”中以Java代码实现方法的行为。

fx:id为元素分配一个值，如Text控件的代码所示，在文档的命名空间中创建一个变量，您可以从代码中的其他地方引用该变量。虽然不需要，但定义控制器字段有助于说明控制器和标记如何相关联。

添加代码来处理事件

现在，Text当用户按下按钮时，控制显示消息。你在FXMLExampleController.java文件中这样做。删除NetBeans IDE生成的代码，并将其替换为示例4-6中的代码。

示例4-6 FXMLExampleController.java

Example 4-6 FXMLExampleController.java

package fxmlexample;
 
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.text.Text;
 
public class FXMLExampleController {
    @FXML private Text actiontarget;
    
    @FXML protected void handleSubmitButtonAction(ActionEvent event) {
        actiontarget.setText("Sign in button pressed");
    }

}

该@FXML注释用于标记非公开控制器成员字段和处理程序方法以供FXML标记使用。该handleSubmtButtonAction方法将actiontarget变量设置为Sign in button pressed用户按下按钮时。

您现在可以运行应用程序来查看完整的用户界面。图4-3显示了在两个字段中键入文本并单击“登录”按钮时的结果。如果您有任何问题，那么您可以将代码与FXMLLogin示例进行比较。

图4-3 FXML登录窗口

“图4-3 FXML登录窗口”说明

使用脚本语言来处理事件

作为使用Java代码创建事件处理程序的替代方法，您可以使用提供与JSR 223兼容的脚本引擎的任何语言来创建处理程序。这些语言包括JavaScript，Groovy，Jython和Clojure。

或者，您可以尝试使用JavaScript。

在该文件中fxml_example.fxml，在XML doctype声明之后添加JavaScript声明。
在Button标记中，更改函数的名称，使得调用如下所示：

onAction="handleSubmitButtonAction(event);"
fx:controller从GridPane标记中删除属性，并将JavaScript函数添加到其