# Vaadin `ComboBox`教程 > 原文： [http://zetcode.com/vaadin/combobox/](http://zetcode.com/vaadin/combobox/) 在 Vaadin `ComboBox`教程中，我們學習 Vaadin `ComboBox`組件的基礎知識。 Vaadin `ComboBox`示例在標簽組件中顯示選定的值。 ## Vaadin Vaadin 是一種流行的 Java Web 開發框架，用于構建單頁 Web 應用。 ## Vaadin `ComboBox` `ComboBox`是允許從下拉列表中選擇項目的選擇組件。 在可編輯模式下，可以輸入新值。 ## Vaadin `ComboBox`示例 以下程序演示了 Vaadin `ComboBox`組件的用法。 從`ComboBox`中選擇的值顯示在標簽組件中。 NetBeans IDE 可用于輕松創建 Vaadin Web 應用。 我們需要安裝 NetBeans Vaadin 插件，然后創建一個新的 Vaadin Web 應用項目。 `MyUI.java` ```java package com.zetcode.ui; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.Title; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.data.HasValue; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.ui.Alignment; import com.vaadin.ui.ComboBox; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.Label; import com.vaadin.ui.UI; @Theme("mytheme") @Title("Vaadin ComboBox") public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { HorizontalLayout layout = new HorizontalLayout(); Label lbl = new Label(); ComboBox<String> cb = new ComboBox<>(); cb.setTextInputAllowed(false); cb.setItems("Ubuntu", "Debian", "Arch", "Mint"); cb.setEmptySelectionAllowed(false); cb.addValueChangeListener((HasValue.ValueChangeEvent<String> event) -> { String item = event.getValue(); lbl.setValue(item); }); layout.addComponents(cb, lbl); layout.setComponentAlignment(lbl, Alignment.MIDDLE_CENTER); layout.setMargin(true); setContent(layout); } @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { } } ``` 這是`MyUI`類。 ```java HorizontalLayout layout = new HorizontalLayout(); ``` 在我們的示例中，我們使用`HorizontalLayout`連續顯示兩個組件。 ```java Label lbl = new Label(""); ``` `Label`組件不顯示從組合框中選擇的值。 ```java ComboBox<String> cb = new ComboBox<>(); ``` 創建一個`ComboBox`組件。 ```java cb.setTextInputAllowed(false); ``` 使用`setTextInputAllowed()`方法，可以禁用`ComboBox`的可編輯模式。 ```java cb.setItems("Ubuntu", "Debian", "Arch", "Mint"); ``` 使用`setItems()`，我們將四個字符串元素添加到`ComboBox`中。 ```java cb.setEmptySelectionAllowed(false); ``` 默認情況下，`ComboBox`顯示一個空項目，允許用戶不選擇任何項目。 我們使用`setEmptySelectionAllowed()`禁用此選項。 ```java cb.addValueChangeListener((HasValue.ValueChangeEvent<String> event) -> { String item = event.getValue(); lbl.setValue(item); }); ``` 使用`addValueChangeListener()`，我們為`ComboBox`中的值更改添加了一個監聽器。 我們用`getValue()`方法獲得`ComboBox`當前選擇的項目。 使用`setValue()`方法將檢索到的值設置為標簽。 ```java layout.addComponents(cb, lbl); ``` 通過`addComponents()`方法將這兩個組件添加到`HorizontalLayout`。 ```java layout.setComponentAlignment(lbl, Alignment.MIDDLE_CENTER); ``` 我們將標簽放置在`setComponentAlignment()`和`Alignment.MIDDLE_CENTER`對齊的行中間。 ```java layout.setMargin(true); ``` 我們在`HorizontalLayout`周圍留了一些余量。 `mytheme.scss` ```java @import "../valo/valo.scss"; @mixin mytheme { @include valo; .v-horizontal > .v-spacing { width: 2em; } } ``` 我們增加了`HorizontalLayout`中組件之間的間距。  圖：Vaadin `ComboBox` ## Vaadin `ComboBox`示例 II 在第二個示例中，`ComboBox`填充了從服務方法中檢索到的城市對象的列表。 使用`setItemCaptionGenerator()`產生`ComboBox`中顯示的字符串。 `City.java` ```java package com.zetcode.bean; import java.io.Serializable; public class City implements Serializable { private static final long serialVersionUID = 1L; private Long id; private String name; private int population; public City() { } public City(Long id, String name, int population) { this.id = id; this.name = name; this.population = population; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getPopulation() { return population; } public void setPopulation(int population) { this.population = population; } @Override public String toString() { return "City{" + "id=" + id + ", name=" + name + ", population=" + population + '}'; } } ``` 這是`City` bean； 它包含`id`，`name`和`population`屬性。 `ICityService.java` ```java package com.zetcode.service; import com.zetcode.bean.City; import java.util.List; public interface ICityService { public List<City> findAll(); } ``` `ICityService`定義`findAll()`合約方法。 `CityService.java` ```java package com.zetcode.service; import com.zetcode.bean.City; import java.util.ArrayList; import java.util.List; public class CityService implements ICityService { @Override public List<City> findAll() { List<City> cities = new ArrayList<>(); cities.add(new City(1L, "Bratislava", 432000)); cities.add(new City(2L, "Budapest", 1759000)); cities.add(new City(3L, "Prague", 1280000)); cities.add(new City(4L, "Warsaw", 1748000)); cities.add(new City(5L, "Los Angeles", 3971000)); cities.add(new City(6L, "New York", 8550000)); cities.add(new City(7L, "Edinburgh", 464000)); cities.add(new City(8L, "Berlin", 3671000)); return cities; } } ``` `CityService`返回`City`對象的列表。 `MyUI.java` ```java package com.zetcode.ui; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.Title; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.data.HasValue; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.ui.Alignment; import com.vaadin.ui.ComboBox; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.Label; import com.vaadin.ui.UI; import com.zetcode.bean.City; import com.zetcode.service.CityService; @Theme("mytheme") @Title("Vaadin ComboBox") public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { CityService cityService = new CityService(); HorizontalLayout layout = new HorizontalLayout(); Label lbl = new Label(); ComboBox<City> cb = new ComboBox<>(); cb.setTextInputAllowed(false); cb.setItems(cityService.findAll()); cb.setEmptySelectionAllowed(false); cb.setItemCaptionGenerator(City::getName); cb.addValueChangeListener((HasValue.ValueChangeEvent<City> event) -> { City city = event.getValue(); String item = String.format("%s: %s", city.getName(), city.getPopulation()); lbl.setValue(item); }); layout.addComponents(cb, lbl); layout.setComponentAlignment(lbl, Alignment.MIDDLE_CENTER); layout.setMargin(true); setContent(layout); } @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { } } ``` 這是`MyUI`類。 ```java ComboBox<City> cb = new ComboBox<>(); ``` 創建參數化的`ComboBox`。 ```java cb.setItems(cityService.findAll()); ``` `ComboBox`中填充了服務方法中的數據。 ```java cb.setItemCaptionGenerator(City::getName); ``` 使用`setItemCaptionGenerator()`，我們選擇要在`ComboBox`中顯示為項目標簽的城市名稱。 ```java cb.addValueChangeListener((HasValue.ValueChangeEvent<City> event) -> { City city = event.getValue(); String item = String.format("%s: %s", city.getName(), city.getPopulation()); lbl.setValue(item); }); ``` 在標簽中，我們顯示城市名稱及其人口，并用冒號分隔。 在本教程中，我們展示了 Vaadin `ComboBox`組件的基礎知識。 您可能也對相關教程感興趣： [Vaadin 網格教程](/vaadin/grid/)， [Vaadin `Button`教程](/vaadin/button/)， [Vaadin 滑塊教程](/vaadin/slider/)， [Vaadin `CheckBox`教程](/vaadin/checkbox/)， [Java 教程](/lang/java/)。