設置樣式聲明中FXML

Question

在HTML我們習慣了細微的能夠編程設置樣式像

<link rel="stylesheet" ... > 

但設置樣式表，我發現爲JavaFX的例子需要編程設置樣式，像

scene.getStylesheets().add("/resources/shell.css"); 

是否可以在FXML中設置樣式表，類似於HTML中的樣式表？

Answer 1

您可以set stylesheets on Parent nodes使用：

parent.getStylesheets().add("/resources/shell.css"); 

因爲元素和屬性可在FXML從公衆的JavaFX的Java API導出，那麼你也可以使用FXML樣式表指定樣式父節點元素（或可互換的屬性）。由於所有容器延伸家長，您可以爲您在FXML引用任何容器設置一個或多個自定義樣式表：

<?xml version="1.0" encoding="UTF-8"?> 
<?import javafx.scene.layout.*?> 
<?import java.net.URL?> 
    .... 
<?scenebuilder-stylesheet fruitcombo.css?> 

<AnchorPane prefHeight="205.0" prefWidth="168.0" 
    styleClass="layout" 
    fx:controller="fruit.FruitComboController" 
    xmlns:fx="http://javafx.com/fxml"> 
    <children> 
     .... 
    </children> 
    <stylesheets> 
     <URL value="@fruitcombo.css" /> 
    </stylesheets> 
</AnchorPane> 

見this sample的FXML文件從一個FXML文件中引用CSS文件的完整的可執行樣本。

有幾個不錯的在上面的代碼功能：

在樣式表URL奇怪@前綴並不是必需的，但可以用來利用的JavaFX的location resolution的。 「位置解析運算符（用屬性值的前綴」@「表示）用於指定應該將屬性值視爲相對於當前文件的位置，而不是簡單的字符串。」

下面的行不需要在運行，但所用的SceneBuilder tool如果您正在使用的工具來查找在設計時所需要的CSS樣式表：

<?scenebuilder-stylesheet fruitcombo.css?> 

更新有關評論

警告：它是FXML 1.0，它不適用於2.0，javafx.fxml.LoadException：URL不是有效的類型。

我覺得這個評論有點不正確。據我所知，目前沒有FXML 2.0這樣的東西。

評論者收到LoadException的原因是因爲本文中的指示性片段未將java.net.URL類導入到FXML文檔中。我更新了該片段以包含java.net.URL導入，並添加了一些省略號....以闡明該片段的意圖。 「ellipsis」的意思是「一系列點通常表示故意遺漏文本中的單詞，句子或整個部分而不改變其原始含義」。

爲了最好地理解這個答案，建議編譯並運行鏈接的示例代碼。

警告不要使用InputStream的負載功能FXMLLoader

我強烈建議與位置構建新FXMLLoader，而不是使用FXMLLoader.load(InputStream)功能。當使用靜態load（）函數時，相對位置引用無法解析，因爲FXML文件沒有基址。

即，不這樣做：

InputStream input = this.getClass().getResourceAsStream("layout.fxml"); 
FXMLLoader loader = new FXMLLoader.load(input); 
Parent content = loader.load(); 

而是做：

String url = this.getClass().getResource("layout.fxml").toExternalForm(); 
FXMLLoader loader = new FXMLLoader(url); 
Parent content = loader.load(); 

Answer 2

是，例如參見實施例4-8的this tutorial，通過應用以下屬性的節點：

stylesheets="fxmlexample/Login.css" 

例如

<GridPane stylesheets="fxmlexample/Login.css"> 

Answer 3

如果你要使用FXML使用JavaFX你應該花一些時間來下載和使用SceneBuilder。一旦你這樣做，使用CSS樣式表變得簡單。當然，在SceneBuilder運行後使用NetBeans，在NetBeans dxml樣板應用程序中打開預構建的dxml文件會導致它在SceneBuilder中自動打開進行編輯。一旦你把所有的StackPlane，按鈕和標籤都撕掉並放入你真正想要的控件和容器中，只需將樣式表直接添加到SceneBuilder中即可。在主菜單的預覽下，有一個CSS樣式表的菜單選擇。選擇它會打開一個子菜單，它可以讓你加載樣式表文件。

加載文件後，控件將根據樣式表中的規則顯示爲皮膚，它們將不會顯示該皮膚，直到您在SceneBuilder的屬性部分中選擇每一個並將該樣式表聲明爲已應用到那個控制。然後該樣式將顯示應用程序何時運行。