JavaFX官⽅教程（六）之带有JavaFXCSS的花式表单
翻译⾃
本教程通过添加级联样式表（CSS）使您的JavaFX应⽤程序看起来很有吸引⼒。您开发设计，创建.css⽂件并应⽤新样式。
在本教程中，您将获取⼀个使⽤标签，按钮和背景颜⾊的默认样式的登录表单，并通过⼀些简单的CSS修改将其转换为程式化的应⽤程序，所⽰。
图5-1使⽤和不使⽤CSS的登录表单
本⼊门教程中使⽤的⼯具是NetBeans IDE。在开始之前，请确保您使⽤的NetBeans IDE版本⽀持JavaFX 8.有关详细信息，请参阅的Certified System Configurations页⾯。
1、创建项⽬
如果您从⼀开始就按照⼊门指南进⾏操作，那么您已经创建了本教程所需的Login项⽬。如果没有，请通过右键单击并将其保存到⽂件系统来下载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初始化样式表变量
Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
(Resource("Login.css").toExternalForm());
primaryStage.show();
此代码src\login在NetBeans项⽬的⽬录中查样式表。
3、添加背景图像
背景图⽚有助于使您的表单更具吸引⼒。在本教程中，您将添加⼀个带有亚⿇纹理的灰⾊背景。
⾸先，通过右键单击图像并将其保存到src\login Login NetBeans项⽬的⽂件夹中来下载背景图像。
现在，将background-image属性的代码添加到CSS⽂件中。请记住，路径是相对于样式表的。因此，在的代码中，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灰⾊亚⿇背景
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 );
}
此⽰例增加了字体⼤⼩和重量，并应⽤了灰⾊的阴影（＃333333）。投影的⽬的是增加深灰⾊⽂本和浅灰⾊背景之间的对⽐度。有关投影功能参数的详细信息，请参阅“ 有关效果的部分。
增强的⽤户名和密码标签所⽰。
图5-3带阴影的更⼤，更⼤的标签
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为⽂本节点创建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⽂本效果
#welcome-text {
fontweight属性bold-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），并应⽤内部阴影效果，从⽽创建浮雕效果。您可以通过将⽂本填充颜⾊更改为背景的较暗版本，将内部阴影应⽤于任何颜⾊。有关内部阴影属性参数的详细信息，请参阅“ 有关效果的部分。
样式定义actiontarget与您之前看到的类似。
显⽰了两个Text对象的字体更改和阴影效果。
图5-4带阴影效果的⽂本
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按钮悬停样式
.button:hover {
-fx-background-color: linear-gradient(#2A5058, #61a2b1);
}
显⽰了按钮的初始和悬停状态，其中包含新的蓝灰⾊背景和⽩⾊粗体⽂本。
图5-5初始和悬停按钮状态
显⽰了最终的应⽤程序。
图5-6最终的程式化应⽤程序
7、从这往哪⼉⾛
以下是您可以尝试的⼀些事项：
看看你可以⽤CSS创建什么。⼀些⽂档，可以帮助你，，以及使⽤CSS进⾏Skinning和JavaFX Scene Builder⽤户指南的CSS Analyzer部分还提供了有关如何使⽤JavaFX Scene Builder⼯具为JavaFX FXML布局设置外观的信息。
见为如何创建使⽤CSS普通按钮样式的例⼦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。