(翻译)第十三回 JavaFX2.0 选项框ChoiceBox

 

原文地址http://download.oracle.com/javafx/2.0/ui_controls/choice-box.htm#BCEDJAEH

 

ChoiceBox类为在几个选项中快速选择提供了支持。看看 Figure 7-1 中的选项框的这个简单实现怎么样。

Figure 7-1 Creating a Choice Box with Three Items

Description of "Figure 7-1 Creating a Choice Box with Three Items"

创建 Choice Box

Example 7-1 创建了带有三个条目的选项框。

Example 7-1 Creating a Choice Box

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

Example 7-1 是创建在ChoiceBox类的构造函数中条目列表。这个条目列表是用一个可见的数组指定的。当然你可以选择使用该类的空构造方法，然后使用setItems方法设置条目列表。见Example 7-2.

Example 7-2 Choice Box with Text Elements and a Separator

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

不过选项框不单单能包含文本元素，还可以是其他对象。  Example 7-2中用一个Separator控件分开了条目。当应用中加入这些代码后，效果见 Figure 7-2.

Figure 7-2 Menu Created by Using a Choice Box

Description of "Figure 7-2 Menu Created by Using a Choice Box"

实际项目中，选项框用来创建多选列表。

为Choice Box设置行为

 Figure 7-3 中的应用提供了一个带有5个选项的多选框。当一种特定的语言被选中后，相应的问候语就显示出来。

Figure 7-3 Multiple-Choice List

Description of "Figure 7-3 Multiple-Choice List"

Figure 7-4 中的代码块解释了选项框中的条目被选中后是怎么定义哪中语言的问候语应该显示的。

Figure 7-4 Selecting a Choice Box Item

Description of "Figure 7-4 Selecting a Choice Box Item"

通过连续不断的调用getSelectionModel和selectedIndexProperty方法，ChangeListener<Number> 对象侦测当前被选中条目的索引。getSelectionModel方法返回被选中的条目，selectedIndexProperty方法返回选项框的SELECTED_INDEX属性。这样，索引的整型值定义了问候数组中的元素，并为标签指定一个 String文本。如果一个用户选择了第二个条目，它对应的西班牙语，SELECTED_INDEX就是1，"Hola"就被从问候语数字中选了出来。这样，标签就显示"Hola."

可以通过为ChoiceBox控件分派提示条使它更有引导性。提示条是javafx.scene.control包中的一个UI控件。提示条能被用于任何JavaFX UI控件。

使用Tooltip

Tooltip类为在选项框（还有其他所有控件）添加提示条提供了预制方法，可以通过调用setTooltip方法很容易的使用。见Example 7-3.

Example 7-3 Adding a Tooltip to a Choice Box

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

一般用户是在Tooltip类的构造方法内定义提示内容。不过，如果你的应用逻辑要求UI动态地设置文本，你可以使用空构造方法使用它，然后使setText方法为它设置文本。

选项框使用了提示条后，用户把鼠标放在选项框上就看到一个图像条。见 Figure 7-5.

Figure 7-5 Choice Box with the Applied Tooltip

Description of "Figure 7-5 Choice Box with the Applied Tooltip"

要改善应用的外观，可以给选项框使用CSS，或者使用视觉效果和变换。