除了使用Java原生的Code產生圖形介面外,JavaFX還支援使用XML來描述圖形介面(這好像已經成為一種趨勢了)。甚至Oracle還提供了一種叫作JavaFX Scene Builder的工具,讓開發人員製作圖形介面完全不用寫到程式。



JavaFX Scene Builder

JavaFX Scene Builder可以到Oracle的網站上下載安裝,之後就可以拿來排介面了!

拿之前登入表單的例子,使用JavaFX Scene Builder花不到五分鐘就可以做好下面的介面!之後存檔成fxml檔案就可以套入在JavaFX內啦!

使用FXML開發JavaFX的專案要注意到,若程式需要存取到圖形元件的狀態,需設定ID欄位,這樣才可以使用node的lookup或是lookupAll方法,以CSS名稱(#ID名稱)的字串方式,來找出該node底下符合此ID名稱的sub node。如果圖形元件需要處理事件,可以設定onAction欄位,由FXML去指向事件觸發後要執行的方法名稱,但此方法需要用到@FXML的annotation來實作。另外,@FXML也可以抓到FXML元件的fxID。要使用@FXML annotation的話,必須要替FXML指定Controller(指到JavaFX應用程式內的某個類別)。

套入FXML

JavaFX提供FXMLLoader.load()方法,可以將FXML讀入,並轉換成Node。

撰寫程式

LoginJavaFX.java

FXController.java

Login.fxml

執行結果: