翻譯自??帶有JavaFX CSS的花式表單

本教程通過添加級聯樣式表（CSS）使您的JavaFX應用程序看起來很有吸引力。您開發設計，創建.css文件并應用新樣式。

在本教程中，您將獲取一個使用標簽，按鈕和背景顏色的默認樣式的登錄表單，并通過一些簡單的CSS修改將其轉換為程式化的應用程序，如圖5-1所示。

圖5-1使用和不使用CSS的登錄表單

本入門教程中使用的工具是NetBeans IDE。在開始之前，請確保您使用的NetBeans IDE版本支持JavaFX 8.有關詳細信息，請參閱Java SE下載頁面的Certified System Configurations頁面。

?

1、創建項目

如果您從一開始就按照入門指南進行操作，那么您已經創建了本教程所需的Login項目。如果沒有，請通過右鍵單擊Login.zip并將其保存到文件系統來下載Login項目。從zip文件中提取文件，然后在NetBeans IDE中打開該項目。

?

2、創建CSS文件

您的第一個任務是創建一個新的CSS文件，并將其保存在與應用程序主類相同的目錄中。之后，您必須使JavaFX應用程序知道新添加的級聯樣式表。

在NetBeans IDE Projects窗口中，展開Login項目節點，然后展開Source Packages目錄節點。

右鍵單擊Source Packages目錄下的login文件夾，選擇New，然后選擇Other。

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

在“文件名”文本字段中輸入“?登錄”，并確保“文件夾”文本字段值為src\login。

單擊完成。

在Login.java文件中，通過包含下面以粗體顯示的代碼行來初始化類的style sheets變量Scene以指向級聯樣式表，以便它如示例5-1所示。

示例5-1初始化樣式表變量

Scene scene = new Scene(grid, 300, 275); primaryStage.setScene(scene); scene.getStylesheets().add(Login.class.getResource("Login.css").toExternalForm()); primaryStage.show();

此代碼src\login在NetBeans項目的目錄中查找樣式表。

?

3、添加背景圖像

背景圖片有助于使您的表單更具吸引力。在本教程中，您將添加一個帶有亞麻紋理的灰色背景。

首先，通過右鍵單擊background.jpg圖像并將其保存到src\loginLogin NetBeans項目的文件夾中來下載背景圖像。

現在，將background-image屬性的代碼添加到CSS文件中。請記住，路徑是相對于樣式表的。因此，在示例5-2的代碼中，background.jpg映像與Login.css文件位于同一目錄中。

例5-2背景圖像

.root {-fx-background-image: url("background.jpg"); }

背景圖像應用于.root樣式，這意味著它將應用于Scene實例的根節點。樣式定義由property（-fx-background-image）的名稱和property（）的值組成url(”background.jpg”)。

圖5-2顯示了具有新灰色背景的登錄表單。

圖5-2灰色亞麻背景

?

4、標簽樣式

下一個要增強的控件是標簽。您將使用.label樣式類，這意味著樣式將影響表單中的所有標簽。代碼在例5-3中。

示例5-3字體大小，填充，重量和對標簽的影響

.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 ); }

此示例增加了字體大小和重量，并應用了灰色的陰影（＃333333）。投影的目的是增加深灰色文本和淺灰色背景之間的對比度。有關投影功能參數的詳細信息，請參閱“?JavaFX CSS參考指南”中有關效果的部分。

增強的用戶名和密碼標簽如圖5-3所示。

圖5-3帶陰影的更大，更大的標簽

?

5、風格文字

現在，Text在表單中的兩個對象上創建一些特殊效果：scenetitle包括文本Welcome，以及actiontarget用戶按下登錄按鈕時返回的文本。您可以將不同的樣式Text應用于以各種方式使用的對象。

在該Login.java文件中，刪除以下代碼行，這些代碼行定義當前為文本對象設置的內聯樣式：

scenetitle.setFont(Font.font(”Tahoma”, FontWeight.NORMAL, 20));

actiontarget.setFill(Color.FIREBRICK);

通過內聯樣式切換到CSS，您可以將設計與內容分開。這種方法使設計人員更容易控制樣式而無需修改內容。

使用setID()Node類的方法為每個文本節點創建一個ID?：以粗體添加以下行，使它們如示例5-4所示。

示例5-4為文本節點創建ID

... Text scenetitle = new Text("Welcome"); scenetitle.setId("welcome-text"); ... ... grid.add(actiontarget, 1, 6); actiontarget.setId("actiontarget"); ..

在Login.css文件中，定義welcome-text和actiontargetID?的樣式屬性。對于樣式名稱，請使用前面帶有數字符號（＃）的ID，如例5-5所示。

例5-5文本效果

#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 ); }

歡迎文本的大小增加到32磅，字體更改為Arial Black。文本填充顏色設置為深灰色（＃818181），并應用內部陰影效果，從而創建浮雕效果。您可以通過將文本填充顏色更改為背景的較暗版本，將內部陰影應用于任何顏色。有關內部陰影屬性參數的詳細信息，請參閱“?JavaFX CSS參考指南”中有關效果的部分。

樣式定義actiontarget與您之前看到的類似。

圖5-4顯示了兩個Text對象的字體更改和陰影效果。

圖5-4帶陰影效果的文本

?

6、按鈕樣式

下一步是設置按鈕的樣式，使用戶將鼠標懸停在按鈕上時更改樣式。此更改將為用戶提供按鈕是交互式的指示，這是一種標準設計實踐。

首先，通過添加例5-6中的代碼為按鈕的初始狀態創建樣式。此代碼使用.button樣式類選擇器，這樣如果您在以后向表單添加按鈕，則新按鈕也將使用此樣式。

例5-6按鈕的陰影

.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 ); }

現在，當用戶將鼠標懸停在按鈕上時，創建略微不同的外觀。您可以使用懸停偽類來執行此操作。偽類包括類的選擇器和由冒號（:)分隔的狀態名稱，如例5-7所示。

例5-7按鈕懸停樣式

.button:hover {-fx-background-color: linear-gradient(#2A5058, #61a2b1); }

圖5-5顯示了按鈕的初始和懸停狀態，其中包含新的藍灰色背景和白色粗體文本。

圖5-5初始和懸停按鈕狀態

圖5-6顯示了最終的應用程序。

圖5-6最終的程式化應用程序

?

7、從這往哪兒走

以下是您可以嘗試的一些事項：

• 看看你可以用CSS創建什么。一些文檔，可以幫助你剝皮的JavaFX應用程序使用CSS，用CSS樣式圖表，以及JavaFX的CSS參考指南。使用CSS進行Skinning和JavaFX Scene Builder用戶指南的CSS Analyzer部分還提供了有關如何使用JavaFX Scene Builder工具為JavaFX FXML布局設置外觀的信息。

• 見造型FX按鈕用CSS為如何創建使用CSS普通按鈕樣式的例子。

總結

以上是生活随笔為你收集整理的JavaFX官方教程（六）之带有JavaFX CSS的花式表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。