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