3.5.2.1.45. 文本区

在线示例

API 文档

TextArea 是多行文本编辑字段。

该组件对应的 XML 名称: textArea

TextArea 的功能大部分与 TextField 组件相同,同时具有以下特有属性:

  • colsrows 设置文本的行数和列数:

    1. <textArea id="textArea" cols="20" rows="5" caption="msg://name"/>

    widthheight 的值优先于 colsrows 的值。

  • wordWrap - 将此属性设置为 false 以关闭自动换行。

    TextArea 支持在其父 TextInputField 接口中定义的 TextChangeListener。文本变化事件在输入时按顺序异步处理,不会阻塞输入。

    1. textArea.addTextChangeListener(event -> {
    2. int length = event.getText().length();
    3. textAreaLabel.setValue(length + " of " + textArea.getMaxLength());
    4. });

gui TextArea 2

  • textChangeEventMode 定义文本的变化被发送到服务器并触发服务端事件的方式。有 3 种预定义的事件模式:

    • LAZY (默认) - 文件输入暂停时触发事件。暂停时间可以通过 setTextChangeTimeout() 或者textChangeTimeout 属性修改。即使用户在输入文本时没有发生暂停,也会在可能发生的 ValueChangeEvent 之前强制触发文本更改事件。

    • TIMEOUT - 超时后触发事件。如果在超时周期内进行了多次更改,则将周期内自最后一次更改后发生的更改发送到服务端。可以使用 setTextChangeTimeout() 或者textChangeTimeout 属性设置超时时长。

      如果在超时期限之前发生 ValueChangeEvent,则在它之前触发 TextChangeEvent,条件是文本内容自上一个 TextChangeEvent 以来已经发生改变。

    • EAGER - 对于文本内容的每次更改,都会立即触发事件,通常是由按键触发。请求是独立且一个接一个地顺序处理。文本变化事件以异步方式与服务器交互,因此可以在处理事件请求的同时继续输入。

  • textChangeTimeouttextChangeEventModeLAZYTIMEOUT 时,定义编辑文本时暂停的时间或者超时时间。

    TextArea 样式

    Web Client 使用 Halo-based 主题时,在 XML 描述或者界面控制器中可以使用 stylename 属性给 TextArea 组件设置预定义的样式:

    1. <textArea id="textArea"
    2. stylename="borderless"/>

    如果使用编程的方式设置样式,可以选择一个前缀为 TEXTFIELD_HaloTheme class 常量:

    1. textArea.setStyleName(HaloTheme.TEXTAREA_BORDERLESS);
    • align-center - 使文本在文本区中居中显示。
  1. - `align-right` - 使文本在文本区中居右显示。
  2. - `borderless` - 移除文本区的边框和背景。

textArea 的属性

align - caption - captionAsHtml - caseConversion - cols - contextHelpText - contextHelpTextHtmlEnabled - conversionErrorMessage - css - dataContainer - datasource - datatype - description - descriptionAsHtml - editable - enable - box.expandRatio - height - icon - id - inputPrompt - maxLength - property - required - requiredMessage - responsive - rows - settingsEnabled - stylename - tabIndex - textChangeEventMode - textChangeTimeout - trim - visible - width - wordWrap

textArea 的预定义样式

align-center - align-right - borderless - huge - large - small - tiny

API

addTextChangeListener - addValueChangeListener - addValidator - commit - discard - isModified - setContextHelpIconClickHandler