JavaFX官方教程（六）之带有JavaFX CSS的花式表单

翻译自带有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普通按钮样式的例子。