JavaFX 皮膚功能

  作為RIA技術之一，為了讓應用程式的介面看起來更加的漂亮或者更有個性，皮膚功能自然是必不可少的。

  在JavaFX中，可以使用CSS樣式表來進行皮膚的更換。不過JavaFX中的CSS是基於W3C CSS version 2.1，但又不完全相同。

  JavaFX中的換膚有幾種方式。

 1.完全重新定義的控制項樣式

 我們首先建立一個CSS檔案，命名為skin1.css，在裡面定義一個Button的樣式。

  

.CustomButton{    -fx-background-color: #aaffff;    -fx-text-fill: #000000}

  

   如上所示，只是簡單的改變背景色和文本顏色。

  當然大家很容易看出來，與標準的CSS相差不大。

  那麼，我們就在程式中使用一下看看效果。

  

  建立一個JavaFX Project，寫下如下代碼。

  

public class Skintest extends Application {

    public static void main(String[] args) {        launch(args);    }        @Override    public void start(Stage primaryStage) {        primaryStage.setTitle("Test Skin in JavaFX");        final Button btn = new Button("I am a Button");

          StackPane root = new StackPane();        Scene scene = new Scene(root, 800, 600);        scene.getStylesheets().add("skin1.css");        btn.getStyleClass().add("CustomButton");        root.getChildren().add(btn);        primaryStage.setScene(scene);        primaryStage.show();    }}

   在程式只建立了一個Button。

  首先通過Scene.getStylesheets().add(String str)方法進行添加樣式。

  然後使用button.getStyleClass().add(String str)方法讓Button應用這個樣式。

  

  右可以看到，這個Button已經與預設的按鈕完全不一樣了。

  

  下面我們在skin1.css中，新添加一個Button的樣式,暫命名為CustomButton2。

   

.CustomButton2{    -fx-background-color: #000000;    -fx-text-fill: #FFFFFF}

  然後添加Button的事件，讓Button在點擊後，應用這個樣式。

        btn.setOnAction(new EventHandler<ActionEvent>() {            @Override            public void handle(ActionEvent event) {                btn.getStyleClass().add("CustomButton1");            }        });   

  

  記住如果在事件中使用控制項，定義的時候必須定義為final類型。

  那麼，我們運行之後，點擊Button看看。

  

  ，點擊之後，Button應用了新的樣式，變成了黑底白字了。

  怎麼樣？雖然只是簡單的改變了背景色和文字色，但其實看起來效果還是不錯的。

  

  2.重寫控制項的樣式

 有的人會覺得，每個控制項都設定一次樣式很麻煩，為何不能直接設定所有Button的樣式呢？當然，JavaFX也提供這

個功能，我們只需要把上面的skin1.css中的.CustomButton改為.button，就會覆蓋Button控制項的樣式。

  那麼我們更改為.button後，再添加一個Button看看啟動並執行效果。

  

  你會發現，沒有單獨設定Button的樣式，但是將skin1.css添加進Scene的StyleSheets中後，所有的Button樣式都改變了。

 3.更改整個程式的樣式

  同樣的，既然可以更改所有button的樣式，我們也可以進行少許修改，就能更改整個應用軟體的風格了。

  我們只需要添加.root的樣式即可。

  

.root{    -fx-font-size: 16pt;    -fx-base: rgb(255, 145, 47);    -fx-background: rgb(255, 255, 255);}

  然後往代碼中添加幾個其他的控制項，運行看看。

  

  

  大家可以看到，整體的風格都改變了。這也是更換主題的很方便的方法。

  

  另外, CSS中有class styles 和id styles，同樣的JavaFX中也有。對於控制項而言只需要setId（）即可應用id styles。

  OK，時間已經很晚了，JavaFX的換膚功能就講到這裡了。該睡覺去了。