TL;DR

這篇使用 Scene Builder 以拖拉方式建立 CalcFX 的 FXML 畫面，完成 GridPane、欄列限制、顯示器與按鈕配置。Scene Builder 負責產生畫面描述，ABCL 則在程式中載入 FXML。

安裝 Scene Builder

Scene Builder 是 JavaFX 的視覺化畫面設計工具，可以透過拖拉元件建立 FXML。官方下載頁面如下：

Gluon Scene Builder

Windows

在官方頁面的 Download 區塊選擇 Windows 的 Installer（.msi）下載。本文撰寫時的版本是 Scene Builder 26.0.0。

下載完成後，雙擊 .msi 安裝檔，依照安裝精靈完成以下步驟：

1. 同意授權條款。
2. 選擇安裝位置。
3. 確認開始安裝。
4. 安裝完成後，從開始選單啟動 Scene Builder。

Scene Builder 是獨立的桌面工具，只會使用它開啟與保存 FXML 檔案。

Linux

我在 Linux Mint 使用官方提供的 DEB 套件安裝，檔案名稱是 SceneBuilder-26.0.0.deb。下載 DEB 套件後，可以透過軟體管理員安裝，也可以使用系統提供的套件安裝指令完成安裝。

使用 Scene Builder 開啟 FXML

啟動 Scene Builder 後，從 File 選單開啟前一篇建立的 res/CalcFX.fxml。開啟之後，左側可以看到文件中的元件階層，中間是畫面預覽，右側則是選取元件的屬性設定。

這種操作方式和直接編輯 XML 不同：畫面上的元件可以直接拖拉、選取與調整，最後再由 Scene Builder 保存成 FXML。

建立 GridPane 與設定 CSS

CalcFX 使用 GridPane 作為根布局。先建立或選取 GridPane，再從右側的 Properties 設定 Hgap 與 Vgap，讓按鈕之間保留適當間距。

左下角的階層樹狀圖會顯示目前 FXML 的元件結構；當你選取 GridPane 時，該節點會被反白，方便確認它是否就是根元素與後續子元件的容器。

接著在右側的 JavaFX CSS 區域設定根元件的 Style Class 為 root-pane，讓前一篇建立的 calcfx.css 可以套用到這個 GridPane：

CSS 檔案本身仍然放在資源目錄中，Scene Builder 只負責將樣式類別寫入 FXML，不會取代 CSS 的內容。

增加欄與列

計算機需要四欄、五列：第一列放顯示器，後面四列放置按鈕。先在左下角的階層樹狀圖中選中 GridPane，再按下右鍵選擇「加入欄列」功能：

欄列建立後，選取各個 Constraint，在右側設定百分比與伸展方式。四欄各設定為 25%；第一列不跟著視窗高度伸展，其餘四列平均分配剩餘高度：

這些設定最後會轉換成 FXML 的 ColumnConstraints、RowConstraints，不需要再用 ABCL 逐一建立 Java 物件。

建立顯示器

從 Controls 面板加入一個 TextField，將它放到第一列，並設定以下屬性：

• Text：0
• ID：display
• Editable：取消
• Style Class：display
• Column Span：4

其中 display ID 很重要，因為 ABCL 會透過 lookup("#display") 取得這個 TextField，並更新計算結果。

建立計算機按鈕

接著加入數字與運算按鈕，依照前一篇的計算機布局放置：

7   8   9   /
4   5   6   *
1   2   3   -
C   0   =   +

每個按鈕都套用 calc-btn Style Class；運算按鈕另外加入 op-btn，讓 CSS 可以用不同顏色區分功能按鈕。

執行結果

保存 FXML 後，ABCL 仍然會使用 FXMLLoader 載入 res/CalcFX.fxml。不同的是，這次的 FXML 不是完全手寫，而是透過 Scene Builder 建立與調整；載入後的 CalcFX 畫面仍然可以交給後續程式邏輯使用。

至此，CalcFX 的畫面已經可以透過 Scene Builder 建立。下一篇將處理 Scene Builder 產生的元件 ID 與事件設定，讓按鈕重新連接到 ABCL 的計算機邏輯。