JavaFX布局神器-SceneBuilder

2020 年 7 月 27 日
筆記
JavaFX

JavaFX允許開發使用FXML來設計和布局介面，跟Qt和Android的布局有點類似，JavaFX用SceneBuilder來設計和布局介面。
SceneBuilder最新的下載地址：//gluonhq.com/products/scene-builder

這裡用到的開發工具有：

IntelliJ IDEA（社區版）
JavaFX IDEA 插件
SceneBuilder

1. 安裝SceneBuilder

從上面的下載地址，下載對應作業系統環境的SceneBuilder安裝即可。
SceneBuilder的介面主要分為四個部分：

頂部菜單欄
左邊容器和控制項區域
右邊屬性和布局區域
中間介面設計區域

SceneBuilder對JavaFX開發來說很有幫助，可以通過它來了解JavaFX提供了哪些控制項，這些控制項都有什麼屬性。
另外，在通過SceneBuilder布局後按Ctrl + P來預覽介面，這樣就不用寫程式碼也能查看自己設計的介面。

2. IntelliJ IDEA 關聯 SceneBuilder

SceneBuilder可以單獨使用，但更方便的是讓它跟IDEA集成，這樣子的話，在開發過成功就不需要打開兩個軟體了。
在IDEA關聯SceneBuilder之前，可以先IDEA裝一個JavaFX插件，這個插件對FXML和Contoller程式碼關聯很有用。

安裝完JavaFX IDEA 插件之後，通過指定SceneBuilder可執行程式的路徑就可以將 SceneBuilder集成到IDEA中了。

至此，開發工具的環境就搭建好了。

3. 在IDEA中使用SceneBuilder

SceneBuilder跟IntelliJ IDEA集成之後，在IDEA打開FXML文件就可以用SceneBuilder來布局介面了。
可以通過切換底部的「Text」和「Scene Builder」來實現程式碼布局和控制項布局。

一般來說，可以先通過SceneBuilder將JavaFX應用做一個大體的介面排版布局，然後通過Text調整FXML的布局的程式碼，比如刪除一些SceneBuilder生成不必要的程式碼等。

4. 通過實踐示例使用FXML

通過以上的步驟已經可以很快的開發JavaFX的介面了，最後這裡通過一個示例，來說明一下FXML控制項是如何跟Java程式碼進行交互的。
這個示例通過點擊按鈕（Button）實現標籤（Label）的文字替換。

標籤（Label）通過fx:id跟Controller的Label變數text綁定。
按鈕（Button）通過onAction綁定Controller中的事件處理方法click()。

視圖層程式碼：

<center>
  <VBox alignment="CENTER" spacing="10.0">
   <Label fx:id="text"/>
   <Button text="Go." onAction="#click"/>
  </VBox>
</center>

控制層程式碼：

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.");
    }
    public void click(ActionEvent event) {
        String[] lArr = new String[] {"A", "B", "C", "D"};
        model.setText(lArr[new Random().nextInt(lArr.length)]);
    }
}

最終的效果圖：

這樣子，就通過點擊按鈕隨機生成（A,B,C,D）這四個字母顯示在標籤上，完成FXML和Controller的java程式碼的通訊了。
這裡採用MVC模式，通過修改model的值，就能控制view的顯示。
關於MVC模式的完成程式碼，可以查看我的另一篇博文（JavaFX桌面應用開發-HelloWorld），或者通過我的公眾號下載完整的源碼。

=========================================================
源碼可關注公眾號「HiIT青年」發送「javafx-fxml」獲取。

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

Tags: JavaFX