引言
2008年12月05日，SUN发布了JavaFX第一个正式版本，以期望Java在UI端能够更好地应用于开发富客户端的互联网应用(Rich Internet Cliet)。
2011年发布的JavaFX2.0取消之前基于Script的模式，改为使用原生Java结合CSS等进行了重构。
2014年发布的JavaFX8.0，与JDK1.8进行整合，并运用JDK8的新特性。
我们在上一篇文章中，已经简要地介绍了JavaUI框架的发展历史及特性。从这篇文章开始介绍JavaFX的特性，使用方法，优缺点以及注意事项等。
总体来说，使用JavaFX开发界面，要比Swing、SWT等要快捷一些。但作为一个已经发展了10多年的“主流”Java UI框架，在功能丰富程度以及一些处理细节上，还有比较多的欠缺甚至不方便、官方无解的问题。举几个例子：
1、JavaFX的Alert对话话比Swing提供的好用、漂亮，但是在Swing中使用JavaFX Alert时，由于其各自的派遣线程的问题，无法使用Modal模式。这种问题简直让人抓狂。
2、TableView在样式、某些处理机制方面，同样不可理喻。默认情况下，不管TableView中有多少数据，都会为整个表格绘制表格线；在编辑单元格时，必须敲回车键才能提交修改，如果点击其它单元格、其它行，或者敲Tab键，TableView将自动Cancel修改的内容；提供的TableCell太少，功能太弱。像必须敲回车才能提交修改的问题，开发人员N久以前就作为Bug提交给SUN/Oracle了，有人说JDK9会修复这个问题，但实际上我看了JDK9.0.1中相关的源代码，并没有。开发人员写了几行较详细的注释，说明这个问题不是他的责任，你们自行想办法。
这类问题都留给开发人员自行解决，个人感觉是十分说不过去的。在开发lrJAP平台的过程中，我数次被这样的问题折腾，甚至在日志中写下了这样一段话：
2017-08-25，越来越感觉JavaFX与主流JS(如ExtJS)有差距，今天已经特别想放弃JavaFX，而且特别到一定要把这句话记下来。唉。
拔特，问题总是能够被解决的，所以我们继续。先介绍介绍一下JavaFX与JS类框架相比的一些特性。
1、JavaFX已经与JDK融合，理论上可以使用JDK所有功能，以及所有的第三方Java类库，只要资源能够加载到JVM中，JavaFX就可以使用这些资源。这为我们在各方面都提供了便利。并且降低了上手的难度。
2、提供了较丰富的基础UI组件以及布局。特别是BorderPane，有利于界面模式的开发。可以通过CSS进行代码风格控制。
3、提供了基础的数据绑定功能，可以实现View-Model之间的双向数据(属性)绑定，并能够实现较复杂的事件处理机制。简化了与数据展现、控制相关的代码。
4、提供了使用比较方便的事件机制，并且可以与JDK8提供的Lamda结合，简化事件处理的代码。
5、提供了一些基本的图表。如饼图、折线图等。
个人感觉，JavaFX比较适用于以下业务场景：
1、基于企业内部局域网的应用，或基于相对比较封闭的网络环境下的集团级应用。也就是应用于传统的企业内部管理、业务系统的开发。
2、适用于业务数据结构复杂、业务处理逻辑复杂、有一定的性能需求，但对界面炫酷程度没有极端要求的应用。
3、功能界面可以被抽象、归类，希望在此基础上，实现快速开发。
基于JavaFX的应用如果运行在Internet环境中，则安全、带宽等方面要有相应的保证。个人感觉，对于一般用户来说，使用基于JavaFX的应用，主要困难在于下载、安装、配置JRE，以及基于信任、安全方面的考虑。
第一个JavaFX程序：HelloWorld
所有示例程序，除非特别说明，否则一律基于以下主要环境：Win10，IntelliJ IDEA，JDK 1.8_151。
为了能够更清楚地说明代码结构以及处理细节，代码中的注释有点过度：
package com.lirong.javafx.demo;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class HelloWorldUI extends Application {
private static final double DEFAULT_BUTTOH_HEIGHT = 30;
public static void main(String[] args) {
// 启动应用
Application.launch(args);
}
@Override
public void start(Stage stage) throws Exception {
Button buttonHelloWorld = new Button("HelloWorld");
// 设置按钮大小
buttonHelloWorld.setPrefSize(100, DEFAULT_BUTTOH_HEIGHT);
// 事件处理
buttonHelloWorld.setOnAction(action -> {
// 弹出模态对话框
Alert alert = new Alert(Alert.AlertType.INFORMATION);
alert.setContentText("Hello World!");
alert.initOwner(stage);
alert.showAndWait();
});
// 用于验证ToolBar中组件之间间隔的按钮，仅显示，无事件处理
Button buttonOther = new Button("Other");
buttonOther.setPrefSize(80, DEFAULT_BUTTOH_HEIGHT);
// 模拟工具栏效果
HBox toolBar = new HBox();
// 设置ToolBar中控件与边界上、下、左、右的距离
toolBar.setPadding(new Insets(10));
// 设置ToolBar中控件之间的间隔
toolBar.setSpacing(10);
// 为ToolBar增加元素
toolBar.getChildren().addAll(buttonHelloWorld, buttonOther);
// 设置最外层的容器
BorderPane container = new BorderPane();
container.setTop(toolBar);
// 处理应用场景，默认窗口大小为800*600
Scene scene = new Scene(container, 800, 600);
stage.setTitle("'Hello World' JavaFX Application");
stage.setScene(scene);
stage.show();
}
}
运行效果如下图：
与程序逻辑无关的代码量比较少，默认的界面风格还说得过去。
第一个JavaFX Embedded in Swing程序
通过JavaFX提供的JFXPanel，可以“较方便”地在Swing程序中使用JavaFX组件。如下代码演示如何在JFrame中显示一个使用JavaFX控件模拟的表单信息：
首先，构造一个4列10行的JavaFX GridPane：
package com.lirong.javafx.demo.j1002.swing;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
public class TestGridPaneUI extends GridPane {
public TestGridPaneUI() {
super();
initUI();
}
private void initUI() {
// 显示网格线
setGridLinesVisible(Boolean.TRUE);
// 设置间隔
setVgap(5);
setHgap(5);
setPadding(new Insets(5));
// 设置为4列
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(20);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(30);
ColumnConstraints col3 = new ColumnConstraints();
col3.setPercentWidth(20);
ColumnConstraints col4 = new ColumnConstraints();
col4.setPercentWidth(30);
getColumnConstraints().addAll(col1, col2, col3, col4);
// 填充控件
int row = 0;
int col = 0;
while (row < 10) {
Label label01 = new Label(String.format("Row-%d,Col-%d:", row + 1, col + 1));
label01.setAlignment(Pos.CENTER_RIGHT);
// 右对齐
GridPane.setHalignment(label01, HPos.RIGHT);
add(label01, col, row);
col++;
if (col > 3) {
row++;
col = 0;
}
TextField text01 = new TextField();
// 填充整个单元格
GridPane.setHgrow(text01, Priority.ALWAYS);
add(text01, col, row);
col++;
if (col > 3) {
row++;
col = 0;
}
Label label02 = new Label(String.format("Row-%d,Col-%d:", row + 1, col + 1));
add(label02, col, row);
// 右对齐
GridPane.setHalignment(label02, HPos.RIGHT);
col++;
if (col > 3) {
row++;
col = 0;
}
TextField text02 = new TextField();
// 填充整个单元格
GridPane.setHgrow(text02, Priority.ALWAYS);
add(text02, col, row);
col++;
if (col > 3) {
row++;
col = 0;
}
}
}
}
然后把这个GridPane显示在JFrame中：
package com.lirong.javafx.demo.j1002.swing;
import javafx.embed.swing.JFXPanel;
import javafx.scene.Scene;
import javax.swing.JFrame;
public class TestSwingFX {
public static void main(String[] args) {
JFrame frame = new JFrame();
frame.setTitle("Swing JavaFX Test");
frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
frame.setSize(800, 600);
JFXPanel jfxPanel = new JFXPanel();
TestGridPaneUI gridPaneUI = new TestGridPaneUI();
jfxPanel.setScene(new Scene(gridPaneUI));
frame.add(jfxPanel);
frame.setVisible(Boolean.TRUE);
}
}
运行效果如下：
取消网格线后的效果：
关键类为JFXPanel，它是处理Swing和JavaFX界面、事件等交互的中介。
在拖放JFrame时，GridPanel将根据我们设置的比例自动缩放。