DOC-06-04 使用FXML来创建自定义控件

在本教程中,你将会创建应用程序,其中带有一个由文本框和按钮组成的自定义控件。如图4-1所示。

在开始之前,你需要确保自己的NetBeans IDE支持JavaFX8(NetBeans IDE 7.4 Patch 2是最早符合要求的版本)。我们假设你对FXML工程的基本结构(.java,.fxml和Controller文件)已经了解了。如果你对此不太了解,请先完成“开始(Get Started)”系列教程中的FXML教程(译者注:指第一篇文档《开始学习JavaFX》的第2部分第6章),然后再继续本教程。

图4-1 自定义控件程序

6_4_1 custom_control

创建工程

打开你的NetBeans IDE并按照下面的步骤来创建一个JavaFX FXML工程:

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

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

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

4. 将java重命名为CustomControlExample.java,使得其名称对于应用程序来说更有意义。

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

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

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

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

b. 输入custom_control并单击“OK”。

创建基本的用户界面

定义一个简单的自定义控件的结构,其中包括一个TextField和一个Button实例。根容器是一个javafx.scene.layout.VBox类。

1. 编辑fxml文件

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

3. 为根容器增加代码,如例4-1所示。

例4–1 定义根容器

4. 移除没有用到的import语句,如例4-2所示。

例4-2 没有用到的Import语句

译者注:整个代码如下所示:

创建一个控制器

在本例中CustomControl类继承了VBox类(由<fx:root>元素所定义的类型),并且在其构造方法中设置其自身既是root、也是FXML的Controller。当文档被加载时,CustomControl实例的内容将会由文档内容所填充而成。

1. 打开java文件并移除由NetBeans IDE自动产生的代码。

2. 增加如例4-3所示的代码

例4-3 CustomControl类同时作为FXML文档的根容器和Controller

加载FXML源文件、定义Stage和Scene

CustomControlExample.java文件包括了应用程序的main入口,其中定义了stage和scene,并且加载了FXML源文件。此类通过CustomControl类来加载FXML源文件。

1. 打开java文件。

2. 移除如例4-4所示的对FXMLLoader类的调用代码行。

例4-4 移除对FXMLLoader类的调用

3. 创建一个CustomControlExample类实例并指定自定义控件的文字,如例4-5所示。

例 4–5初始化CustomControl

4. 移除设置Stage和Scene的代码行,然后如例4-6所示定义Stage和Scene。

例4-6 定义Stage和Scene

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

在你创建一个自定义控件之后,你可以以代码或标记(译者注:即在FXML中)的方式来使用此控件的实例,就像使用其它控件一样,如例4-7和例4-8所示。

例 4–7以代码方式使用CustomControl 例的实例

例 4–8以标记方式使用CustomControl 例的实例

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

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