SceneBuilder：界面与代码分离神器 配合JavaFX食用的详细流程

1、前言

当我们使用JavaFX来写一个GUI时，往往会感觉用代码做界面设计是一件非常麻烦的事。因此，我们需要去掌握使用FXML文件来设计界面，用Controller类来控制界面里面的所有action，这是为了做到界面与代码分离。

本文就是介绍一款配合FXML文件使用的GUI界面设计工具。它有什么用呢？有了它，你就可以做到仅仅依靠拖拽即可完成设计以及自动生成FXML文件。

2、环境准备

准备：

1. IDE推荐Intellij IDEA；

2. jdk必须是1.8，1.8自带JavaFX包；

3. 主角：SceneBuilder，一款用来设计界面的轻量级软件，可以通过拖拽控件来进行页面设计。

   下载地址：https://gluonhq.com/products/scene-builder/

配置步骤：

1. 下载并安装SceneBuilder；

2. 打开IDEA，进入设置，搜索“JavaFX”，配置SceneBuilder安装路径

   

3、SceneBuilder使用流程

使用SceneBuilder最大的好处是FXML不再需要我们手动敲代码地设计样式，接下来我们按步骤演示一下SceneBuilder的使用流程。

步骤：

1. 创建一个普通的maven工程，jdk配置必须1.8。

2. 新建一个MySceneController.java，这个控制类用来控制FXML文件中的一系列action。

3. 新建一个FXML File，将fx:controller的属性值配置为全类名，代表与刚刚创建的controller类关联上了。

   

4. 目前现在FXML文件还是空的，那么接下来要借助SceneBuilder来做界面设计，启动SceneBuilder，File-open，找到我们的fxml文件打开。

   

5. 在左边Library搜索“button”，找到button，点击，拖动到AnchorPane上，双击修改文本。

   

6. 右边有3个菜单栏，分别是：Properties（属性），Layout（布局），Code（代码）。

   

7. 点击“Code”，把“fx:id”的值修改为“okayButton”（fx:id其实就对应了这个button的变量名），在“On Action”的值修改为“okay”（其实就是这个button触发的事件的方法名）。

   

8. 接下来我们来预览一下界面效果，工具栏Preview->Show Preview In Window，或者快捷键Ctrl+P，就可以预览效果啦。

   

9. 此外，工具栏的View->Show Sample Controller Skeleton，可以给我们自动生成对应的Controller类的代码骨架啦，可以复制到对应的类，其中包含了所有命名的组件，比如刚刚我们设置的“okayButton”；

   

10. 现在我们给okay的事件补充一下内容，这里的事件设置每点一次，就在控制台打印“ok”。

    

11. 现在我们还需要一个主类来启动，创建一个类继承Application。

    

    • 这里要注意，getResource()这里的参数要对应代码编译后的fxml文件路径，否则会报空指针异常。

12. 到这里就大功告成了，看执行效果。

    

    • 这样就完成了界面设计与代码分离的目的啦！