DOC-03-16 组合框(Combo Box)

本章解释了如何在你的JavaFX应用程序中使用组合框(Combo Box)。本章讨论了可编辑和不可编辑的Combo Box,告诉你如何在可编辑的Combo Box中跟踪改变并处理相关的事件,另外还解释了如何通过使用单元工厂(Cell Factory)来改变Combo Box的默认实现。

Combo Box是用户界面中的一种典型元素,它允许用户从多个选项中选择一项。当待展示的项较多时Combo Box会很有用,因为它提供了对下拉列表的滚动功能,这点与选择框(Choice Box)不同。如果选项的数目不是很多,则开发者可以决定Combo Box和Choice Box哪个更符合实际需要。

你可以通过JavaFX API中的CombBox类来在JavaFX应用程序中创建一个Combo Box。图16-1展示了一个带有两个Combo Box的应用程序。

16–1 带有两个Combo Box的应用程序

3-16-1 combobox-sample

创建Combo Box

在创建Combo Box时,你必须实例化ComboBox类并定义一个Observable List作为其选项,这个步骤与其它的UI控件相似,例如ChoiceBox、ListView和TableView。样例16-1中通过构造方法设置了对应的选项。

16–1 创建一个带有Observable ListCombo Box

创建ComboBox的另外一种可选方法是先通过一个空的构造方法来创建Combo Box,然后调用其setItems方法,样例代码为:comboBox.setItems(options);

当Combo Box被添加到了应用程序的场景之中,它会展示如图16-2所示的界面。

16–2 带有三个选项的Combo Box

3-16-2 combobox-string

你可以在任何时候向选项列表中添加新值。例16-2展示了如何向Combo Box控件添加三个新的选项。

16–2 Combo Box中增加选项

ComboBox类提供了一些便于使用的属性和方法。你可以使用setValue方法来指定在Combo Box中被选定的选项。当你在一个ComboBox对象上调用setValue方法时,selectionModel属性的被选项会被设置为对应值,即使该值并不在Combo Box的选项列表中也会如此。如果选项列表中包括了对应值,则对应的选项将会被选中。

类似地,你可以通过调用getValue方法来获得被选中的选项值。当用户选择了一个选项时,selectionModel属性的被选项和value属性都会被更新为新值。

你也可以限定Combo Box的下拉选项列表中可以展示的选项数量。下面的代码行表示允许Combo Box控件展示3个选项:comboBox.setVisibleRowCount(3)。调用此方法后,下拉选项可见的数量将会被限制为3,并且会出现一个滚动条(如图16-3所示)。

16–3 设置Combo Box中可见的选项数目

3-16-3 combobox-button

尽管ComboBox类有一个泛型注解并且允许用户使用各种类型来填充其选项,但还是不要用Node(或者任何其子类)作为填充类型。因为在场景图(Scene Graph)的概念中约定了在应用场景中,一个Node对象只可以出现在一个位置,因此被选中的选项会从ComboBox的选项列表中移除。当被选择项发生改变时,之前被选择项将会回到选项列表中,而新的被选择项则会被移除。为了避免出现这种情况可以使用Cell Factory机制,对应的解决方案在API文档中进行了说明。Cell Factory机制在你需要改变ComboBox对象的初始行为和外观时是非常有用的。

下面的ComboBoxSample应用被设计用来展示如何在一个常见的电子邮件界面中使用ComboBox。例16-3创建的界面中包括了两个ComboBox,分别用于选择电子邮件的收件人和消息优先级。

16–3创建ComboBox并添加到Scene

在例16-3中的ComboBox都使用了getItems和addAll方法来增加选项。当你编译并运行这段代码,它将会产生如图16-4所示的界面。

16–4 表示电子邮件收件人和优先级的ComboBox

3-16-4 combobox-simple

可编辑的ComboBox

一般来说,电子邮件客户端程序会同时允许用户从地址簿选择收件人或手工录入一个地址。此时可编辑的ComboBox可以完美胜任这个任务。使用ComboBox的setEditable(true)方法可以使其变得可编辑。而使用setPromptText方法,你可以指定当ComboBox没有选项被选定时显示在编辑区域的文本信息。尝试根据例16-4修改代码。其中加粗的代码行是在例16-3基础上新增的部分。

16–4 在可编辑的ComboBox中处理新输入的值

除了展示对emailComboBox进行编辑的功能之外,这段代码片段还实现了对此控件的事件处理。新输入或者选择的值将会被存储到address变量中。当用户按下Send按钮时,含有电子邮件地址的notification将会显示出来。

图16-5 展示了当用户正在编辑Jacob Smith的电子邮件地址并将其改成greg.smith@example.com时的截图。

16–5编辑电子邮件地址

3-16-5 combobox-editable

当Send按钮被按下时,所有的控件将会回复其默认状态。TextField和TextArea对象的clear方法会被调用,Combo
Box的被选择项也将会被设置为null。图16-6展示了在Send按钮被按下后的情况。

16–6 Send按钮被按下后的用户界面

3-16-6 combobox-sent

使用Cell Factory

你可以使用Cell Factory机制来改变ComboBox的默认行为和外观。例16-5创建了一个Cell Factory并将其应用到了优先级选择ComboBox之上,用于使用特殊的颜色来强调显示优先级类型。

16–5 Priority Combo Box实现一个Cell Factory

Cell Factory创建了ListCell对象。每一个ListCell都与ComboBox的一个选项关联。每个ComboBox选项的宽度都通过setPrefWidth方法进行了设置。updateItem方法将High和Highest选项设置成了红色,将Low和Lowest选项设置成了绿色,剩下的Normal选项则仍为黑色。

图16-7展示了当例16-5中的Cell
Factory生效后的优先级选项情况。

16–7修改Priority Combo Box

3-16-7 combobox-priority

你可以通过应用CSS样式或视觉特效来进一步改进ComboBox控件的外观。

相关的API文档

    · ComboBox

    · ComboBoxBase

    · ListView

    · ListCell

    · Button   

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