3 Fancy Forms with JavaFX CSS

本教程是關於看你的JavaFX應用程序添加一個層疊樣式表（CSS）的吸引力。你的設計開發，創建一個。css文件，並應用新的樣式。在本教程中，您將需要一個登錄表單，標籤，按鈕和背景顏色使用默認樣式，並用幾個簡單的CSS修改，它變成了一種程式化的應用，如圖3-1所示。

這個入門教程中所使用的工具是NetBeans IDE中。開始之前，請確保您正在使用該版本的NetBeans IDE支持JavaFX2。有關詳情，請參閱系統需求。

創建的CSS文件
你的第一個任務是創建一個新的CSS文件，並保存在同一個包，它爲您的應用程序的主類。之後，你必須知道JavaFX應用程序添加新的層疊樣式表。

在NetBeans IDE項目窗口中，右鍵單擊“源包目錄下的文件夾中登錄，並選擇”新建“，然後其他。

在新建文件對話框，選擇“其他”，然後層疊樣式表，並單擊“下一步”。

輸入JavaFxWelCome並單擊Finish。

在JavaFxWelCome.java文件，初始化變量指向級聯樣式表，包括前行stage.show（）之前添加以下代碼;

scene.getStylesheets().add(JavaFxWelCome.class.getResource("JavaFxWelCome.css").toExternalForm());

 

添加背景圖片
背景圖像有助於使你的形式更具吸引力。在本教程中，您可以添加一個灰色的背景，用亞麻般的質感。

首先，下載右擊background.jpg並保存到你的文件系統，背景圖像。然後，登錄在NetBeans項目文件夾複製到該文件。

現在，添加背景圖像屬性的CSS文件中的代碼。記住該路徑是相對於樣式表。因此，在示例3-1中的代碼，background.jpg形象是在作爲JavaFxWelCome.css文件相同的目錄。注意：JavaFxWelCome.css,JavaFxWelCome.css,background.jpg要在同一目錄中。

以下是CSS樣式表，自己琢磨吧。

root { 
    display: block;
}
.root {
-fx-background-image: url("background.jpg");
}
.label {
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

#welcome-text {
   -fx-font-size: 32px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
#actiontarget {
  -fx-fill: FIREBRICK;
  -fx-font-weight: bold;
  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  
}

.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -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 );
}