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,可以寫成:

.Label{
    ...
}

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

套用CSS

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

加入Login.css

.root {
    -fx-background-image: url("javafx-login-background.jpg"); //讀取背景圖片
}

.label {
    -fx-font-size: 21px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 ); //dropshadow參數分別為:模糊類型、RGBA顏色、模糊程度、寬度、水平位移、垂直位移
}

#welcome-text {
    -fx-font-size: 72px;
    -fx-font-family: "Serif";
    -fx-fill: #818181;
    -fx-font-weight: bold;
    -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 2, 0.5 , 0 , 0 ); //innershadow參數分別為:模糊類型、RGBA顏色、模糊程度、寬度、水平位移、垂直位移,位移部份會被填充
}
#actiontarget {
    -fx-fill: FIREBRICK;
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  
}

.button {
    -fx-font-size: 24px;
    -fx-text-fill: white;
    -fx-font-family: "Serif";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

.button:hover {
    -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class LoginJavaFX extends Application {

    @Override
    public void start(Stage primaryStage) {
	//Layout
	GridPane grid = new GridPane(); //Grid排版
	grid.setAlignment(Pos.CENTER); //Layout
	grid.setHgap(10); //水平距離
	grid.setVgap(10); //垂直距離

	grid.setPadding(new Insets(25, 25, 25, 25)); //填充邊界。Insets定義上、右、下、左四個方向的長度。

	//用Layout作為Scene的root node
	Scene scene = new Scene(grid, 300, 275);
	primaryStage.setScene(scene);

	//GUI元件
	Text scenetitle = new Text("歡迎");
	scenetitle.setFont(Font.font("Serif", FontWeight.NORMAL, 20));
	grid.add(scenetitle, 0, 0, 2, 1); //2,1是指這個元件要佔用2格的column和1格的row

	Label userName = new Label("帳號:");
	grid.add(userName, 0, 1);

	TextField userTextField = new TextField();
	grid.add(userTextField, 1, 1);

	Label pw = new Label("密碼:");
	grid.add(pw, 0, 2);

	PasswordField pwBox = new PasswordField();
	grid.add(pwBox, 1, 2);

	Button btn = new Button("登入");
	HBox hbBtn = new HBox(btn); //以新的HBox Layout來對Button進行排版,目的是為了讓Button在GridPane 1,4的位置中可以靠到最右邊。
	hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
	grid.add(hbBtn, 1, 4);

	//登入事件
	final Text actiontarget = new Text(); //顯示結果的Text
	grid.add(actiontarget, 1, 6);
	btn.setOnAction(e -> { //用lambda語法省略實作EventHandler介面
	    actiontarget.setText("登入成功!");
	});

	//讀取與設定CSS
	scene.getStylesheets().add(LoginJavaFX.class.getResource("Login.css").toExternalForm());
	scenetitle.setId("welcome-text");
	actiontarget.setId("actiontarget");
	
	//顯示Stage
	primaryStage.setTitle("登入");
	primaryStage.show();
    }
}

javafx-login-background.jpg下載

CSS套用結果