DOC-03-29 自定义控件

本章描述了对UI控件进行自定义的方方面面,并且总结了由Oracle提供的一些提示和技巧来帮助你修改UI控件的外观和行为。

你可以从样例程序UI Control Sample工程中学到如何通过应用层叠样式表(Cascading Style Sheet,CSS)、重新定义默认行为、并且使用单元格工厂来自定义控件。在一些特殊情况下,当你的应用程序需要的一些特殊功能无法通过使用javafx.scene.control包中的控件来实现时,可以通过扩展Control类来发明你自己的控件。

应用CSS

你可以通过重新定义JavaFX的modena样式表定义来改变UI控件的外观。“使用CSS来为JavaFX应用程序换肤”(Skinning JavaFX Applications with CSS)一章中解释了修改样式并且在JavaFX应用程序中启用之的一些基本概念和方法

不妨考虑考虑在JavaFX论坛中的开发者经常提到的一些特殊任务。

尽管Tooltip类并没有任何属性或方法来改变tooltip的默认颜色,但是你可以通过例29-1中展示的.tooltip CSS类中的-fx-background-color属性来修改它。

29–1改变Tooltip的背景颜色

.page-corner CSS类定义了tooltip的右下角的颜色。当你将例29-1中的这段代码添加到TooltipSample的样式表中并且将对应的样式表应用到场景(scene)中时,tooltip的颜色将会变成蓝色。查看图29-1来了解对应的效果。

29-1 带有蓝色背景的Tooltip

3-29-1 custom-tooltip

注意当你修改Tooltip的默认样式时,新的外观将会应用到你的程序中的所有Tooltip之上。

另外一个普遍的设计任务是改变控件的默认标记。例如,CheckBox类的默认样式为被选中的状态定义了经典的对勾标记。你可以重新定义标记的形状和颜色,如例19-2所示。

29-2 改变CheckBox的标记

-fx-shape属性为标记设置了新的SVG路径,并且-fx-background-coloer属性定义了它的颜色。当在CheckBoxSample应用程序中应用被修改过的样式表时,被选中的CheckBox将会包括X标记,它替代了默认的对勾标记,如图29-2所示。

29-2 带有被修改的CheckBox样式的CheckBoxSample

3-29-2 custom-checkbox

很多开发者都问起如何克服在TableView和ListView控件中的可视化样式限制。默认情况下,这些控件中的所有行会被显示,无论它们是否为空。如果设置了合适的CSS样式,你可以为空行设置一种特殊的颜色。例29-3在TableView控件中完成了这个任务。

29–3 Table View中为空行设置颜色

第一个CSS样式决定了所有的空行,不管是偶数行还是奇数行,都将具有浅黄色背景。当table-row-cell是empty时,第二个CSS样式移除了在所有的表格单元右侧绘制的纵向边界。

当例29-3中的CSS样式在TableViewSample应用程序中被启用时,Address Book 表格将会看起来如图29-3所示。

29-3 为空行添加了颜色的TableViewSample

3-29-3 custom-table1

你甚至可以设置将空单元格的背景设置为null。在这种情况下将会使用默认的表格视图背景颜色。查看图29-4来了解对应的效果。

29–4 空行使用Null背景颜色的TableViewSample

3-29-4 custom-table2

你可以为UI控件设置更多的CSS属性来改变它们的形状、配色方案,并应用特效。参考JavaFX CSS Reference Guid来了解更多关于可用的CSS属性和类的信息。

改变默认行为

许多开发者希望能有特定的API来对文本框进行输入限制,例如,仅仅允许输入数值。例29-4提供了一个简单程序,它带有一个数值输入的文本框。

29–4Text Field中禁止输入字母

要重新定义TextField类的默认实现,你必须重写replaceText和replaceSelection方法,它们都是从TextInputControl类继承而来。

当用户尝试在变量sum 所代表的TextField中输入字母时,它不会显示出字符,并且会显示出警告信息。图29-5说明了这种情况。

29-5 尝试输入字母符号

3-29-5 custom-textfield1

然而,当用户尝试输入数值时,它们将会在文本框中显示出来,如图29-6所示。

29-6 输入数值

3-29-6 custom-textfield2

实现单元格工厂(Cell Factory)

有四种UI控件的外观和事件行为可以通过Cell Factory机制来完全自定义。你可以对TableView、ListView、TreeView和ComboBox这四种控件应用Cell Factory。Cell Factory用于产生单元格(Cell)实例,它用于表示这些控件中的某一项。

Cell类由Labeled类扩展而来,它提供了所有实现最常见的应用场景——展示并编辑文本——所需要的属性和方法。然而,当你的应用程序的任务需要在列表或表格中展示图像时,你可以使用graphic属性并且将任何Node放到Cell之中(参考Cell类的API规范来了解关于自定义Cell所需的更多信息)。

例如,例29-5中的代码片段为List View创建了一个Cell Factory并且在updateItem方法中重新定义了Cell的内容,因此对应的List中显示了各种颜色的矩形。

29-5 List View 控件实现Cell Factory

在UI Control Samples工程中,ListViewSample程序自定义了List,它的外观如图29-7所示。

29-7 带有彩色矩形的List View

3-29-7 list-colors

本教程广泛地应用Cell Factory工厂机制来自定义控件。你可以通过Cell Factory机制自定义这些控件,也可以使用内置的Cell编辑器(Editor)实现,它们提供了控件可视化所需的特殊的数据模型。表29-1列出了在JavaFX API中可用的相关类。

29-1可以用于 List ViewTree ViewTable ViewCell Editor

控件 Cell Editor
List View · CheckBoxListCell· ChoiceBoxListCell

· ComboBoxListCell

· TextFieldListCell

Tree View · CheckBoxTreeCell· ChoiceBoxTreeCell

· ComboBoxTreeCell

· TextFieldTreeCell

Table view · CheckBoxTableCell· ChoiceBoxTableCell

· ComboBoxTableCell

· ProgressBarTableCell

· TextFieldTableCell

Tree Table View · CheckBoxTreeTableCell· ChoiceBoxTreeTableCell

· ComboBoxTreeTableCell

· ProgressBarTreeTableCell

· TextFieldTreeTableCell

每个Cell Editor类都会在Cell之中绘出一个特定的节点。例如,CheckBoxListCell类会在List Cell中绘制一个CheckBox。

要了解更多的Cell Factory和Cell Editor应用情况,请参考讲解Table View、Tree View和ComboBox的相关章节。

相关的文档和资源

· 本文第四部分《在JavaFX应用中使用CSS样式来管理外观(Skinning JavaFX Applications with CSS)》

· JavaFX CSS Reference Guide

· JavaFX News, Demos, and Insight

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