DOC-06-03 使用FXML来创建地址簿应用

在本章中,你将会创建一个地址簿应用程序,其中包括一个带有姓名和邮件地址的表格,如图3-1所示。本教程展示了如何使用数据来填充表格,在应用程序启动时对数据排序,对齐在表格单元格中的数据以及向表格内增加行。

在开始之前,我们假定你对FXML相关的一些知识有了相当的了解,至少你已经完成了FXML教程文档中的“开始(Getting Started)”系列课程,因为它教导了FXML开发的基础知识。特别地,对于创建地址簿应用,下列知识点你必须已经掌握:

● FXML工程的基本架构(.java,jfxml和控制器(Controller)文件)

● 如何在NetBeans IDE中创建和运行JavaFX FXML工程

● 关于布局(Layout)和用户界面控件的基本知识

在你开始这个教程之前,确保你使用的NetBeans IDE版本支持对应版本的JavaFX(译者注:包括要支持Java8)

图3-1 地址簿应用程序

6_3_1 table_final

创建工程

你的第一个任务是在NetBeans IDE中创建一个JavaFX FXML工程(译者注:如果在其它IDE(如Eclipse)中,则请参考对应IDE的使用方法)

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

2. 在“JavaFX”类别中,选择“JavaFX FXML Application”,单击“Next”。

3. 将工程命名为“FXMLTableView”并单击“Finish”。

NetBeans IDE将会打开一个FXML工程,其中包含了Hello World样例程序的代码。这个应用程序中包括三个文件:FXMLTableView.java、FXMLDocument.fxml 、FXMLDocumentController.java。

4. 将java重命名为FXMLTableViewController.java,使得应用程序的名字变得更有意义。

a. 在Projects窗口中,右键单击java并且选择“Refactor“菜单,然后选择”Rename“。

b. 输入FXMLDocumentController,然后单击“Refactor”。

5. 将fxml重命名为fxml_tableview.fxml。

a. 右键单击fxml并选择“ Rename”菜单

b. 输入fxml_tableview并单击“OK”

6. 打开java并且编辑FXMLTableView类,使其如例3-1所示。

例3-1 FXMLTableView.java

注意目前Java类中并没有包括创建场景的相关代码。在教程的下一部分《创建基本的用户界面》中会告诉你如何在FXML文件中来创建场景。

7. 按下Ctrl(或者Cmd)+Shift+I来修订import语句问题。

创建基本的用户界面

现在开始定义用户界面,先创建一个GridPane布局容器作为场景的根节点(Root Node)。然后增加一个Label和TableView控件作为其子节点。

1. 编辑fxml文件。

2. 删除NetBeans IDE自动产生的<AnchorPane>标记。

3. 增加一个GridPane布局容器作为场景的Root Node,如例3-2所示。

例3-2 GridPane

你可以忽略可能出现在输出窗口的错误信息:”File not found in the specified address: http://javafx.com/fxml”

4. 向GridPane layout布局容器中增加Label和TableView,代码如例3-3所示:

例3-3 Label和TableView

5. 增加Inset类的import语句

6. 运行程序。你将会看到看到一个带有文本“Address Book”的Label以及一个带有文本“No columns in table”的表格,这是在TableView实现类中定义的默认文本标题,如图3-2所示。

图3-2没有表头的表格

6_3_2 table_no_columns

增加表格中的列

使用TableColumn类来在表格中增加3列,分别用于显示数据:First Name,Last Name以及Email Address。代码如例3-4:

例3-4 表格的列

小窍门:要了解关于TableColumn类或其他在本教程中讨论过的JavaFX类的信息,请参考API文档。

图3-3展现了带有First Name、Last Name和Email Address三列的表格。

图3-3 带有三列的地址簿

6_3_3 table_columns

 定义数据模型

当你在JavaFX中创建表格时,一个可以考虑的最佳实践是定义一个数据模型类来定义数据模型并提供操作表格的方法和属性。下面创建一个Person类来定义地址簿的数据。

1. 在NetBeans IDE中,右键单击在Source Packages下的fxmltableview文件夹,并且选择“New”,然后是“Java Class”。

2. 将类命名为Person然后单击“Finish”。

3. 实现一个Person类来定义数据,如例3-5所示。

例3-5 Person

将数据与表格关联

接下来的任务是定义展示数据的行,并将其数据关联到表格列。你需要将下面的代码添加到FXML文件中。

1. 在fxml文件中,创建一个ObservableList列表并定义一些希望展现在表格中的数据,样例代码如例3-6所示。在</columns>和 </TableView>标签之间添加代码。

例3-6 ObservableList 列表

2. 为每列指定一个Cell Factory来将数据关联到列,如例3-7所示。

例3-7 Cell Factory

3. 引入需要的包,如例3-8所示:

例3-8 Import语句

(译者注:第三行注意需要根据实际情况调整,因为有可能你创建的项目的包名不是fxmltableview)

运行此时的应用程序将会展示填充了数据的表格,如图3-4所示。

图3-4 带有数据的表格

6_3_4 table_with_data

此时你可以尝试TableView类的一些内置的功能特点:

● 通过拖放列头分隔线来改变列宽

● 通过拖放列头来改变列的顺序

● 通过单击列头来根据列数据进行排序。第一次单击进行升序排列、第二次按降序排列、第三次恢复默认情况不再排序。默认情况下是不会进行排序的。

在启动时排序

在本节中你将进行排序顺序的设置,使得First Name列在应用启动时按字母升序排列。首先你需要为对应的列创建一个ID,然后创建一个reference来引用它。

1. 为First Name 列增加ID:

2. 指定排序顺序,在</items>和</TableView>两个标记之间增加例3-9所示的代码。

例3-9 排序

你将会看到如图3-5所示的结果。

图3-5 在启动时会对第一列数据排序的表格

6_3_5 table_sort

 定义列宽

下面为每一列增加prefWidth属性来增加列宽,如例3-10所示。

例3-10 列宽

运行结果如图3-6所示,列宽被扩大后所有数据得以全部显示。

图3-6 设置了列宽的表格

6_3_6 table_prefwidth

 设置表格单元的对齐方式(Alignment)

表格单元格中的数据对齐方式也是可以定制的。你需要创建一个名为FormattedTableCellFactory的类来实现对应的逻辑,然后在FXML的<TableColumn>标签中设置对齐方式。

1. 在NetBeans IDE中右键单击在Source Package下的fxmltableview文件夹,选择“New”,然后选择“Java Class”。

2. 将类命名为FormattedTableCellFactory,然后单击“Finish”。

3. 修改FormattedTableCellFactoryand类的代码,使其实现Callback接口,并在其中创建TextAlignment和Formt类实例,如例3-11所示。参数S是TableView泛型的类型、参数T是单元格的内容的类型。

例3-11 Callback

4. 通过添加例3-12中的代码来实现TabCell和TableColumn类。这段代码重写了TableCell类的updateItem方法,并在调用了单元格setTextAlign方法。

例3-12 TableCell和TableColumn

5. 增加必需的import语句。

6. 在fxml中,在 <cellValueFactory>节点之下增加下列语句来将FirstName居中对齐,如例3-13所示。

例3-13 在数据单元格中对齐

你可以在其它的列中通过left、right或者center来指定不同的对齐方式。

现在运行应用程序将会使得First Name列中的数据居中对齐,如图3-7所示。

图3-7 在First name列中数据居中对齐

6_3_7 table_add_row_

向表格增加行

通过在FXMLTableViewControllerclass类中增加代码逻辑,你可以使得用户获得向表格中增加数据行的功能。然后修改用户界面,使其包含三个文本域和一个按钮来输入数据。

1. 打开FXMLTableViewController.java文件

2. 修改FXMLTableViewController类,使其看起来如例3-14所示。

3-14 FXMLTableViewController.java

3. 根据例3-15来修订import元素。

例3-15 在FXMLTableViewController中的Import语句

4. 在fxml文件中,在 </GridPane>前增加下面的代码,如例3-16所示。

例3-16 用于增加行的TextField和Button

运行应用程序后你将会看到在表格下面的文本域和按钮,如图3-8所示。在文本域中输入数据并单击“Add”按钮来观察应用程序的反应。

下载FXMLTableView.zip文件来查看FXMLTableView应用程序的完整源代码。

图3-8 带有用于增加数据的TextField和Button的表格

6_3_8 table_add_row_

了解更多

本教程描述了地址簿应用程序教程,后续你可以尝试一下这些内容:

1. 提供一个filter来校验输入的数据格式的正确性。

2. 使用CSS来自定义表格外观,区分区空行和非空行。可参考在文档《03 使用JavaFX UI组件》中的“在UI控件上使用CSS(Styling UI Controls with CSS)”章节来了解更多信息。

3. 允许在表格中编辑数据。参考《03 使用JavaFX UI组件》中的“表格视图(TableView)” 章节来了解编辑表格中的数据的要点。

4. 看一看Introduction to FXML document,其中提供了更多关于FXML的信息。这篇文档被包含在API文档的fxml包中。

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/08/fxml_address_book/
百度已收录