JavaFX的圖形功能意外強大,連CSS也不忘支援。使用Netbeans開發JavaFX應用程式,加入CSS的方法十分簡單,就像新增一個class一樣。



JavaFX的CSS

JavaFX所使用的CSS,除了一些特殊的屬性外,其它的跟我們網頁上使用的CSS差異不大,只不過JavaFX的CSS屬性名稱通通會加上「-fx-」這個前綴字串。舉例:「background」->「-fx-background」、「font-size」->「-fx-font-size」。如果原先就會CSS的話,在這個部份並不會有困難。至於id和class的關係也跟網頁一樣,是「.類別名稱」和「#ID名稱」。JavaFX的CSS類別名稱就跟JavaFX Scene Graph的類別名稱一樣,例如我要修改Label這個類別的CSS,可以寫成:

至於ID名稱Scene Graph的節點都有提供setID(String)的這個方法,可以針對不同的物件實體來設定它的ID。

套用CSS

登入表單為例子,可以將登入表單改寫如下:

加入Login.css

javafx-login-background.jpg下載

CSS套用結果