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("jacob.smith@example.com","isabella.johnson@example.com","ethan.williams@example.com","emma.jones@example.com","michael.brown@example.com" );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("jacob.smith@example.com","isabella.johnson@example.com","ethan.williams@example.com","emma.jones@example.com","michael.brown@example.com" );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>() {@Overridepublic 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的電子郵件地址并將其更改為greg.smith@example.com的時刻。
圖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("jacob.smith@example.com","isabella.johnson@example.com","ethan.williams@example.com","emma.jones@example.com","michael.brown@example.com" );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>() {@Overridepublic 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文檔?
-
ComboBox
-
ComboBoxBase
-
ListView
-
ListCell
-
Button
總結
以上是生活随笔為你收集整理的JavaFX UI控件教程(十五)之Combo Box的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 抖音人脸变换怎么弄
- 下一篇: JavaFX UI控件教程(十六)之Se