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

}

欢迎文字的大小增加到32分，字体更改为Arial Black。文字填充颜色设置为深灰色(＃818181)，并应用内阴影效果，产生压花效果。您可以通过将文本填充颜色更改为背景的较暗版本来将内部阴影应用于任何颜色。有关内阴影属性参数的详细信息，请参阅“ JavaFX CSS参考指南”中有关效果的部分。

风格定义actiontarget类似于您之前看过的。

图3-4显示了两个Text对象的字体变化和阴影效果。

图3-4带阴影效果的文本

“图3-4带阴影效果的文字”说明

按钮的风格

下一步是对按钮进行风格调整，使用户将鼠标悬停在其上时更改样式。此更改将给用户指示按钮是交互式的，标准设计实践。

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

}

现在，当用户将鼠标悬停在按钮上时，会创建一个稍微不同的外观。你可以用悬浮伪类来实现。伪类包括类的选择器和由冒号(:)分隔的状态的名称，如示例3-6所示。

示例3-6按钮悬停样式

Example 3-6 Button Hover Style

.button:hover {

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

}

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

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

“图3-5初始和悬停按钮状态”的说明

最终应用程序如图3-6所示。

图3-6最终风格化应用程序

“图3-6最终风格化应用程序”的说明

转载于:https://my.oschina.net/ch66880/blog/993959