Vaadin组件代码示例

ListSelect

ListSelect 组件是一个列表框, 其中显示可选择的项目列表, 垂直排列. 如果选择项目的数量超过了组件高度, 会显示滚动条. 这个组件支持单选模式也支持多选模式, 可以通过 setMultiSelect()方法设置. 这两种模式的外观表现是完全一样的.

// Create the selection component
ListSelect select = new ListSelect("The List");
// Add some items (here by the item ID as the caption)
select.addItems("Mercury", "Venus", "Earth", ...);
select.setNullSelectionAllowed(false);
// Show 5 items and a scrollbar if there are more
select.setRows(5);

NativeSelect

NativeSelect 是一个下拉选择组件, 使用 Web 浏览器原生的(native) select 输入框实现, 也就是HTML <select> 元素.

// Create the selection component
NativeSelect select = new NativeSelect("Native Selection");
// Add some items
select.addItems("Mercury", "Venus", ...);
setColumns() 方法可以设置列表的宽度, 单位为 "列(column)", 具体尺寸由浏览器决定.

OptionGroup

OptionGroup 是一个选择组件, 对於单选模式它使用一组 Radio Button. 对于多选模式, 它使用一组 Check Box.

// A single-select radio button group
OptionGroup single = new OptionGroup("Single Selection");
single.addItems("Single", "Sola", "Yksi");
// A multi-select check box group
OptionGroup multi = new OptionGroup("Multiple Selection");
multi.setMultiSelect(true);
multi.addItems("Many", "Muchos", "Monta");

// Have an option group with some items
OptionGroup group = new OptionGroup("My Disabled Group");
group.addItems("One", "Two", "Three");
// Disable one item by its item ID
group.setItemEnabled("Two", false);