JavaFX允許開發使用FXML來設計和布局界面，跟Qt和Android的布局有點類似，JavaFX用SceneBuilder來設計和布局界面。
SceneBuilder最新的下載地址可以關注公眾號，發送“SceneBuilder”獲取。
>> 更多JavaFX文章 >> JavaFX桌面應用開發系列文章
這里用到的開發工具有：
- 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” 獲取。（如果沒有收到回復，可能是你之前取消過關注。）
關注公眾號，閱讀更多文章。