javaFX——基于FXML创建用户界面
前面我们使用javaFX代码创建了一个用户界面，并用css装点了这么界面，现在在介绍一下在javaFX中另一种创建用户界面的形式——FXML。这种方式其实就是利用xml技术，搭建我们的用户界面，学过android的朋友可能会感到非常的亲切，因为和android的界面布局很像。采用这种方式是很有好处的，就是可以彻底的把应用程序和后台逻辑分离开来，方便明确的分工合作。好啦！废话不多，代码走起。
界面效果还是之前的登录界面，这里就不放上来了。只不过实现不一样罢了。
首先：我们在eclipse中创建一个javaFX应用，File——>new——>other——>(如果你安装过javaFX插件，你会找到javaFX文件夹的)展开来看到javaFX project 点击创建即可。
eclipse会自动帮我们生成一些代码，src下会创建好一个application包，里面有一个Main.java 和 aplication.css文件。看过前面文章的朋友应该会知道这两个文件是干什么的。我们直接修改Main.java文件，删除start()方法里面的代码，此外在aplication包下，创建一个fxml文件。创建方法任然是右键——>other——>找到javaFX文件夹，可以看到里面有一个new fxml document 点击它，创建即可，创建的时候命名为fxml_example，点击finish。
下面现将我们创建好的fxml文件引入到代码中。在之前的start方法中加入如下代码：
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml"));
Scene scene = new Scene(root, 300, 275);
stage.setTitle("FXML Welcome");
stage.setScene(scene);
stage.show();
}打开之前创建的fxml文件，删去里面自动生成的一些东西，不过xml声明不要也删了。之后再下面加上如下内容：
创建一个GridPane Layout
fx:controller:当你想要处理一些事件控制的时候，这个属性是必须的。稍后你将会看到。
xmlns:fx:该属性指定了fx的命名空间，这也是必须的。
后面的三个属性，看过之前例子的朋友应该很容易就明白了。
alignment：是给该GridPane相对于父元素居中呈现。
hgap和vgap是设置该网格布局的水平行和垂直列的间距。这里是10个像素
添加一些文本信息和Field
Welcome标体中的id是为了后面再css文件中使用#获取样式使用的。
添加一个按钮和一个文本，将下面代码放入上面代码之后
添加按钮事件
还记得之前我们在一开始写GridPane的时候的第一个属性么fx:controller,它的值是application.FXMLExampleController，这个值是包名+类名的写法。现在我们就要去编写FXMLExampleController类了。该类用来处理一些这个界面的控制事件。在application包下创建一个类并命名为FXMLExampleController。该类的内容如下：
package fxmlexample;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.text.Text;
public class FXMLExampleController {
@FXML private Text actiontarget;
@FXML protected void handleSubmitButtonAction(ActionEvent event) {
actiontarget.setText("Sign in button pressed");
}
}这个类就是该界面的控制类。
至此，其实已经可以运行我们的程序了。出来的界面就和最开始的一致没有样式的。下面我们就来添加我们的样式。任然是在fxml中,把css样式引入进来。
加载CSS样式
我们打开application包下的application.css文件，在找到我们之前做过那个登陆表单的css文件，将里面的类容复制其中，保存。
然后在GridPane标签中加入如下子标签：
使用stylesheets标签引入样式文件。URL标签加载级联样式表。
现在，在运行一次程勋，漂亮的界面就出来了。
关于更多的fxml，请移步至该网站阅读相关文档：fxml-document
To be continue ... ...