java fx 建立窗体,3花式窗体与JavaFX CSS

2019独角兽企业重金招聘Python工程师标准>>>

3花式窗体与JavaFX CSS

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

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

图3-1有和没有CSS的登录表单

“图3-1有和无CSS登录表”的说明

本入门教程中使用的工具是NetBeans IDE。开始之前，请确保您正在使用的NetBeans IDE版本支持JavaFX 2.有关详细信息，请参阅系统要求。

创建项目

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

创建CSS文件

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

在NetBeans IDE Projects窗口中，展开Login项目节点，然后展开Source Packages目录节点。右键单击“ 源软件包”目录下的登录文件夹，然后选择“ 新建”，然后选择“ 其他”。在“新建文件”对话框中，选择“ 其他”，然后选择“ 级联样式表”，然后单击“ 下一步”。输入文件名文本字段的登录，并确保文件夹文本字段值为src\login。单击完成。在Login.java文件中，通过包含以下粗体显示的代码行，初始化类的style sheets变量Scene以指向级联样式表，以使其显示如示例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下载背景图像并将其保存到文件系统。然后，将文件复制到src\login登录NetBeans项目中的文件夹中。

现在，将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实例的根节点。样式定义由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属性参数的详细信息，请参阅“ JavaFX CSS参考指南”中有关效果的部分。

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

图3-3带阴影的更大，更大的标签

说明“图3-3带有阴影的更大，更大的标签”

风格文本

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

在Login.java文件中，删除以下代码行，定义当前为文本对象设置的内联样式： scenetitle.setFont(Font.font(“Tahoma”, FontWeight.NORMAL, 20)); actiontarget.setFill(Color.FIREBRICK); 通过内联样式切换到CSS，您可以将设计与内容分开。这种方法使设计人员更容易掌握风格，而无需修改内容。使用setID()Node类的方法为每个文本节点创建一个ID ： scenetitle.setId("welcome-text"); actiontarget.setId("actiontarget"); 在Login.css文件中，定义welcome-text和actiontargetID 的样式属性。对于样式名称，请使用前面带有数字符号(＃)的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 );

}