JavaFX 學習之路-第五章:使用FXML製作圖形介面


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

JavaFX Scene Builder

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

JavaFX 學習之路-第五章:使用FXML製作圖形介面

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

JavaFX 學習之路-第五章:使用FXML製作圖形介面

使用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

執行結果:
JavaFX 學習之路-第五章:使用FXML製作圖形介面

關於作者

Magic Len

各位好,我是Magic Len,是這網站的管理員。我是台灣台中大肚山上人,畢業於台中高工資訊科和台灣科技大學資訊工程系,曾在桃機航警局服役。我熱愛自然也熱愛科學,喜歡和別人分享自己的知識與經驗。如果你有興趣認識我,可以加我的Facebook,並且請註明是從MagicLen來的。

相關文章