JavaFX是一个强大的图形和多媒体处理工具包集合，它允许开发者来设计、创建、测试、调试和部署富客户端程序，并且和Java一样跨平台。
JavaFX比Swing好用很多，它允许开发使用FXML来设计和布局界面，跟Qt和Android的布局有点类似。

1. JavaFX UI 层级关系

JavaFX的UI分为几类：

1. 窗口（stage）
2. 场景（scene）
3. 容器（container）
4. 控件（controller）

它们之间的关系为：

stage: # 顶层
  scene: # 放在窗口内
    container: # 放在场景内（布局）
      controller: # 放在容器中

2. 创建JavaFX应用

JavaFX应用的创建可以跟普通的Java应用创建一样，即创建一个普通的maven项目即可，不过需要JavaFX的应用主程序需要继承Application这个类。
编写最简单的应用（空白窗口）：

public class App extends Application {
    @Override
    public void start(Stage stage) {
        stage.setTitle("JavaFX Hello World");
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

效果图：

3. 添加自己的控件

JavaFX允许使用FXML来设计和布局界面，各模块也支持按MVC进行划分，即control(控制层)、 model(模型层)和view(视图层)。
下面按MVC这种模式，分别创建控制层、视图层、和模型层。

首先是控制层：AppUI。

控制层将view(视图层)的控件text通过bindBidirectional将其text属性跟model(模型层)的text属性绑定，这样就可以通过设置model的text来达到改变view的text属性的效果。

public class AppUI implements Initializable {
    public Label text;
    private AppModel model = new AppModel();
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        text.textProperty().bindBidirectional(model.textProperty());
        model.setText("Hello JavaFX.");
    }
}

接着是模型层：AppModel

模型层主要的作用是数据载体，在控制层将视图层的控件跟模型层的属性绑定，以达到改变模型就改变视图。（这一点跟Vue有点类似）。

public class AppModel {
    private StringProperty text = new SimpleStringProperty();
    public String getText() {
        return text.get();
    }
    public StringProperty textProperty() {
        return text;
    }
    public void setText(String text) {
        this.text.set(text);
    }
}

然后是视图层：AppUI.fxml

视频层采用JavaFX的FXML来布局界面，这里简单的使用BorderPane作为容器，里面只放了一个Label控件。

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.172-ea" 
  xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.itqn.gui.javafx.wx.ui.AppUI">
   <center>
      <Label fx:id="text" BorderPane.alignment="CENTER" />
   </center>
</BorderPane>

最后，根据层级关系组织JavaFX应用

控件（Label）放在容器（BorderPane）里面，容器放在场景里面，场景放在窗口里面即可。

public class App extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        Parent root = AppUI.load();
        Scene scene = new Scene(root);
        stage.setTitle("JavaFX Hello World");
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

这样一个最简单的完整JavaFX就开发完了。

这里需要注意的是： ，因为fxml跟java代码放在同一个包下面，所以需要在maven的pom.xml配置resources。

<build>
  <resources>
    <resource>
      <directory>src/main/resources</directory>
    </resource>
    <resource>
      <directory>src/main/java</directory>
      <includes>
        <include>**/*.fxml</include>
      </includes>
    </resource>
  </resources>
</build>

=========================================================
源码可关注公众号 “HiIT青年” 发送 “javafx-helloworld” 获取。

关注公众号，阅读更多文章。