2019獨角獸企業(yè)重金招聘Python工程師標準>>>

3花式窗體與JavaFX CSS

本教程是通過添加級聯(lián)樣式表(CSS)來使您的JavaFX應用程序看起來很有吸引力。您開發(fā)設計，創(chuàng)建.css文件并應用新樣式。

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

圖3-1有和沒有CSS的登錄表單

“圖3-1有和無CSS登錄表”的說明

本入門教程中使用的工具是NetBeans IDE。開始之前，請確保您正在使用的NetBeans IDE版本支持JavaFX 2.有關詳細信息，請參閱系統(tǒng)要求。

創(chuàng)建項目

如果從一開始就遵循入門指南，那么您已經(jīng)創(chuàng)建了本教程所需的登錄項目。如果沒有，請通過右鍵單擊Login.zip下載登錄項目并將其保存到文件系統(tǒng)。從zip文件中提取文件，然后在NetBeans IDE中打開項目。

創(chuàng)建CSS文件

您的第一個任務是創(chuàng)建一個新的CSS文件，并將其保存在與應用程序主類相同的目錄中。之后，您必須使JavaFX應用程序了解新添加的級聯(lián)樣式表。

在NetBeans IDE Projects窗口中，展開Login項目節(jié)點，然后展開Source Packages目錄節(jié)點。? 右鍵單擊“ 源軟件包”目錄下的登錄文件夾，然后選擇“ 新建”，然后選擇“ 其他”。? 在“新建文件”對話框中，選擇“ 其他”，然后選擇“ 級聯(lián)樣式表”，然后單擊“ 下一步”。? 輸入文件名文本字段的登錄，并確保文件夾文本字段值為src\login。? 單擊完成。? 在Login.java文件中，通過包含以下粗體顯示的代碼行，初始化類的style sheets變量Scene以指向級聯(lián)樣式表，以使其顯示如示例3-1所示。 示例3-1初始化樣式表變量 Example 3-1 Initialize the stylesheets Variable

Scene scene = new Scene(grid, 300, 275);

primaryStage.setScene(scene);

scene.getStylesheets().add

(Login.class.getResource("Login.css").toExternalForm());

primaryStage.show(); 此代碼查找src\loginNetBeans項目目錄中的樣式表。

添加背景圖像

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

首先，通過右鍵單擊background.jpg下載背景圖像并將其保存到文件系統(tǒng)。然后，將文件復制到src\login登錄NetBeans項目中的文件夾中。

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

示例3-2背景圖像

Example 3-2 Background Image

.root {

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

}

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

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

圖3-2灰亞麻背景

“圖3-2灰亞麻背景”

標簽的樣式

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

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

Example 3-3 Font Size, Fill, Weight, and Effect on Labels

.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)。陰影的目的是增加深灰色文字和淺灰色背景之間的對比。有關drop shadow屬性參數(shù)的詳細信息，請參閱“ JavaFX CSS參考指南”中有關效果的部分。

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

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

說明“圖3-3帶有陰影的更大，更大的標簽”

風格文本

現(xiàn)在，可以對兩個Text對象創(chuàng)建一些特殊效果：scenetitle包含文本W(wǎng)elcome，以及actiontarget當用戶按下登錄按鈕時返回的文本。您可以將不同的樣式Text應用于以不同方式使用的對象。

在Login.java文件中，刪除以下代碼行，定義當前為文本對象設置的內(nèi)聯(lián)樣式： scenetitle.setFont(Font.font(“Tahoma”, FontWeight.NORMAL, 20)); actiontarget.setFill(Color.FIREBRICK); 通過內(nèi)聯(lián)樣式切換到CSS，您可以將設計與內(nèi)容分開。這種方法使設計人員更容易掌握風格，而無需修改內(nèi)容。? 使用setID()Node類的方法為每個文本節(jié)點創(chuàng)建一個ID ： scenetitle.setId("welcome-text"); actiontarget.setId("actiontarget");? 在Login.css文件中，定義welcome-text和actiontargetID 的樣式屬性。對于樣式名稱，請使用前面帶有數(shù)字符號(＃)的ID，如示例3-4所示。 示例3-4文本效果

Example 3-4 Text Effect

#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)，并應用內(nèi)陰影效果，產(chǎn)生壓花效果。您可以通過將文本填充顏色更改為背景的較暗版本來將內(nèi)部陰影應用于任何顏色。有關內(nèi)陰影屬性參數(shù)的詳細信息，請參閱“ JavaFX CSS參考指南”中有關效果的部分。

風格定義actiontarget類似于您之前看過的。

圖3-4顯示了兩個Text對象的字體變化和陰影效果。

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

“圖3-4帶陰影效果的文字”說明

按鈕的風格

下一步是對按鈕進行風格調(diào)整，使用戶將鼠標懸停在其上時更改樣式。此更改將給用戶指示按鈕是交互式的，標準設計實踐。

首先，通過添加示例3-5中的代碼，為按鈕的初始狀態(tài)創(chuàng)建樣式。此代碼使用.button樣式類選擇器，以便如果您稍后在表單中添加按鈕，則新按鈕也將使用此樣式。

示例3-5按鈕陰影

Example 3-5 Drop Shadow for Button

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

}

現(xiàn)在，當用戶將鼠標懸停在按鈕上時，會創(chuàng)建一個稍微不同的外觀。你可以用懸浮偽類來實現(xiàn)。偽類包括類的選擇器和由冒號(:)分隔的狀態(tài)的名稱，如示例3-6所示。

示例3-6按鈕懸停樣式

Example 3-6 Button Hover Style

.button:hover {

-fx-background-color: linear-gradient(#2A5058, #61a2b1);

}

圖3-5顯示了具有新的藍灰色背景和白色粗體文本的按鈕的初始和懸停狀態(tài)。

圖3-5初始和懸停按鈕狀態(tài)

“圖3-5初始和懸停按鈕狀態(tài)”的說明

最終應用程序如圖3-6所示。

圖3-6最終風格化應用程序

“圖3-6最終風格化應用程序”的說明

轉(zhuǎn)載于:https://my.oschina.net/ch66880/blog/993959

總結(jié)

以上是生活随笔為你收集整理的java fx 建立窗体,3花式窗体与JavaFX CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。