首页 > 代码库 > JavaFX Scene Builder 使用基础(一)

JavaFX Scene Builder 使用基础(一)

  怎么用Scene Builder 来配合编写一个程序?下面我们就以此来讨论一下。

(一)基础准备工作

  本人使用NetBeans与JavaFX Scene Builder协同编写。

  对于NetBeans我们需要做的是如下步骤:文件-->新建项目-->JavaFX-->JavaFX FXML应用程序,然后单击下一步,如图:

技术分享

  建立好工程文件后,我们可以看到工程下有三个文件,一个.FXML文件,两个.java文件,如图:

技术分享

  其中FXMLDocument.fxml为用户界面,我们可以通过JavaFX Scene Builder 进行编写,FXMLDocumentController.java为用户界面的控制器,通过这个文件我们可以通过java代码对fxml文件定义的控件进行控制。(在NetBeans中,如果我们有了fxml文件,可以通过鼠标右击-->生成控制器,来直接生成java的fxml的控制器),而JavaFXApplication11.java可以把界面展示出来。

 

(二)需要知道的一点知识

  (1)界面显示的关键

    在我们纯java代码中,我们通过将场景放入舞台中,然后显示即可,在我们这里原理也是一样的。在JavaFXApplication11.java中,我们有这样的一行代码:

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

  这个是我们的关键,我们通过FXMLLoader.load()方法从资源文件FXMLDocument.fxml中加载层级对象,并赋值到名为root的变量。之后我们在把这个根节点放到场景中,这样我们的用户界面就可以实现出来了。

  (2)界面控制,响应交互的关键

    对于fxml文件,我们可以打开JavaFX Scene Builder 对我们的界面进行设计,同时设置fx:id、触发器、控制器,然后保存在NetBeans的工程中,再到NetBeans中右击fxml文件,重构或者是生成控制器(下面我们会详细讲)

 

(三)JavaFX Scene Builder 基本介绍

       首先,让我们来看看它的基本界面:

技术分享  

  然后,左边可以看到JavaFX控件列表和UI层结构,中间是可视化区域,设计的时候将控件从控件列表中拖动到可视化区域即可,右边是控件的属性,需要注意的属性栏包括Properties(属性)、Layout(布局)、Code(代码)一共三个部分,其中属性主要控制控件自身的大小、对齐方式、CSS样式的添加等,布局主要控制控件在面板上的对齐方式,位置等等的一些属性,而代码部分也是比较关键的一部分,下面我们将具体说明一下。

(四)使用Scene Builder时最关键的一步

  我们通过对界面的设计然后通过上面的知识已经可以把页面显示出来了,但是因为我们利用Scene Builder编写出来的FXML文件最终目的是为了和java代码一起用的,那么java如何来调用FXML文件里的控件呢?这里的关键就是上面提到的Code部分,先看下它长什么样:

技术分享

  我们通过对控件的fx:id部分进行命名,当我们在NetBeans进行生成控制器时就会生成相应的变量,这样我们就可以在控制器里对界面上的控件进行控制;而在下面的部分即触发器部分,同样我们对它进行命名,生成的触发器中会出现相应的和触发器对应的函数,我们同样可以进行编写相应的操作。

  另外,如图:

技术分享

  在整个界面的左边我们需要对Controller class进行命名,目的是为fxml文件指定控制器。

 

  通过上面的介绍相信我们可以基本的对NetBeans和JavaFX Scene Builder 进行操作,并且显示fxml界面和对其进行控制。我们下一节将实践一个具体的例子来示范。

JavaFX Scene Builder 使用基础(一)