Vaadin ComboBox示例 · HowToDoInJava 中文系列教程

# Vaadin `ComboBox`示例 > 原文： [https://howtodoinjava.com/vaadin/vaadin-combobox-examples/](https://howtodoinjava.com/vaadin/vaadin-combobox-examples/) 在本教程中，我們將學習與 Vaadin `ComboBox` UI 組件一起使用，包括設置值，過濾，添加新值和事件處理。 ```java Table of Contents Set ComboBox Values List Disable Empty/Null Selection Pre-selecting value Enable/Disable Values Filtering Editable Vaadin ComboBox Add Custom CSS Style Complete Example ``` ## 設置組合框值列表要將項目添加到 vaadin 組合框組件，請使用`ComboBox.addItem()`或`ComboBox.addItems()`方法。 ![Vaadin ComboBox Items](https://img.kancloud.cn/f7/02/f70227a2c93758788d07b8fc41dc4c6e_194x213.png) Vaadin `ComboBox`項目 ```java ComboBox combobox = new ComboBox("Select your gender:"); //Add multiple items combobox.addItems("Select", "Male", "Female", "Other"); layout.addComponent(combobox); ``` 如果您想一次添加一項： ```java ComboBox combobox = new ComboBox("Select your gender:"); //Add one item at a time combobox.addItem("Select"); combobox.addItem("Male"); combobox.addItem("Female"); combobox.addItem("Other"); layout.addComponent(combobox); ``` 同樣，您可以使用其他數據結構來填充組合框項目。例如。我已經使用**枚舉類型來填充 vaadin 組合框項目**。 ```java enum Genders { MALE("Male"), FEMALE("Female"), OTHERS("Others"); private String name; private Genders(String name) { this.name = name; } @Override public String toString() { return name; } } ComboBox combobox = new ComboBox("Select your gender:"); //Add enum values combobox.addItems("Select", Genders.MALE, Genders.FEMALE, Genders.OTHERS); layout.addComponent(combobox); ``` ## 禁用空選項您在第一個屏幕截圖中注意到第一個選項為空。如果要刪除此空選項，請使用`combobox.setNullSelectionAllowed(false);`方法。 ![Empty Option Removed from Vaadin Combobox](https://img.kancloud.cn/05/75/05759988d24c8f0da03bcb3a2c30f401_197x188.png) Vaadin 組合框中的空選項已刪除 ```java ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); //Remove empty option combobox.setNullSelectionAllowed(false); layout.addComponent(combobox); ``` ## 預選值很多時候您想預選一些值，例如，如果您正在顯示一個帶有預先存儲在數據庫中的值的編輯表單。在這種情況下，請使用`setValue()`方法。 ![Preselect value in vaadin combobox](https://img.kancloud.cn/79/86/7986f7a712b9440c2e7f8a5cdc6fbae3_192x187.png) vaadin 組合框中的預選值 ```java ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); //Remove empty option combobox.setNullSelectionAllowed(false); //Pre-set some value combobox.setValue("Male"); layout.addComponent(combobox); ``` ## 啟用/禁用值過濾默認情況下，vaadin 組合框組件支持過濾，即您可以通過鍵入文本框來過濾值。如果要控制啟用/禁用此功能，請使用`combobox.setFilteringMode()`方法。 ![Filtering in vaadin combobox](https://img.kancloud.cn/79/86/7986f7a712b9440c2e7f8a5cdc6fbae3_192x187.png) vaadin 組合框中的過濾共有 3 種過濾模式： 1. #### `FilteringMode.CONTAINS` 與包含組件文本字段部分中給出的字符串的任何項目匹配。 2. #### `FilteringMode.OFF` 它可以過濾掉并始終顯示所有項目。 3. #### `FilteringMode.STARTSWITH` 僅匹配以給定字符串開頭的項目。這是 vaadin7 中的默認模式。 ```java ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); combobox.setNullSelectionAllowed(false); //Add Filtering combobox.setFilteringMode(FilteringMode.CONTAINS); layout.addComponent(combobox); ``` ## Vaadin 可編輯`ComboBox` 在**可編輯組合框**中，您也可以從 UI 添加新項目。要添加新項目，只需鍵入新項目標題，然后按`Enter`。添加一個`NewItemHandler`實例來處理新添加的項目。例如。添加后，我在組合框中選擇它作為當前值。 ![Editable Combobox](https://img.kancloud.cn/b9/ce/b9cea583e52f3f237f614163dc750e12_209x253.png) 可編輯`ComboBox` ```java Label label = new Label(); ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); combobox.setNullSelectionAllowed(false); //Allow new Items combobox.setNewItemsAllowed(true); combobox.setImmediate(true); combobox.setNewItemHandler(new NewItemHandler(){ private static final long serialVersionUID = 1L; @Override public void addNewItem(String newItemCaption) { combobox.addItem(newItemCaption); combobox.setValue(newItemCaption); label.setValue("You added : " + newItemCaption); } }); layout.addComponent(label); layout.addComponent(combobox); ``` ## 添加自定義 CSS 樣式 * 整個組合框組件都包含在`v-filterselect`樣式中。 * 輸入字段為`v-filterselect-input`樣式。 * 右端用于打開和關閉下拉結果列表的按鈕為`v-filterselect-button`樣式。 * 下拉結果列表具有整體`v-filterselect-suggestpopup`樣式。 * 它包含`v-filterselect-suggestmenu`樣式的建議列表。修改以上 CSS 類以更改組合框的顯示。 ## 完整的例子 ```java package com.howtodoinjava.vaadin.demo; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.shared.ui.combobox.FilteringMode; import com.vaadin.ui.AbstractSelect.NewItemHandler; import com.vaadin.ui.ComboBox; import com.vaadin.ui.Label; import com.vaadin.ui.UI; import com.vaadin.ui.VerticalLayout; @Theme("mytheme") public class MyUI extends UI { private static final long serialVersionUID = 1387172685749279538L; enum Genders { MALE("Male"), FEMALE("Female"), OTHERS("Others"); private String name; private Genders(String name) { this.name = name; } @Override public String toString() { return name; } } @Override protected void init(VaadinRequest vaadinRequest) { final VerticalLayout layout = new VerticalLayout(); addListItems(layout); removeEmptySelection(layout); preSelectValue(layout); addFiltering(layout); editableCombobox(layout); layout.setMargin(true); layout.setSpacing(true); setContent(layout); } private void addListItems(VerticalLayout layout) { ComboBox combobox = new ComboBox("Select your gender:"); /* * combobox.addItem("Select"); combobox.addItem("Male"); * combobox.addItem("Female"); combobox.addItem("Other"); */ // combobox.addItems("Select", "Male", "Female", "Other"); combobox.addItems("Select", Genders.MALE, Genders.FEMALE, Genders.OTHERS); layout.addComponent(combobox); } private void removeEmptySelection(VerticalLayout layout) { ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); //Remove empty option combobox.setNullSelectionAllowed(false); layout.addComponent(combobox); } private void preSelectValue(VerticalLayout layout) { ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); //Remove empty option combobox.setNullSelectionAllowed(false); //Pre-set some value combobox.setValue("Male"); layout.addComponent(combobox); } private void addFiltering(VerticalLayout layout) { ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); combobox.setNullSelectionAllowed(false); //Add Filtering combobox.setFilteringMode(FilteringMode.CONTAINS); layout.addComponent(combobox); } private void editableCombobox(VerticalLayout layout) { Label label = new Label(); ComboBox combobox = new ComboBox("Select your gender:"); combobox.addItems("Select", "Male", "Female", "Other"); combobox.setNullSelectionAllowed(false); //Allow new Items combobox.setNewItemsAllowed(true); combobox.setImmediate(true); combobox.setNewItemHandler(new NewItemHandler(){ private static final long serialVersionUID = 1L; @Override public void addNewItem(String newItemCaption) { combobox.addItem(newItemCaption); combobox.setValue(newItemCaption); label.setValue("You added : " + newItemCaption); } }); layout.addComponent(label); layout.addComponent(combobox); } @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { private static final long serialVersionUID = -2718268186398688122L; } } ``` [源碼下載](//howtodoinjava.com/wp-content/downloads/Vaadin-Combobox-Examples.zip) 學習愉快！參考文獻： [查看`ComboBox`類](https://vaadin.com/api/com/vaadin/ui/ComboBox.html) [查看圖書示例](https://vaadin.com/docs/-/part/framework/components/components-combobox.html) [查看 Wiki](https://vaadin.com/wiki/-/wiki/Main/Configure+ComboBoxes+wisely)