翻译自  带有JavaFX CSS的花式表单

本教程通过添加级联样式表（CSS）使您的JavaFX应用程序看起来很有吸引力。您开发设计，创建.css文件并应用新样式。

在本教程中，您将获取一个使用标签，按钮和背景颜色的默认样式的登录表单，并通过一些简单的CSS修改将其转换为程式化的应用程序，如图5-1所示。

1、创建项目

如果您从一开始就按照入门指南进行操作，那么您已经创建了本教程所需的Login项目。如果没有，请通过右键单击Login.zip并将其保存到文件系统来下载Login项目。从zip文件中提取文件，然后在NetBeans IDE中打开该项目。

2、创建CSS文件

您的第一个任务是创建一个新的CSS文件，并将其保存在与应用程序主类相同的目录中。之后，您必须使JavaFX应用程序知道新添加的级联样式表。

1. 在NetBeans IDE Projects窗口中，展开Login项目节点，然后展开Source Packages目录节点。

2. 右键单击Source Packages目录下的login文件夹，选择New，然后选择Other。

3. 在“新建文件”对话框中，选择“ 其他”，然后选择“ 层叠样式表”，并单击“ 下一步”。

4. 在“文件名”文本字段中输入“ 登录”，并确保“文件夹”文本字段值为src\login。

5. 单击完成。

6. 在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文件位于同一目录中。

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

4、标签样式

下一个要增强的控件是标签。您将使用.label样式类，这意味着样式将影响表单中的所有标签。代码在例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 );
}

5、风格文字

现在，Text在表单中的两个对象上创建一些特殊效果：scenetitle包括文本Welcome，以及actiontarget用户按下登录按钮时返回的文本。您可以将不同的样式Text应用于以各种方式使用的对象。

1. 在该Login.java文件中，删除以下代码行，这些代码行定义当前为文本对象设置的内联样式：

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

   actiontarget.setFill(Color.FIREBRICK);

   通过内联样式切换到CSS，您可以将设计与内容分开。这种方法使设计人员更容易控制样式而无需修改内容。

2. 使用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");
   ..

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

6、按钮样式

下一步是设置按钮的样式，使用户将鼠标悬停在按钮上时更改样式。此更改将为用户提供按钮是交互式的指示，这是一种标准设计实践。

首先，通过添加例5-6中的代码为按钮的初始状态创建样式。此代码使用.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 );
}

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

7、从这往哪儿走

以下是您可以尝试的一些事项：

• 看看你可以用CSS创建什么。一些文档，可以帮助你剥皮的JavaFX应用程序使用CSS，用CSS样式图表，以及JavaFX的CSS参考指南。使用CSS进行Skinning和JavaFX Scene Builder用户指南的CSS Analyzer部分还提供了有关如何使用JavaFX Scene Builder工具为JavaFX FXML布局设置外观的信息。

• 见造型FX按钮用CSS为如何创建使用CSS普通按钮样式的例子。