3.5.2.1.46. 文本区

在线示例

API 文档

TextArea 是多行文本编辑字段。

该组件对应的 XML 名称： textArea

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

  • cols 和 rows 设置文本的行数和列数：

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

    width 和 height 的值优先于 cols 和 rows 的值。

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

  • textChangeTimeout 当textChangeEventMode 是 LAZY 或 TIMEOUT 时，定义编辑文本时暂停的时间或者超时时间。

    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` - 使文本在文本区中居右显示。
  4. -   `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