本教程描述如何使用层叠样式表(CSS)来使JavaFX应用程序看起来更具魅力。你将会开发一个界面,创建一个.css文件,然后应用样式。

在本教程中,你将会对一个Login表单进行操作,它使用默认样式的标签、按钮和背景色,然后通过一些简单的CSS修改将其变成一个样式化的应用程序,如图5-1所示。

图5-1 带有CSS和不带CSS的Login表单


创建工程

如果你是跟随《JavaFX学习笔记》教程从头开始学习的,那么现在你应该已经创建了本教程所需的Login工程。

创建CSS文件

你的第一个任务是创建一个新的CSS文件,并且将其保存到你的主类所在的文件夹中。然后你需要让JavaFX应用程序感知到新加入的这个CSS。

  1. 在IDE的Projects窗体中,展开Login工程节点下的Source Packages文件夹节点。

  2. 右键单击Source Packages文件夹下的login文件夹然后选择”New”菜单,然后选择”Other”菜单。

  3. 在New File对话框中,选择”Other”,然后选择”Cascading Style Sheet”,然后点击”Next”。

  4. 在File Name文本框中输入Login,并且确保Folder文本框中的值为src\login。

  5. 点击”Finish”。

  6. 在java文件中,初始化Scene类的style sheets变量来指向CSS,使用例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工程的src\login文件夹下。

然后将background-image属性相关的代码添加到CSS文件中。记住对应的路径是与样式表的相对路径。因此,在例5-2所示的代码中,background.jpg放在与Login.css相同的文件夹下。

例5-2 背景图片

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

背景图被应用到了.root样式上,它表示会将样式应用到Scene实例的root节点上。该样式定义由属性名(-fx-background-image)和属性值(url(“background.jpg”))组成。

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


为LABEL添加样式

下面演示如何改进标签控件的外观。你可以使用.label样式类,它表示对应的样式会影响表单中所有的label控件。对应的代码如例5-3所示。

例5-3 Label的字体大小、填充、字重和视觉效果

    .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参考指南(JavaFX CSS Reference Guid)》(http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#typeeffect)中的章节来了解关于dropshadow属性的细节。

改进后的User Name和Password标签如图5-3所示。

图5-3 更大更粗且带有阴影的Label


为TEXT增加样式
下面为表单中的两个Text对象创建一些特别的视觉效果:scenetitle中包括文本”Welcome”,actiontarget表示当用户按下”Sign in”按钮时返回的文本内容。你可以通过不同的方式来为Text对象应用不同的样式。

  1. 将java文件中这两句代码删除,去除文本对象当前设置的内联样式:
      scenetitle.setFont(Font.font(“Tahoma”, FontWeight.NORMAL, 20));
      actiontarget.setFill(Color.FIREBRICK);

通过使用CSS来替代内联样式,你可以将外观设计与内容分离开来。这种方式使得设计师更容易地控制样式,同时却无需修改内容。

  1. 使用setID()方法为每个文本节点创建一个ID,增加下面的加粗代码,如例5-4所示:
    例5-4 为Text节点创建ID
    ...

Text scenetitle = new Text(“Welcome”);
scenetitle.setId(“welcome-text”);

    ...

grid.add(actiontarget, 1, 6);
actiontarget.setId(“actiontarget”);

    ..

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

文本”Welcome” 的字体大小增加到32点,并且字体变成了Arial Black。文本的填充颜色被设置为深灰色(#818181)并且应用了一个内阴影效果,创建了一个浮雕效果。你可以通过将文本的填充颜色设置为比背景色深一些的颜色来产生内阴影效果。参考《JavaFX CSS参考指南(JavaFX CSS Reference Guide)》中的章节来了解内阴影(Inner Shadow)属性的细节。

为actiontarget所设置的样式定义与前面所述的内容很相似。

图5-4展示了两个Text对象上的字体改变和阴影效果。

图5-4 带有阴影视觉效果的Text


    .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伪类(pseudo-class)来实现。一个伪类由类选择器、冒号以及伪类名称构成,如例5-7所示。

例5-7 按钮的悬停样式

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

图5-5展示了按钮的初始和悬停状态,他们使用了新的蓝灰色背景和白色粗体文本。
图5-5 按钮的初始和悬停状态



扫描二维码,在手机上阅读!
最后由 BF 编辑于2017年03月20日 20:19