5 使用JavaFX CSS创建漂亮的表单

创建项目

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

创建CSS文件

你的第一个任务是创建一个新的CSS文件，并将其保存在应用程序的主类所在的同一目录中。之后，你必须让JavaFX应用程序知道新添加的层叠样式表。

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

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

3. 在新建文件对话框中，选择Other，然后选择Cascading Style Sheet，点击Next。

4. 在文件名文本框中输入Login，确保文件夹文本框的值为src\login。

5. 点击Finish。

6. 在Login.java文件中，将Scene类的style sheets变量初始化为指向层叠样式表的路径，包括下面粗体显示的代码行，使其显示如示例5-1所示。

   示例5-1 初始化stylesheets变量

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

   这段代码在NetBeans项目的src\login目录中查找样式表。

添加背景图片

添加背景图片可以使你的表单更具吸引力。在本教程中，你将添加一个带有亚麻纹理的灰色背景。

首先，通过右键点击background.jpg图片并将其保存到Login NetBeans项目的src\login文件夹中来下载背景图片。

现在，在CSS文件中添加background-image属性的代码。请记住，路径是相对于样式表的。所以，在示例5-2中的代码中，background.jpg图片与Login.css文件位于同一目录中。

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

背景图片应用于.root样式，这意味着它应用于Scene实例的根节点。样式定义由属性名称（-fx-background-image）和属性值（url(”background.jpg”)）组成。

图5-2显示了具有新灰色背景的登录表单。

图5-2 灰色亚麻背景

"图5-2 灰色亚麻背景"的描述

样式化标签

下一个要增强的控件是标签。您将使用.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 );
}

这个示例增加了字体大小和粗细，并应用了一个灰色的阴影效果（#333333）。阴影的目的是在深灰色文本和浅灰色背景之间增加对比度。有关阴影属性的参数详细信息，请参阅JavaFX CSS参考指南中的效果部分。

增强后的用户名和密码标签如图5-3所示。

图5-3 更大、更粗的带有阴影的标签

"图5-3 更大、更粗的带有阴影的标签"的描述

样式文本

现在，在表单中对两个Text对象添加一些特殊效果：包括文本Welcome的scenetitle和用户按下“登录”按钮后返回的文本actiontarget。您可以对在不同方式中使用的Text对象应用不同的样式。

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

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

   actiontarget.setFill(Color.FIREBRICK);

   通过使用CSS而不是内联样式，您将设计与内容分离。这种方法使得设计师可以更轻松地控制样式，而无需修改内容。

2. 通过使用Node类的setID()方法为每个文本节点创建一个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和actiontarget的ID定义样式属性。对于样式名称，使用以井号(#)开头的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 带有阴影效果的文本

"图5-4 带有阴影效果"的描述

为按钮添加样式

下一步是为按钮添加样式，使其在用户将鼠标悬停在上面时改变样式。这种改变将向用户指示按钮是可交互的，这是一种标准的设计实践。

首先，通过在示例 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 );
}

现在，为当用户将鼠标悬停在按钮上时创建一个稍微不同的外观。您可以使用hover伪类来实现这一点。伪类包括类选择器和状态名称，用冒号（:）分隔，如示例 5-7所示。

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

图 5-5显示了按钮的初始状态和悬停状态，具有新的蓝灰色背景和白色粗体文本。

图 5-5 初始状态和悬停状态的按钮

"图 5-5 初始状态和悬停状态的描述"

图 5-6显示了最终的应用程序。

图 5-6 最终的样式化应用程序

"图 5-6 最终的样式化应用程序的描述"

从这里开始

以下是一些你可以尝试的事情：

• 尝试使用CSS创建一些内容。一些可以帮助你的文档包括使用CSS为JavaFX应用程序设置外观，使用CSS为图表设置样式，以及JavaFX CSS参考指南。JavaFX Scene Builder用户指南中的CSS分析器部分还提供了关于如何使用JavaFX Scene Builder工具为JavaFX FXML布局设置外观的信息。

• 查看使用CSS为FX按钮设置样式，了解如何使用CSS创建常见的按钮样式的示例。