(翻譯)第十三回 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")
);
      

 是建立在

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")
);
      

不過選項框不單單能包含文本元素，還可以是其他對象。  

中用一個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，或者使用視覺效果和變換。