3 Fancy Forms with JavaFX CSS

本教程是关于看你的JavaFX应用程序添加一个层叠样式表（CSS）的吸引力。你的设计开发，创建一个。css文件，并应用新的样式。在本教程中，您将需要一个登录表单，标签，按钮和背景颜色使用默认样式，并用几个简单的CSS修改，它变成了一种程式化的应用，如图3-1所示。

这个入门教程中所使用的工具是NetBeans IDE中。开始之前，请确保您正在使用该版本的NetBeans IDE支持JavaFX2。有关详情，请参阅系统需求。

创建的CSS文件
你的第一个任务是创建一个新的CSS文件，并保存在同一个包，它为您的应用程序的主类。之后，你必须知道JavaFX应用程序添加新的层叠样式表。

在NetBeans IDE项目窗口中，右键单击“源包目录下的文件夹中登录，并选择”新建“，然后其他。

在新建文件对话框，选择“其他”，然后层叠样式表，并单击“下一步”。

输入JavaFxWelCome并单击Finish。

在JavaFxWelCome.java文件，初始化变量指向级联样式表，包括前行stage.show（）之前添加以下代码;

scene.getStylesheets().add(JavaFxWelCome.class.getResource("JavaFxWelCome.css").toExternalForm());

 

添加背景图片
背景图像有助于使你的形式更具吸引力。在本教程中，您可以添加一个灰色的背景，用亚麻般的质感。

首先，下载右击background.jpg并保存到你的文件系统，背景图像。然后，登录在NetBeans项目文件夹复制到该文件。

现在，添加背景图像属性的CSS文件中的代码。记住该路径是相对于样式表。因此，在示例3-1中的代码，background.jpg形象是在作为JavaFxWelCome.css文件相同的目录。注意：JavaFxWelCome.css,JavaFxWelCome.css,background.jpg要在同一目录中。

以下是CSS样式表，自己琢磨吧。

root { 
    display: block;
}
.root {
-fx-background-image: url("background.jpg");
}
.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 );
}

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

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