JavaFX桌面應用開發-HelloWorld

JavaFX是一個強大的圖形和多媒體處理工具包集合，它允許開發者來設計、創建、測試、調試和部署富客戶端程序，並且和Java一樣跨平台。
JavaFX比Swing好用很多，它允許開發使用FXML來設計和布局界面，跟Qt和Android的布局有點類似。

>> 更多JavaFX文章 >> JavaFX桌面應用開發系列文章

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” 獲取。（如果沒有收到回復，可能是你之前取消過關注。）

關注公眾號，閱讀更多文章。