3.5.2.1.22. 标签组件
在线示例
API 文档

Label 组件可以展示静态文本或者实体属性值。

该组件的 XML 名称是： label

下面是使用从本地化消息包中获取文本来设置标签的例子:

<label value="msg://orders"/>

value 属性设置标签的文本值。

在网页端，如果 value 属性设置的文本长度超出width值，文件会被分为多行显示。因此，显示一个多行标签，可以通过设置标签 width值实现. 如果文本过长但是 width值未定，文本会被截取。

<label value="Label, which should be split into multiple lines"
       width="200px"/>

可以在界面控制器中设置标签的参数，前提是给标签控件设置一个 id，然后在界面控制器中获取它的引用：

<label id="dynamicLabel"/>
@Inject
private Label dynamicLabel;

@Subscribe
protected void onInit(InitEvent event) {
    dynamicLabel.setValue("Some value");
}

Label 组件还可以显示实体属性值。这种情况需要设置 dataContainer 和 property 属性，例如：

<data>
    <instance id="customerDc" class="com.company.sales.entity.Customer" view="_local">
        <loader/>
    </instance>
</data>
<layout>
    <label dataContainer="customerDc" property="name"/>
</layout>

上面例子里，标签组件显示 customerDс 数据容器中实体 Customer 的 name 字段。

htmlEnabled 属性控制如何解析 value 属性值：如果 htmlEnabled="true"，则 value 值以 HTML 代码解析，否则按纯文本解析。

htmlSanitizerEnabled 属性可以启用或禁用 HTML 清理。如果 htmlEnabled 和 htmlSanitizerEnabled 属性都设置为 true，则标签的值会被清理。

protected static final String UNSAFE_HTML = "<i>Jackdaws </i><u>love</u> <font size=\"javascript:alert(1)\" " +
            "color=\"moccasin\">my</font> " +
            "<font size=\"7\">big</font> <sup>sphinx</sup> " +
            "<font face=\"Verdana\">of</font> <span style=\"background-color: " +
            "red;\">quartz</span><svg/onload=alert(\"XSS\")>";

@Inject
private Label<String> label;

@Subscribe
public void onInit(InitEvent event) {
    label.setHtmlEnabled(true);
    label.setHtmlSanitizerEnabled(true);
    label.setValue(UNSAFE_HTML);
}

htmlSanitizerEnabled 属性会覆盖全局的 cuba.web.htmlSanitizerEnabled 配置。

标签样式

在基于 Halo 主题的网页端, 可以通过 stylename 属性定义样式。在 XML 描述里或者在界面控制器中：

<label value="Label to be styled"
       stylename="colored"/>

通过代码设置样式时，选择 HaloTheme 类中以 LABEL_ 开头的常量：

label.setStyleName(HaloTheme.LABEL_COLORED);

  • bold - 加粗。适用于重要的或者需要突出显示的文本。

  • colored - 彩色文本。

  • failure - 失败标签样式。标签外会有一个边框，文本旁边会有一个图标。适用于一些组件内部的上下文通知。

  • h1 - 标题样式，应用程序标题。

  • h2 - 标题样式，应用程序中章节标题。

  • h3 - 标题样式，应用程序子章节标题。

  • h4 - 标题样式，应用程序小章节标题。

  • light - 纤细。适用于附加/补充文本。

  • no-margin - 不要默认边距。

  • spinner - 回旋样式。添加到空 Label 组件则可以创建一个可用于表示任务进行中（比如数据正在加载中…​）的旋转图标。

  • success - 成功标签样式。标签外会有一个边框，文本旁会有一个图标。适用于一些组件内部的上下文通知。

Label 组件的属性列表

align - css - dataContainer - description - descriptionAsHtml - enable - box.expandRatio - height - htmlEnabled - htmlSanitizerEnabled - icon - id - property - stylename - value - visible - width

Label 组件的元素

formatter

Label 组件样式

bold - colored - failure - h1 - h2 - h3 - h4 - huge - large - light - no-margin - small - spinner - success - tiny

API

addValueChangeListener