Vaadin Web应用开发教程(10):UI组件-TextField

jerry VaadinWeb 2015年11月25日收藏

TextField文本框，可以接受用户输入文字。它实现Field接口，支持数据绑定。基本用法：

// Create a text field
TextField tf = new TextField("A Field");
// Put some initial content in it
tf.setValue("Stuff in the field");

显示如下：

支持Field接口的UI组件，可以通过Property.ValueChangeListener 来监视Value的变化。可以通过方法getValue()来取代TextField的当前值。参考下面代码片段：

// Handle changes in the value
tf.addListener(new Property.ValueChangeListener() {
    public void valueChange(ValueChangeEvent event) {
        // Assuming that the value type is a String
        String value = (String) tf.getValue();
 
        // Do something with the value
        getWindow().showNotification("Value is:", value);
    }
});
 
// Fire value changes immediately when the field loses focus
tf.setImmediate(true);

TextField由AbstractTextField派生而来，因此继承了AbstractTextField的大部分API。下图为AbstractTextField的类关系图：

数据绑定

实现Field接口的UI组件支持数据绑定，TextField可以绑定到支持和 String 互换的数据类型。比如下面代码将TextField 绑定到一个Double数据变量。

// Have an initial data model. As Double is unmodificable and
// doesn't support assignment from String, the object is
// reconstructed in the wrapper when the value is changed.
Double trouble = 42.0;
 
// Wrap it in a property data source
final ObjectProperty<Double> property =
    new ObjectProperty<Double>(trouble);
 
// Create a text field bound to it
TextField tf = new TextField("The Answer", property);
tf.setImmediate(true);
 
// Show that the value is really written back to the
// data source when edited by user.
Label feedback = new Label(property);
feedback.setCaption("The Value");

字符串长度

可以通过setMaxLenght() 指定文本框可以输入的字符串长度。为安全起见，TextField 的值传到服务器端时会截去超过最大长都的部分。

处理Null 值

TextField 可以绑定到某些支持Null值的数据源，如数据库的某个字段。此时，你可能想以某种特殊方式表示Null值，可以通过setNullRepresentation() 设置但当数据源为Null时显示内容。 setNullSettingAllowed 可以控制是否允许用客输入null 值，当setNullSettingAllowed 为假时，输入的Null 代表字符串null，而非Null值。

比如：

// Create a text field without setting its value
TextField tf = new TextField("Field Energy (J)");
tf.setNullRepresentation("-- null-point energy --");
 
// The null value is actually the default
tf.setValue(null);
 
// Allow user to input the null value by
// its representation
tf.setNullSettingAllowed(true);
 
// Feedback to see the value
Label value = new Label(tf);
value.setCaption("Current Value:");

结果如下：

Text 文本变化事件
除了通用的Property.ValueChangeListener 之外，TextField可以使用TextChangeListner 来监视Text内容的变化。immediate 模式实际上并非是立即触发Text内容变化事件，而是发生在TextField失去Focus后。
TextField 文本变化事件触发的时机有三种模式：TextChangeEventMode.LAZY (默认模式），TextChangeEventMode.TIMEOUT 和 TextChangeEventMode.EAGER 。
TextChangeEventMode.EAGER 表示每次按键都会触发事件，而TextChangeEventMode.TIMEOUT 表示每隔指定时间段时触发事件，而TextChangeEventMode.LAZY 则表示在输入暂停的某个时刻触发事件。
对于Web应用来说，使用默认模式可以适用大部分情况。