JavaFX 學習之路-第四章:JavaFX 使用CSS美化介面


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

JavaFXCSS

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套用結果

JavaFX 學習之路-第四章:JavaFX 使用CSS美化介面

關於作者

Magic Len

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

相關文章