读书人

JavaFX 肌肤功能

发布时间: 2012-08-10 12:19:33 作者: rapoo

JavaFX 皮肤功能

作为RIA技术之一,为了让应用程序的界面看起来更加的漂亮或者更有个性,皮肤功能自然是必不可少的。


在JavaFX中,可以使用CSS样式表来进行皮肤的更换。不过JavaFX中的CSS是基于W3C CSS version 2.1,但又不完全相同。


JavaFX中的换肤有几种方式。


1.完全重新定义的控件样式


我们首先创建一个CSS文件,命名为skin1.css,在里面定义一个Button的样式。


右上图可以看到,这个Button已经与默认的按钮完全不一样了。

下面我们在skin1.css中,新添加一个Button的样式,暂命名为CustomButton2。


如图所示,点击之后,Button应用了新的样式,变成了黑底白字了。


怎么样?虽然只是简单的改变了背景色和文字色,但其实看起来效果还是不错的。


2.重写控件的样式


有的人会觉得,每个控件都设置一次样式很麻烦,为何不能直接设置所有Button的样式呢?当然,JavaFX也提供这

个功能,我们只需要把上面的skin1.css中的.CustomButton改为.button,就会覆盖Button控件的样式。


那么我们更改为.button后,再添加一个Button看看运行的效果。


JavaFX 肌肤功能


你会发现,没有单独设置Button的样式,但是将skin1.css添加进Scene的StyleSheets中后,所有的Button样式都改变了。


3.更改整个程序的样式


同样的,既然可以更改所有button的样式,我们也可以进行少许修改,就能更改整个应用软件的风格了。


我们只需要添加.root的样式即可。

大家可以看到,整体的风格都改变了。这也是更换主题的很方便的方法。


另外, CSS中有class styles 和id styles,同样的JavaFX中也有。对于控件而言只需要setId()即可应用id styles。


OK,时间已经很晚了,JavaFX的换肤功能就讲到这里了。该睡觉去了。


读书人网 >Web前端

热点推荐