JavaFX UI控件教程(八)之Choice Box

翻译自   Choice Box

本章介绍了选项框,这些UI控件提供了在几个选项之间快速选择的支持。

使用ChoiceBox该类将选择框添加到JavaFX应用程序。其简单的实现如图7-1所示。

图7-1创建包含三个项目的选择框

JavaFX UI控件教程(八)之Choice Box_第1张图片

 

创建一个选择框

例7-1创建了一个包含三个项目的选择框。

例7-1创建选择框

ChoiceBox cb = new ChoiceBox(FXCollections.observableArrayList(
    "First", "Second", "Third")
);

示例7-1显示了在ChoiceBox类的构造函数中创建和填充的项列表。列表项是使用可观察数组指定的。或者,您可以使用类的空构造函数,并使用示例7-2中setItems显示的方法设置列表项。

示例7-2带有文本元素和分隔符的选择框

ChoiceBox cb = new ChoiceBox();
cb.setItems(FXCollections.observableArrayList(
    "New Document", "Open ", 
    new Separator(), "Save", "Save as")
);

请注意,选择框不仅可以包含文本元素,还可以包含其他对象。甲Separator控制是在用于实施例7-2以分离的项目。当此代码片段集成到应用程序中时,它会生成如图7-2所示的输出。

图7-2使用选择框创建的菜单

JavaFX UI控件教程(八)之Choice Box_第2张图片

在实际应用程序中,选择框用于构建多选列表。

 

设置选择框的行为

图7-3中显示的应用程序提供了一个包含五个选项的多选框。选择特定语言时,将呈现相应的问候语。

图7-3多选列表

JavaFX UI控件教程(八)之Choice Box_第3张图片

图7-4提供了一个代码片段,用于说明从选择框中选择的项目如何定义应呈现的问候语。

图7-4选择选择框项目

JavaFX UI控件教程(八)之Choice Box_第4张图片

ChangeListener对象检测当前选择的项目的通过的连续的调用索引getSelectionModelselectedIndexProperty方法。该getSelectionModel方法返回所选项,该selectedIndexProperty方法返回SELECTED_INDEXcb选择框的属性。因此,作为索引的整数值定义了问候数组的元素,并指定了String标签的文本值。例如,如果用户选择对应于西班牙语的第二项,SELECTED_INDEX则等于1并且从问候数组中选择“Hola”。因此,标签呈现“Hola”。

您可以ChoiceBox通过为其指定工具提示来使控件更具信息性。工具提示是javafx.scene.control包中可用的UI控件。工具提示可以应用于任何JavaFX UI控件。

 

应用工具提示

Tooltip类提供了可以通过调用被容易地应用于一个选择框(或任何其他控制)的预制工具提示setTooltip中所示的方法实施例7-3。

示例7-3将工具提示添加到选择框

cb.setTooltip(new Tooltip("Select the language"));

通常,用户在Tooltip类的构造函数中定义工具提示的文本。但是,如果应用程序的逻辑需要UI动态设置文本,则可以使用空构造函数应用工具提示,然后使用该setText方法将文本分配给它。

将工具提示应用于cb选择框后,将光标放在选择框上的用户将看到如图7-5所示的图像。

图7-5带有应用工具提示的选择框

JavaFX UI控件教程(八)之Choice Box_第5张图片

要进一步增强应用程序,可以使用CSS属性设置选项框的样式,或应用视觉效果或变换。

 

相关的API文档 

  • ChoiceBox

  • Tooltip

你可能感兴趣的:(javafx)