JavaFx-桌面应用开发利器（三）FXML和Scene Builder

本文接上文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>        <Label text="Page Title"/>    </top>    <center>        <Label text="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文件发生了改变。

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>


<AnchorPane maxHeight="-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>
      <Label layoutX="138.0" layoutY="78.0" text="账号:">
         <font>
            <Font name="System Bold" size="17.0" />
         </font>
      </Label>
      <TextField fx:id="loginName" layoutX="210.0" layoutY="71.0" prefHeight="35.0" prefWidth="228.0" />
      <Label layoutX="138.0" layoutY="129.0" text="密码:">
         <font>
            <Font name="System Bold" size="17.0" />
         </font>
      </Label>
      <PasswordField fx:id="loginPwd" layoutX="210.0" layoutY="124.0" prefHeight="35.0" prefWidth="228.0" />
      <Button fx:id="btnLogin" layoutX="210.0" layoutY="179.0" mnemonicParsing="false" onAction="#loginIn" prefHeight="23.0" prefWidth="71.0" text="登录">
         <font>
            <Font name="System Bold" size="17.0" />
         </font>
      </Button>
      <Button fx:id="btnCancel" layoutX="367.0" layoutY="179.0" mnemonicParsing="false" prefHeight="23.0" prefWidth="71.0" text="取消">
         <font>
            <Font name="System Bold" size="17.0" />
         </font>
      </Button>
   </children>
</AnchorPane>

对应的controller代码如下：

然后把生成的controller代码拷贝到工程中的对应类中即可。完整的java代码如下：

package application;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;

public class ViewController {

    @FXML
    private TextField loginName;

    @FXML
    private PasswordField loginPwd;

    @FXML
    private Button btnLogin;

    @FXML
    private Button btnCancel;

    @FXML
    void loginIn(ActionEvent event) {
    	String userName = loginName.getText();
    	String pwd = 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中可能会遇到的一些问题以及解决办法。