DoubleRight The past of the world Blog's

Vaadin ComboBox示例

Vaadin ComboBox示例

原文： https://howtodoinjava.com/vaadin/vaadin-combobox-examples/

在本教程中，我们将学习与 Vaadin ComboBox UI 组件一起使用，包括设置值，过滤，添加新值和事件处理。

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

Vaadin ComboBox项目

ComboBox combobox = new ComboBox("Select your gender:");

//Add multiple items
combobox.addItems("Select", "Male", "Female", "Other");

layout.addComponent(combobox);

如果您想一次添加一项：

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 组合框项目。

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

Vaadin 组合框中的空选项已删除

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

vaadin 组合框中的预选值

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

vaadin 组合框中的过滤

共有 3 种过滤模式：

  1. FilteringMode.CONTAINS

    与包含组件文本字段部分中给出的字符串的任何项目匹配。

  2. FilteringMode.OFF

    它可以过滤掉并始终显示所有项目。

  3. FilteringMode.STARTSWITH

    仅匹配以给定字符串开头的项目。 这是 vaadin7 中的默认模式。

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

可编辑ComboBox

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 类以更改组合框的显示。

完整的例子

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;
	}
}

源码下载

学习愉快！

参考文献：

查看ComboBox类

查看图书示例

查看 Wiki

搜索