DOC-03-37 在UI控件上使用CSS

本章介绍如何在JavaFX中使用层叠样式表(CSS),来为你的程序创建自定义外观。

样式表中包含可以控制用户界面元素外观的样式定义。在JavaFX程序中使用CSS与在HTML中使用CSS类似。JavaFX中的CSS建立在W3C CSS 2.1版(参见http://www.w3.org/TR/CSS21)的基础之上,在其中加入了3.0版的部分内容和一些支持特定JavaFX特性的扩展内容。

使用JavaFX CSS来定义皮肤使得你可以仅通过修改样式表来将图37-1中的UI变成如图37-2中的UI那样。

37-1 样式一

3-37-1 style1

37-2 样式二

3-37-2 style2

默认样式表

JavaFX程序的默认样式表是modena.css,此文件在JavaFX的运行时jar包(jfxrt.jar)中。该样式表定义了root node和UI控件的样式。要查看该样式文件,请到JDK的安装目录下的\jre\lib\ext 目录下,使用下面的指令从jar包中解压出来:

图37-3展示了使用默认样式表样例的UI外观。

37-3 默认样式

3-37-3 default_style

创建样式表

你可以创建一个或多个样式表来覆盖默认的样式或者是添加你自己的样式。一般来说,创建的样式表都应该以.css为后缀,并且应该与你JavaFX程序的main class放在同一个路径下。

controlStyle1.css样式表提供了如图37-1的皮肤。controlStyle2.css样式表提供了如图37-2的皮肤。

例37-1展示了样式表被应用到Scene对象上。在该例子中,path表示你的样式表的路径,stylesheet即是你的样式表的名称。例如,图37-2中的path和stylesheet是uicontrolcss/controlStyle2.css。

37-1 添加样式表

定义样式

一个样式定义由两部分组成:样式的名称,又叫选择器;为该样式设置属性的一系列规则。样式定义的规则由大括号({})括起来。例37-2展示了名叫.custom-button的样式定义。

37-2 样式定义样例

注意:字体的大小可以用点(pt)为单位也可以用像素(px)为单位。JavaFX假定分辨率为96dpi,所以1px=0.75pt。

选择器

有多种类型的样式可以被定义。每种类型都有其自己的选择器。

类选择器相当于class名称。按照惯例,当样式的class名称由多个单词组成时,单词之间用连字符(-)连接。类选择器都以点(.)开头。

类选择器的样例:

你也可以通过node的ID来定义与该node相关联的样式。通过node的setId()方法可以设置node的ID。样式的名称是ID前加个#。例如,一个ID是my-button的node可以通过#my-button来定义样式。

ID选择器的样例:

也可以使用混合选择器。有的class包含一些元素可以自定义其样式,这种样式叫做子类(descendant class)。例如,许多UI控件都有为label定义一个descendant class。这个定义是通过class的选择器和子类的选择器组合在一起,中间通过空格分开来标识的。

descendant class选择器的样例:

Pseudo-classes使你可以定制node的状态,比如当node获取焦点时。这种定义由该class的选择器和该状态的名称组成,中间用冒号(:)分隔。

Pseudo-classes选择器的样例:

规则和属性

样式定义中的规则为class的属性设置值。规则属性名称相当于某class的属性名称。有多个单词组成的属性名称的惯例是使用连字符(-)分开每个单词。JavaFX样式表中的属性名称均以-fx-开头。属性名和属性值之间用冒号(:)分隔。规则以分号(;)结尾。

规则样例:

.root样式类会应用到Scene实例的root node。由于scene中的所有node都在该root node中,.root样式类中的样式能被应用到所有的node上。

.root样式类中包含许多可被其它样式使用的属性,以此来保证UI的一致性。例如,-fx-focused-base属性就是在.root样式类中定义的。此属性用来定义任何其它UI控件获取焦点时的颜色。下面的代码展示了如何在CheckBox的样式中使用该属性:

为Scene定制皮肤

你可以仅通过修改.root样式类来快速改变UI外观。两个样例的样式表都设置了font size、font family、衍生其他颜色的base color和scene的background color。例37-3展示了controlStyle2.css中的.root样式。

37-3 controlStyle2.css中的.root样式

仅需要这一个样式就可以创建图37-2中的基础外观。这是因为内置的UI控件都使用了root node的属性集来获得自己的颜色和字体。

为控件定制皮肤

你可以通过为不同控件定义样式来进一步定制你的UI。你可以覆盖默认样式表中的样式定义,或者创建新的类样式或者ID样式。也可以在代码中为某个node定义样式。

覆盖默认样式

在你的样式表中加入某样式并且为它设置不同的属性就可以覆盖该样式在默认样式表中的定义了。例37-4展示了controlStyle2.css中的Button的样式。

37-4 样式的覆盖

该样式中定义了font color、border color、border radius和padding。button的颜色和label的字体样式由例37-3中的.root定义。这种样式的Button外观如下图所示:

3-37-4 button_style2

注意:如果在默认的modena.css样式表中没有某个class的样式定义,请在你的样式表中定义该样式并将它分配给每个class,就像例37-6中做的那样。例如,布局面板在modena.css中没有定义样式。请参考Styling Layout Panes with CSS获取更多如何为类创建样式的信息,如HBox和GridPane类等。

创建类样式(Class Style)

你可以在你的样式表中为某个class添加一条声明,来创建一个class style。例37-5在controlStyle1.css中声明了一个名为.button1的新样式。

37-5 声明新样式

任何添加了这个样式的button都会显示如下图。注意按钮上的文字的字体是由 controlStyle1.css中的.root声明继承下来的。

3-37-5 button_style1

要把这个样式分配到node,使用getStyleClass().add()方法。例37-6展示了.button1样式应用给Accept button。

37-6 分配Class Style

需要注意的是,为node添加样式是累加式的。为buttonAccept这个node添加了.button1样式以后,该node就会同时使用.button和.button1两个样式规则。

创建ID样式

你可以通过创建一个样式并且将它分配给某个独立的node来为该node声明一个样式。该样式的名字是ID前加个井号(#)。例37-7创建了一个名为#font-button的样式声明。

37-7 声明ID样式

ID为font-button的button外观如下图所示:

3-37-6 button_style_id

例37-8展示了怎样为node分配ID样式。

37-8 分配ID样式

在代码中设置样式

你也可以在代码中为node设置样式属性。在代码中设置的样式优先级要高于通过css文件设置的样式。例37-9展示了如何改变button的background color和font color。

37-9 声明内联样式(Style Inline

下图展示了上面代码定义的按钮外观:

3-37-7 button_style_inline

附加资源

· 有关JavaFX样式表更深入的资料,请参考JavaFX CSS Reference Guide

· 有关为UI控件使用CSS的信息,请参考Using JavaFX UI Controls

· 有关为布局面板使用CSS的信息,请参考Styling Layout Panes with CSS

· 有关为图表使用CSS的信息,请参考Styling Charts with CSS

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