DOC-01-05 使用JavaFX CSS美化表单

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

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

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

1_5_1 two_logins

在本教程中使用的编程工具是NetBeans IDE。在你开始之前,确保你使用的NetBeans版本支持JavaFX8。参考JavaSE下载页面的”Certified System Configurations”部分来了解更多细节信息。

创建工程

如果你是跟随《开始学习JavaFX》教程从头开始学习的,那么现在你应该已经创建了本教程所需的Login工程。否则请下载Login.zip,并将其保存到文件系统,解压文件后在NetBeans IDE中打开工程。

创建CSS文件

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

1. 在NetBeans 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变量

这行代码将会在NetBeans的工程中的src\login文件夹下查找样式表。

增加背景图

背景图使得你的表单变得更有吸引力。在本教程中,你会添加一个带有仿亚麻质地的灰色背景。

首先下载背景图(background.jpg),并且将其保存到Login工程的src\login文件夹下。

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

例5-2 背景图片

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

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

图5-2 灰色亚麻背景

1_5_2 login_css_background

为Label添加样式

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

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

本例中增加了字体的大小和字重,并且应用了一个灰色(#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

1_5_3 login_css_labels

为Text增加样式

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

1. 将java文件中这两句代码删除,去除文本对象当前设置的内联样式:

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

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

例5-4 为Text节点创建ID

  1. 在css文件中,为welcome-text和actiontarget ID增加样式属性。样式名的格式为在ID之前增加#前缀,如例5-5所示。

例5-5 文本效果

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

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

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

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

1_5_4 login_css_text

为Button增加样式

下面来为按钮增加样式,使得当鼠标移到按钮上时改变其外观。这样的改变将使得用户能感知到按钮当前是否被激活,这是一个常见的设计实践。

首先,添加例5-6所示的代码来创建按钮初始状态的样式。这段代码使用.button样式类选择器,这样如果你以后添加新的按钮到这个表单之中,那么新按钮也会使用此样式。

例5-6 按钮的阴影

现在,创建一个稍有不同的外观,它用在当用户将鼠标悬停在按钮上时。你可以使用hover伪类(pseudo-class)来实现。一个伪类由类选择器、冒号以及伪类名称构成,如例5-7所示。

例5-7 按钮的悬停样式

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

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

1_5_5 buttons2

图5-6展示了应用程序的最终效果。

图5-6 应用程序增加了样式后的最终效果

1_5_6 login_css_final

了解更多

下面是一些你可以继续尝试的内容:

● 看看你可以通过使用CSS来创建一些什么。可以帮到你的文件包括:《在JavaFX应用中使用CSS样式来管理外观(Skinning JavaFX Applications with CSS)》、《在图表中使用CSS(Styling Charts with CSS)》和《JavaFX CSS参考指南( JavaFX CSS Reference Guide)》。《JavaFX Scene Builder用户指南(JavaFX Scene Builder User Guide)》 中的”使用CSS设计皮肤以及CSS分析器(The Skinning with CSS and the CSS Analyzer)”部分也提供了如何使用JavaFX Scene Builder工具来为你的JavaFX FXML布局设计皮肤的信息。

● 参考《(Styling FX Buttons with CSS)》来了解如何使用CSS创建常用按钮样式。

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/06/doc01_css/
百度已收录