3.5.2.1.44. 文本区

在线示例

API 文档

TextArea 是多行文本编辑字段。

组件对应的 XML 名称： textArea

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

  • cols 和 rows 设置文本的行数和列数：
  1. <textArea id="textArea" cols="20" rows="5" caption="msg://name"/>

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

  • resizableDirection – 定义用户更改组件大小的方式，除非为组件设置了百分比大小。
  1. <textArea id="textArea" resizableDirection="BOTH"/>

gui textField resizable

有四种调整大小的模式可用：

  • BOTH - 组件可在两个方向上调整大小。如果为组件设置了百分比大小，则组件不可调整大小。

  • NONE - 不能调整组件大小。

  • VERTICAL - 只能垂直调整组件大小。如果为组件设置了百分比大小，则无法垂直调整组件大小。

  • HORIZONTAL - 只能水平调整组件大小。如果为组件设置百分比宽度，则无法水平调整组件的大小。

可以使用 ResizeListener 接口跟踪组件大小更改事件。例如：

  1. textArea.addResizeListener(resizeEvent ->
  2.         notifications.create()
  3.                 .withCaption("Resized")
  4.                 .show());
  • 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 （默认） - 文件输入暂停时触发事件。暂停时间可以通过 setInputEventTimeout() 修改。即使用户在输入文本时没有发生暂停，也会在可能发生的 ValueChangeEvent 之前强制触发文本更改事件。

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

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

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

    TextArea 样式

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

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

如果使用编程的方式设置样式，可以选择一个前缀为 TEXTFIELD_ 的 HaloTheme class 常量：

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

align - caption - captionAsHtml - caseConversion - cols - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - datasource - datatype - description - descriptionAsHtml - editable - enable - box.expandRatio - height - icon - id - maxLength - property - required - requiredMessage - resizableDirection - rows - settingsEnabled - stylename - tabIndex - trim - visible - width - wordwrap
textArea 的预定义样式

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

addResizeListener - addTextChangeListener - addValueChangeListener - applySettings - commit - discard - isModified - saveSettings - setContextHelpIconClickHandler