JavaFX CSS

JavaFX教程 - JavaFX CSS

JavaFX 應(yīng)用程序支持主題通過(guò) CSS 設(shè)置。

主題可以轉(zhuǎn)換整個(gè)應(yīng)用程序的外觀，而不改變其功能。

在 JavaFX 中，您可以創(chuàng)建，修改或使用現(xiàn)有主題來(lái)應(yīng)用程序。

應(yīng)用主題

setUserAgentStylesheet(String URL) 方法接受表示 JavaFX CSS 文件的有效URL字符串。

CSS 文件捆綁在jar應(yīng)用程序內(nèi)，或者它們可以駐留在本地文件系統(tǒng)或遠(yuǎn)程 Web 服務(wù)器上。

要從類(lèi)路徑加載 CSS 文件，請(qǐng)調(diào)用 getClass()。getResource（“path / some_file.css”）。toExternalForm() 方法。它會(huì)找到 CSS 文件并產(chǎn)生一個(gè) URL String。

下面的代碼加載 sample.css 文件作為當(dāng)前的外觀。

sample.css 文件和 Java 類(lèi)位于同一目錄中，因此文件名前面不需要有路徑。

Application.setUserAgentStylesheet(getClass().getResource("sample.css")
.toExternalForm());

完整的源代碼。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {
  public static void main(String[] args) {
    Application.launch(args);
    
  }

  @Override
  public void start(Stage primaryStage) {
    Application.setUserAgentStylesheet(getClass().getResource("sample.css")
        .toExternalForm());
    
    
    Group root = new Group();
    Scene scene = new Scene(root, 300, 250);

    primaryStage.setScene(scene);
    primaryStage.show();
  }
}

setUserAgentStylesheet() 方法將樣式全局應(yīng)用于應(yīng)用程序擁有的所有場(chǎng)景。

預(yù)定義皮膚

JavaFX 8 目前包含兩個(gè)樣式表，Caspian 和 Modena，它們用作默認(rèn)的跨平臺(tái)外觀和感覺(jué)皮膚。

因?yàn)閮蓚€(gè)樣式表是預(yù)定義的，您可以使用 setUserAgentStylesheet（）方法在它們之間輕松切換。

以下代碼顯示如何在 Caspian 和 Modena 外觀樣式表之間切換。

// Switch  to JavaFX 2.x"s CASPIAN  Look and  Feel. Application.setUserAgentStylesheet(STYLESHEET_CASPIAN);

// Switch  to JavaFX 8"s Modena Look and  Feel. 
Application.setUserAgentStylesheet(STYLESHEET_MODENA);

我們可以從 jfxrt.jar 文件中提取 CSS 文件 caspian.css 和 modena.css，或者查看位于 http://openjdk.java.net 的 JavaFX 源代碼。

當(dāng)調(diào)用 setUserAgentStylesheet(null) 時(shí)，默認(rèn)樣式表 (Modena) 將被自動(dòng)加載并設(shè)置為當(dāng)前外觀。

對(duì)于JavaFX 2.x，默認(rèn)樣式表將是 Caspian。

場(chǎng)景主題

通過(guò)調(diào)用 scene.getStylesheets().add() 方法，我們可以為單個(gè)場(chǎng)景及其子節(jié)點(diǎn)設(shè)置樣式。

我們將傳遞一個(gè)表示 JavaFX CSS 文件的 URL 字符串。

以下代碼調(diào)用 setUserAgentStylesheet(null) 加載 Modena 作為外觀，然后通過(guò)調(diào)用 getStylesheets()。add() 方法設(shè)置場(chǎng)景的其他樣式。

Application.setUserAgentStylesheet(null); // defaults to Modena

// apply   custom  look  and  feel to the   scene. 
scene.getStylesheets()
.add(getClass().getResource("my_cool_skin.css")
.toExternalForm());

CSS樣式

類(lèi)似于 HTML5 使用 CSS 樣式表的方式，在場(chǎng)景圖上有與 N??ode 對(duì)象相關(guān)聯(lián)的選擇器或樣式類(lèi)。

所有 JavaFX 場(chǎng)景圖形節(jié)點(diǎn)分別有 setId()，getStyleClass()。add() 和 setStyle() 方法來(lái)應(yīng)用可以改變節(jié)點(diǎn)的背景顏色，邊框，筆畫(huà)等的樣式。

選擇器在場(chǎng)景圖上定位 JavaFX 節(jié)點(diǎn)，然后我們可以使用 CSS 樣式定義對(duì)它們進(jìn)行樣式化。

兩種類(lèi)型的選擇器類(lèi)型是 id 和 class 。

id 選擇器是在場(chǎng)景節(jié)點(diǎn)上設(shè)置的唯一字符串名稱(chēng)。

類(lèi)選擇器是一個(gè)字符串名稱(chēng)，可以作為標(biāo)記添加到任何 JavaFX 節(jié)點(diǎn)。

類(lèi)選擇器與 Java 類(lèi)的概念無(wú)關(guān)。類(lèi)選擇器用于對(duì)節(jié)點(diǎn)進(jìn)行分組以將它們與一個(gè)CSS樣式定義一起設(shè)置樣式。

ID選擇器

id 選擇器是賦值給節(jié)點(diǎn)的唯一字符串名稱(chēng)。當(dāng)使用 id 選擇器時(shí)，我們將調(diào)用 JavaFX 節(jié)點(diǎn)對(duì)象上的 setId(String ID) 方法來(lái)設(shè)置其id。

例如，要定位 id 為 my-button 的 Button 實(shí)例，您將調(diào)用 setId(“my-button”) 方法。

要為按鈕設(shè)置 id 為 my-button 的樣式，您將創(chuàng)建一個(gè)用 id 聲明的 CSS 樣式定義塊 selector＃my-button，如下所示:

#my-button {
    -fx-text-fill: rgba(17, 145,  213);
    -fx-border-color:  rgba(255, 255,  255,  .80);
    -fx-border-radius: 8;
    -fx-padding: 6  6  6  6;
}

此 CSS 樣式塊將應(yīng)用于具有 my-button 的唯一標(biāo)識(shí)的按鈕。

CSS 選擇器名稱(chēng)前面帶有＃符號(hào)，而 Java 代碼中的 id 不使用 ＃ 符號(hào)。

類(lèi)選擇器

當(dāng)使用類(lèi)類(lèi)型選擇器時(shí)，我們將調(diào)用 getStyleClass()。add(String styleClass) 方法向節(jié)點(diǎn)添加一個(gè)選擇器。該方法允許我們有多個(gè)樣式類(lèi)來(lái)對(duì)節(jié)點(diǎn)進(jìn)行樣式。

getStyleClass()方法返回一個(gè)ObservableList，我們可以添加和刪除樣式類(lèi)來(lái)動(dòng)態(tài)更新它的外觀。

以下代碼通過(guò)getStyleClass().add("num-button")方法定位樣式類(lèi)包含num-button的按鈕。

以下是用類(lèi)選擇器聲明的 CSS 樣式定義塊 .num-button :

.num-button  {
    -fx-background-color: white, rgb(189,218,230), white;
    -fx-background-radius: 50%;
    -fx-background-insets: 0, 1, 2;
    -fx-font-family:  "Helvetica";
    -fx-text-fill:  black;
    -fx-font-size:  20px;
}

此 CSS 樣式塊將應(yīng)用于具有樣式類(lèi) num-button 的按鈕。

CSS 選擇器名稱(chēng)以.號(hào)為前綴，而 Java 代碼中的選擇器不使用。符號(hào)。

選擇器模式

選擇器可以有模式來(lái)遍歷場(chǎng)景圖的節(jié)點(diǎn)從根節(jié)點(diǎn)到子節(jié)點(diǎn)的層次結(jié)構(gòu)。

我們可以對(duì)父節(jié)點(diǎn)是某種類(lèi)型的子節(jié)點(diǎn)進(jìn)行樣式化。以下代碼顯示了如何設(shè)置所有按鈕的樣式，其父對(duì)象是HBox。

.hbox  > .button {  -fx-text-fill: black;  }

選擇器模式 .hbox>.button styles 作為 HBox 的后代的 Button 節(jié)點(diǎn)。兩個(gè)選擇器之間的大于符號(hào)允許系統(tǒng)知道要對(duì)哪些節(jié)點(diǎn)進(jìn)行樣式。

JavaFX 節(jié)點(diǎn)的選擇器都是小寫(xiě)字母，如果控件具有多個(gè)字，則它們用連字符分隔。例如，GridPane 的類(lèi)選擇器將是 .grid-pane 。

我們還可以使用公共屬性來(lái)為兩種不同類(lèi)型的節(jié)點(diǎn)設(shè)置樣式。以下代碼顯示如何為所有標(biāo)簽和文本節(jié)點(diǎn)設(shè)置樣式。

.label,.text {  -fx-font-size: 20px;  }