JavaFX UI控制元件教程（十五）之Combo Box
翻譯自 Combo Box
本章介紹如何在JavaFX應用程式中使用組合框。它討論了可編輯和不可編輯的組合框，教您如何跟蹤可編輯組合框中的更改並處理它們上的事件，並解釋如何使用單元工廠來更改組合框的預設實現。
組合框是使用者介面的典型元素，使使用者可以選擇多個選項之一。當要顯示的專案數超過某個限制時，組合框很有用，因為它可以將滾動新增到下拉列表中，與選擇框不同。如果專案數量不超過某個限制，開發人員可以決定組合框或選擇框是否更符合他們的需求。
您可以使用ComboBoxJavaFX API 的類在JavaFX應用程式中建立組合框。圖14-1顯示了具有兩個組合框的應用程式。
圖14-1兩個組合框的應用
建立組合框
當建立一個組合框，你必須例項化ComboBox類，並定義專案作為觀察的名單，就像如其他UI控制元件ChoiceBox，ListView以及TableView。例14-1設定建構函式中的項。
示例14-1建立帶有可觀察列表的組合框
ObservableList<String> options = FXCollections.observableArrayList( "Option 1", "Option 2", "Option 3" ); final ComboBox comboBox = new ComboBox(options);
另一種可能性是使用空建構函式建立一個組合框並setItems在其上呼叫方法，如下所示：comboBox.setItems(options);
將組合框新增到應用程式場景後，它將顯示在使用者介面中，如圖14-2所示。
圖14-2包含三個專案的組合框
您可以隨時使用新值補充專案列表。例14-2通過向comboBox控制元件新增另外三個項來實現此任務。
示例14-2將項新增到組合框
comboBox.getItems().addAll(
"Option 4",
"Option 5",
"Option 6"
);本ComboBox
您可以使用該setValue方法指定組合框中選定的專案。在物件setValue上呼叫方法時ComboBox，selectionModel即使該值不在組合框專案列表中，屬性的選定項也會更改為此值。如果專案列表隨後更改為包含此值，則會選擇相應的專案。
同樣，您可以通過呼叫getValue方法獲取所選項的值。當用戶選擇專案時，selectionModel屬性的選定專案和組合框value屬性都更新為新值。
您還可以在ComboBox顯示時限制下拉列表中的可見行數。以下程式碼行可以顯示comboBox控制元件的三個專案：comboBox.setVisibleRowCount(3)作為呼叫此方法的結果，可見行數限制為3，並出現滾動條（如圖14-3所示）。
圖14-3設定組合框的可見行數
儘管ComboBox該類具有通用符號並且允許使用者使用各種型別的項填充它，但不要使用Node（或任何子類）作為型別。因為場景圖概念意味著只有一個Node物件可以位於應用程式場景的一個位置，所以從ComboBox項列表中刪除所選項。當選擇更改時，先前選擇的專案將返回到列表，並刪除新選擇。要防止出現這種情況，請使用單元工廠機制和API文件中描述的解決方案。當您需要更改物件的初始行為或外觀時，單元工廠機制特別有用ComboBox。
ComboBoxSample應用程式旨在說明如何在典型的電子郵件介面中使用組合框。例14-3建立了一個這樣的介面，其中使用兩個組合框來選擇電子郵件收件人和郵件的優先順序。
示例14-3建立組合框並將其新增到場景中
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class ComboBoxSample extends Application {
public static void main(String[] args) {
launch(args);
}
final Button button = new Button ("Send");
final Label notification = new Label ();
final TextField subject = new TextField("");
final TextArea text = new TextArea ("");
String address = " ";
@Override public void start(Stage stage) {
stage.setTitle("ComboBoxSample");
Scene scene = new Scene(new Group(), 450, 250);
final ComboBox emailComboBox = new ComboBox();
emailComboBox.getItems().addAll(
"[email protected]",
"[email protected]",
"[email protected]",
"[email protected]",
"[email protected]"
);
final ComboBox priorityComboBox = new ComboBox();
priorityComboBox.getItems().addAll(
"Highest",
"High",
"Normal",
"Low",
"Lowest"
);
priorityComboBox.setValue("Normal");
GridPane grid = new GridPane();
grid.setVgap(4);
grid.setHgap(10);
grid.setPadding(new Insets(5, 5, 5, 5));
grid.add(new Label("To: "), 0, 0);
grid.add(emailComboBox, 1, 0);
grid.add(new Label("Priority: "), 2, 0);
grid.add(priorityComboBox, 3, 0);
grid.add(new Label("Subject: "), 0, 1);
grid.add(subject, 1, 1, 3, 1);
grid.add(text, 0, 2, 4, 1);
grid.add(button, 0, 3);
grid.add (notification, 1, 3, 3, 1);
Group root = (Group)scene.getRoot();
root.getChildren().add(grid);
stage.setScene(scene);
stage.show();
}
}例14-3中的兩個組合框都使用getItems和addAll方法來新增專案。編譯並執行此程式碼時，它會生成如圖14-4所示的應用程式視窗。
圖14-4電子郵件收件人和優先順序組合框
可編輯的組合框
通常，電子郵件客戶端應用程式使使用者能夠從地址簿中選擇收件人並鍵入新地址。可編輯的組合框非常適合此任務。使用類的setEditable(true)方法ComboBox使組合框可編輯。使用此setPromptText方法，您可以指定在未執行選擇時顯示在組合框編輯區域中的文字。檢查示例14-4中的應用程式的修改程式碼。粗線是對例14-3的補充。
示例14-4在可編輯的組合框中處理新鍵入的值
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class ComboBoxSample extends Application {
public static void main(String[] args) {
launch(args);
}
final Button button = new Button ("Send");
final Label notification = new Label ();
final TextField subject = new TextField("");
final TextArea text = new TextArea ("");
String address = " ";
@Override public void start(Stage stage) {
stage.setTitle("ComboBoxSample");
Scene scene = new Scene(new Group(), 450, 250);
final ComboBox emailComboBox = new ComboBox();
emailComboBox.getItems().addAll(
"[email protected]",
"[email protected]",
"[email protected]",
"[email protected]",
"[email protected]"
);
emailComboBox.setPromptText("Email address");
emailComboBox.setEditable(true);
emailComboBox.valueProperty().addListener(new ChangeListener<String>() {
@Override
public void changed(ObservableValue ov, String t, String t1) {
address = t1;
}
});
final ComboBox priorityComboBox = new ComboBox();
priorityComboBox.getItems().addAll(
"Highest",
"High",
"Normal",
"Low",
"Lowest"
);
priorityComboBox.setValue("Normal");
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent e) {
//do something
}
});
GridPane grid = new GridPane();
grid.setVgap(4);
grid.setHgap(10);
grid.setPadding(new Insets(5, 5, 5, 5));
grid.add(new Label("To: "), 0, 0);
grid.add(emailComboBox, 1, 0);
grid.add(new Label("Priority: "), 2, 0);
grid.add(priorityComboBox, 3, 0);
grid.add(new Label("Subject: "), 0, 1);
grid.add(subject, 1, 1, 3, 1);
grid.add(text, 0, 2, 4, 1);
grid.add(button, 0, 3);
grid.add (notification, 1, 3, 3, 1);
Group root = (Group)scene.getRoot();
root.getChildren().add(grid);
stage.setScene(scene);
stage.show();
}
}除了編輯功能外emailComboBox，此程式碼片段還實現了此控制元件的事件處理。新鍵入或選擇的值儲存在address變數中。當用戶按“傳送”按鈕時，將顯示包含電子郵件地址的通知。
圖14-5顯示了使用者編輯Jacob Smith的電子郵件地址並將其更改為[email protected]的時刻。
圖14-5編輯電子郵件地址
按下發送按鈕後，所有控制元件都將返回其預設狀態。該clear方法被稱為上TextField和TextArea物件和null值設定為組合框中選定的專案。圖14-6顯示了按下發送按鈕後的時刻。
圖14-6按下發送按鈕後的使用者介面
將Cell Factories應用於組合框
您可以使用單元工廠機制來更改組合框的預設行為或外觀。例14-5建立了一個單元工廠並將其應用於優先順序組合框以突出顯示具有特殊顏色的優先順序型別。
示例14-5為優先順序組合框實現單元工廠
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Callback;
public class ComboBoxSample extends Application {
public static void main(String[] args) {
launch(args);
}
final Button button = new Button ("Send");
final Label notification = new Label ();
final TextField subject = new TextField("");
final TextArea text = new TextArea ("");
String address = " ";
@Override public void start(Stage stage) {
stage.setTitle("ComboBoxSample");
Scene scene = new Scene(new Group(), 450, 250);
final ComboBox emailComboBox = new ComboBox();
emailComboBox.getItems().addAll(
"[email protected]",
"[email protected]",
"[email protected]",
"[email protected]",
"[email protected]"
);
emailComboBox.setPromptText("Email address");
emailComboBox.setEditable(true);
emailComboBox.valueProperty().addListener(new ChangeListener<String>() {
@Override public void changed(ObservableValue ov, String t, String t1) {
address = t1;
}
});
final ComboBox priorityComboBox = new ComboBox();
priorityComboBox.getItems().addAll(
"Highest",
"High",
"Normal",
"Low",
"Lowest"
);
priorityComboBox.setValue("Normal");
priorityComboBox.setCellFactory(
new Callback<ListView<String>, ListCell<String>>() {
@Override public ListCell<String> call(ListView<String> param) {
final ListCell<String> cell = new ListCell<String>() {
{
super.setPrefWidth(100);
}
@Override public void updateItem(String item,
boolean empty) {
super.updateItem(item, empty);
if (item != null) {
setText(item);
if (item.contains("High")) {
setTextFill(Color.RED);
}
else if (item.contains("Low")){
setTextFill(Color.GREEN);
}
else {
setTextFill(Color.BLACK);
}
}
else {
setText(null);
}
}
};
return cell;
}
});
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent e) {
if (emailComboBox.getValue() != null &&
!emailComboBox.getValue().toString().isEmpty()){
notification.setText("Your message was successfully sent"
+ " to " + address);
emailComboBox.setValue(null);
if (priorityComboBox.getValue() != null &&
!priorityComboBox.getValue().toString().isEmpty()){
priorityComboBox.setValue(null);
}
subject.clear();
text.clear();
}
else {
notification.setText("You have not selected a recipient!");
}
}
});
GridPane grid = new GridPane();
grid.setVgap(4);
grid.setHgap(10);
grid.setPadding(new Insets(5, 5, 5, 5));
grid.add(new Label("To: "), 0, 0);
grid.add(emailComboBox, 1, 0);
grid.add(new Label("Priority: "), 2, 0);
grid.add(priorityComboBox, 3, 0);
grid.add(new Label("Subject: "), 0, 1);
grid.add(subject, 1, 1, 3, 1);
grid.add(text, 0, 2, 4, 1);
grid.add(button, 0, 3);
grid.add (notification, 1, 3, 3, 1);
Group root = (Group)scene.getRoot();
root.getChildren().add(grid);
stage.setScene(scene);
stage.show();
}
}細胞工廠生產ListCell物體。每個單元格都與一個組合框專案相關聯。通過該setPrefWidth方法設定每個組合框項的寬度。該updateItem方法為“高”和“最高”項設定紅色，為“低”和“最低”項設定綠色，並將“正常”項設定為黑色。
圖14-7顯示了應用示例14-5中的單元工廠後優先順序組合框的專案。
圖14-7修改了優先順序組合框
您可以ComboBox通過應用CSS樣式或視覺效果進一步增強控制元件的外觀。
相關的API文件