本文接上文JavaFx-桌面应用开发利器（二）基础架构篇，在熟悉了JavaFx的基础框架后，通过基础的学习示例。相信你对基础的Stage和Scene对象等都有了一定的基础认识。在学习的时候，建议各位都能亲自动手进行编码，更有利于掌握相关知识。本文主要讲解JavaFx里面的FXML进行UI可视化开发，同时结合SceneBuilder，说明如何加速开发速度。
一、首先介绍下简单介绍下FXML。
FXML并没有定义schema，但是它具有一个基本的预定义结构。在FXML中所表达的内容，以及如何将其应用到构建一个场景图(Scene Graph)，这些都取决于你所构造的API。由于FXML直接映射为Java代码，所以可以通过Java API文档来理解对应的XML元素和属性的含义。一般来说，大多数的JavaFX类都可以映射为XML元素，并且大多数的Bean属性都会被映射为元素的属性。
从MVC设计模式的角度来看，FXML文件描述的用户界面是其中的View的部分。Controller是一个Java类，可以选择实现Initializable接口，用于将其声明为FXML文件的控制器(Controller)。Model部分包括了领域模型对象，使用Java代码来定义并通过Controller来与View关联。这样的结构在后面的章节“使用FXML来创建地址簿应用”中会给出样例。
当你使用FXML来创建用户界面，尤其是在创建具有大型、复杂的场景图、表单、数据入口、复杂动画的用户界面时使用FXML会显得更为功能强大。FXML同样适于创建静态布局，例如表单、控件、表格等。另外，你也可以通过FXML使用脚本来构建动态布局。
BorderPane border = new BorderPane(); Label toppanetext = new Label("Page Title"); border.setTop(toppanetext); Label centerpanetext = new Label ("Some data here"); border.setCenter(centerpanetext);
上图是使用Java硬编码方式场景开发。下面来看使用FXML如何开发？
<BorderPane><top><Labeltext="Page Title"/></top><center><Labeltext="Some data here"/></center></BorderPane>
实现的效果如下:
了解MVC开发模式以及熟悉HTML甚至新前端开发模式的朋友知道，业务和视图需要分离。因此，上面的FXML即可理解成视图界面。
二、SceneBuilder
JavaFX Scene Builder 是一个可视化布局工具，可快速设计 JavaFX 应用程序用户界面，无需编写代码。用户可以拖放UI 组件到工作区，修改组件的属性，应用样式表，而且在后台自动生成所创建布局的 FXML 代码。最后得到的是一个可以稍后与 Java 项目整合到一起的 FXML 文件，从而将 UI 与应用程序逻辑绑定起来。
以eclipse为例，讲解如何集成Scene builder快速开发平台。
第一步、需要在eclipse中安装E（fx）clipse,安装教程见http://www.javafxchina.net/blog/2015/11/efxclipse-install/。友情提示，如果是外网开发环境，可以直接安装eclipse插件（会自动管理相关依赖），如果是离线或者内网环境，建议直接安装全部集成的eclipse包。这样可以避免自己去找相关的依赖包，同时也提高效率。
安装好插件的eclipse中关于javafx可以看到，说明安装成功：
第二步、下载SceneBuilder,下载安装在电脑任意盘。
SceneBuilder的运行界面如上图所示。
第三步、在eclipse中配置SceneBuilder运行程序关联。
在eclipse中配置场景构建器的安装目录，便于在开发时可以直接在eclipse中直接打开。
第四步、在eclipse中创建javaFx工程，并新建Fxml文件。
温馨提示，使用eclipse的时候需要格外注意下，请注意当前工程的编辑窗口是在package 模式下还是在navigator模式。如果你发现在Fxml文件右键找不到Open with SceneBuilder的入口。请观察是否是在navigator模式下，只要切换到package模式下即可。
打开后，可以看到编写好的页面实例
第五步、在SceneBuilder编辑器中关联Controller处理相关逻辑。
上述便是在SceneBuilder中进行关联代码的设置，需要注意的是，对应的处理controller需要提前创建好，这里的ui对象，需要在属性信息中给fx:id进行统一命名。保存相应配置后，可以看到View.fxml文件发生了改变。
<?xmlversion="1.0"encoding="UTF-8"?><?importjavafx.scene.control.Button?><?importjavafx.scene.control.Label?><?importjavafx.scene.control.PasswordField?><?importjavafx.scene.control.TextField?><?importjavafx.scene.layout.AnchorPane?><?importjavafx.scene.text.Font?><AnchorPanemaxHeight="-Infinity"maxWidth="-Infinity"minHeight="-Infinity"minWidth="-Infinity"prefHeight="292.0"prefWidth="600.0"xmlns="http://javafx.com/javafx/8.0.171"xmlns:fx="http://javafx.com/fxml/1"fx:controller="application.ViewController"><children><LabellayoutX="138.0"layoutY="78.0"text="账号:"><font><Fontname="System Bold"size="17.0"/></font></Label><TextFieldfx:id="loginName"layoutX="210.0"layoutY="71.0"prefHeight="35.0"prefWidth="228.0"/><LabellayoutX="138.0"layoutY="129.0"text="密码:"><font><Fontname="System Bold"size="17.0"/></font></Label><PasswordFieldfx:id="loginPwd"layoutX="210.0"layoutY="124.0"prefHeight="35.0"prefWidth="228.0"/><Buttonfx:id="btnLogin"layoutX="210.0"layoutY="179.0"mnemonicParsing="false"onAction="#loginIn"prefHeight="23.0"prefWidth="71.0"text="登录"><font><Fontname="System Bold"size="17.0"/></font></Button><Buttonfx:id="btnCancel"layoutX="367.0"layoutY="179.0"mnemonicParsing="false"prefHeight="23.0"prefWidth="71.0"text="取消"><font><Fontname="System Bold"size="17.0"/></font></Button></children></AnchorPane>
对应的controller代码如下：
然后把生成的controller代码拷贝到工程中的对应类中即可。完整的java代码如下：
packageapplication; importjavafx.event.ActionEvent; importjavafx.fxml.FXML; importjavafx.scene.control.Button; importjavafx.scene.control.PasswordField; importjavafx.scene.control.TextField; publicclassViewController { privateTextFieldloginName; privatePasswordFieldloginPwd; privateButtonbtnLogin; privateButtonbtnCancel; voidloginIn(ActionEventevent) { StringuserName=loginName.getText(); Stringpwd=loginPwd.getText(); System.out.println(userName+"==="+pwd); if(userName.equals("admin") &&pwd.equals("123456")) { System.out.println("登录成功"); }else { System.out.println("用户名或密码错误"); } } }
完整的功能示例如下：
三、总结
本文首先简单介绍了Fxml和Scene Builder的基本知识，同时以eclipse为例，通过代码的形式说明如何进行Fxml的开发，最后使用SceneBuilder进行应用快速开发。同时说明在使用eclipse中可能会遇到的一些问题以及解决办法。
