vaadin之UI组件

UI 组件的类层级关系图：

组合框ComboBox

// The locale in which we want to have the language
// selection list
Locale displayLocale = Locale.CHINA;

// All known locales
final Locale[] locales = Locale.getAvailableLocales();

// Allow selecting a language. We are in a constructor of a
// CustomComponent, so preselecting the current
// language of the application can not be done before
// this (and the selection) component are attached to
// the application.
final ComboBox select = new ComboBox("Select a language") {
    @Override
    public void attach() {
        super.attach();
        setValue(getLocale());
    }
};
for (int i=0; i<locales.length; i++) {
    select.addItem(locales[i]);
    select.setItemCaption(locales[i], locales[i].getDisplayName(displayLocale));

    // Automatically select the current locale
    if (locales[i].equals(getLocale()))
        select.setValue(locales[i]);
}
layout.addComponent(select);

// Locale code of the selected locale
final Label localeCode = new Label("");
layout.addComponent(localeCode);

// A date field which language the selection will change
final InlineDateField date =
    new InlineDateField("Calendar in the selected language");
date.setResolution(Resolution.DAY);
layout.addComponent(date);

// Handle language selection
select.addValueChangeListener(new Property.ValueChangeListener() {
    public void valueChange(ValueChangeEvent event) {
        Locale locale = (Locale) select.getValue();
        date.setLocale(locale);
        localeCode.setValue("Locale code: " +
                            locale.getLanguage() + "_" +
                            locale.getCountry());
    }
});
select.setImmediate(true);

效果如下：

文本域TextField

TextField readwrite = new TextField("Read-Write");
        readwrite.setValue("You can change this");
        readwrite.setReadOnly(false); // The default
        layout.addComponent(readwrite);

        TextField readonly = new TextField("Read-Only");
        readonly.setValue("You can't touch this!");
        readonly.setReadOnly(true);
        layout.addComponent(readonly);
文本变更事件
// Text field with maximum length
final TextField tf = new TextField("My Eventful Field");
tf.setValue("Initial content");
tf.setMaxLength(20);

// Counter for input length
final Label counter = new Label();
counter.setValue(tf.getValue().length() +
                 " of " + tf.getMaxLength());

// Display the current length interactively in the counter
tf.addTextChangeListener(new TextChangeListener() {
    public void textChange(TextChangeEvent event) {
        int len = event.getText().length();
        counter.setValue(len + " of " + tf.getMaxLength());
    }
});
// The lazy mode is actually the default
tf.setTextChangeEventMode(TextChangeEventMode.LAZY);

TextArea

TextArea area1 = new TextArea("Wrapping");
area1.setWordwrap(true); // The default
area1.setValue("A quick brown fox jumps over the lazy dog");

TextArea area2 = new TextArea("Nonwrapping");
area2.setWordwrap(false);
area2.setValue("Victor jagt zwölf Boxkämpfer quer "+
               "über den Sylter Deich");
setWordwrap() 方法控制当行的长度达到表示区域最大宽度时, 长的行是否折行表示

PasswordField

PasswordField 是 TextField 的变体, 它会将输入的内容隐藏起来.

PasswordField tf = new PasswordField("Keep it secret");

RichTextArea

RichTextArea 组件可用于输入和编辑格式化的文本. 它的工具条提供了所有基本的的编辑功能

使用 DateField 输入日期和时间

DateField 组件用于显示和输入日期/时间. 这个组件有两种不同的形式: PopupDateField, 它包括一个数字输入框, 和一个弹出式日历, InlineDateField, 直接显示日历. DateField 基类默认为弹出式输入方式
// Create a DateField with the default style
DateField date = new DateField();

// Set the date and time to present
date.setValue(new Date());

// Display only year, month, and day in ISO format
date.setDateFormat("yyyy-MM-dd");


InlineDateField 提供一个日期选择组件, 表现为月历形式. 用户可以点击适当的箭头按钮在不同的年份和月份间跳转. 与弹出式日历不同, 这个日历会永远显示在界面中.

CheckBox

CheckBox checkbox1 = new CheckBox("Box with no Check");
CheckBox checkbox2 = new CheckBox("Box with a Check");

checkbox2.setValue(true);

checkbox1.addValueChangeListener(event -> // Java 8
    checkbox2.setValue(! checkbox1.getValue()));

checkbox2.addValueChangeListener(event -> // Java 8
    checkbox1.setValue(! checkbox2.getValue()));

OptionGroup

Option group 默认为单选模式. 使用 setMultiSelect() 方法可以激活多选模式
// 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");

你可以使用 setItemEnabled() 方法禁用 OptionGroup 内的单个项目. 在多选模式下, 对于被禁用的项目, 用户不能选中它, 也不能解除选中, 但在单选模式下, 用户可以将当前选项从一个被禁用的项目变为另一个有效的项目. 选中项可以通过程序来变更, 无论项目是有效还是禁用. 你可以使用 isItemEnabled() 方法检查某个项目是有效还是禁用.
setItemEnabled() 使用项目的 ID 来指定它将要禁用或允许的项目.
// Have an option group with some items
OptionGroup group = ne