java fx fxml界面_DOC-01-06 使用FXML进行用户界面设计

DOC-01-06 使用FXML进行用户界面设计

本教程展示了使用JavaFX FXML的好处，它基于XML语言并提供了将用户界面与程序逻辑代码分离的架构。

如果你是从头开始学习的本文档，那么你已经了解如何使用JavaFX来创建一个登录应用程序。在这一节，你将使用FXML来创建同样的登录用户界面，将程序的界面设计与业务逻辑分离，这样使得代码更便于维护。你在本教程中将要创建的登录用户界面如图6-1所示。

图6-1登录用户界面

在本教程中使用的编程工具是NetBeans IDE。请确保你使用的NetBeans版本支持JavaFX8 。参考JavaSE下载页面的”Certified System Configurations”部分来了解更多细节信息。

创建工程

你的首要任务是在NetBeans IDE中创建一个JavaFX FXML工程：

1. 在”File”菜单中选择”New Project”

2. 在”JavaFX”程序类别中，选择”JavaFX FXML Application”。点击”Next”

3. 将工程命名为”FXMLEXample”并点击”Finish”

NetBeans IDE将打开一个FXML工程，其中包括了基本的Hello World应用程序代码。程序中包括如下三个文件：

● java。此文件中包括一个FXML应用程序所需的标准Java代码。

● fxml。这是FXML源文件，在其中你可以定义用户界面。

● java。这是用于处理鼠标和键盘输入的控制器文件。

1. 将java重命名为FXMLExampleController.java，使得其名称更能代表此程序的含义。

● 在Projects窗体中，右键单击java并且选择”Refactor”菜单，然后选择”Rename”菜单。

● 输入”FXMLExampleController”，然后单击”Refactor”

2. 将fxml重命名为fxml_example.fxml

● 右键单击fxml并且选择”Rename”菜单。

● 输入”fxml_example”并且点击”OK”。

加载FXML源文件

你需要编辑的第一个文件是FXMLExample.java文件。此文件中包含了创建应用程序主类、定义stage和scene的代码。针对FXML，此文件中使用了FXMLLoader类，它用于加载FXML源文件并返回其代表的图形界面元素(译者注：目前代码还无法运行，因为FXML内容为空会在运行时报错)。

根据例6-1中的粗体字部分进行代码修改。

例6-1 FXMLExample.java

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();

}

1

2

3

4

5

6

7

8

@Override

publicvoidstart(Stagestage)throwsException{

Parentroot=FXMLLoader.load(getClass().getResource("fxml_example.fxml"));

Scenescene=newScene(root,300,275);

stage.setTitle("FXML Welcome");

stage.setScene(scene);

stage.show();

}

在创建scene时设置它的高和宽是一个不错的实践，在本例中设置为了300*275；否则scene的默认大小是能满足其内容显示的最小大小。

修改导入语句

下面来编辑fxml_example.fxml文件。此文件定义了在程序启动时显示的用户界面。首先需要做的事情是修改import语句，使你的代码如例6-2所示。

例6-2 XML声明和Import语句

XHTML

1

2

3

4

5

6

和在