Label 文本标签

在线示例

Label - 文本标签 是一个文本组件，用于展示静态文本或者实体属性值。

组件的 XML 名称：label。

简单标签

示例：

<label value="Simple label"/>

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

如果 value 属性设置的文本长度超出 width 值，文件会分为多行显示。因此，显示一个多行标签，可以为标签的 width 指定一个绝对值。如果文本过长但是 width 值未定，文本会被截断。

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

动态标签

可以在界面控制器中设置标签的参数。需要给标签组件设置一个 id，然后在界面控制器中获取引用：

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

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

数据感知的标签

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

<data>
    <instance id="customerDc"
              class="ui.ex1.entity.Customer"/>
</data>
<layout>
        <label align="MIDDLE_CENTER"
               dataContainer="customerDc"
               property="firstName"/>
</layout>

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

HTML 内容

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

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

@Autowired
private Label<String> htmlLabel;

private 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\")>";

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

预定义样式

如需为 Label 组件设置自定义样式，可以在 XML 配置或者在界面控制器中设置 stylename 属性：

<label value="Colored label"
       stylename="colored"/>
@Autowired
private Label<String> styledLabel;

@Subscribe
protected void onInit(InitEvent event) {
    styledLabel.setStyleName("bold");
}

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

  • colored - 彩色文本。

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

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

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

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

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

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

  • spinner - 等待中样式。添加到空 Label 组件则可以创建一个可用于表示任务进行中的旋转图标。

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

事件和处理器

如需使用 Jmix Studio 生成处理器的桩代码，需要在界面 XML 描述或者 Jmix UI 层级结构面板选中该组件，然后用 Jmix UI 组件面板的 Handlers 标签页生成。

或者可以使用界面控制器顶部面板的 Generate Handler 按钮。

ContextHelpIconClickHandler

参阅 ContextHelpIconClickHandler。

格式化器

为组件添加 formatter 实例。

下面示例中，我们演示为 formattedLabel1 标签使用 formatter：

@Install(to = "formattedLabel", subject = "formatter")
protected String formattedLabelFormatter(String value) {
    return value.toUpperCase();
}

如需以编程的方式添加 formatter，使用组件的 addFormatter() 方法。

ValueChangeEvent

参阅 ValueChangeEvent。

Label XML 属性

可以使用 Studio 界面设计器的 Jmix UI 组件面板查看和编辑组件的属性。

align - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - description - descriptionAsHtml - box.expandRatio - height - htmlEnabled - htmlSanitizerEnabled - icon - id - property - rowspan - stylename - visible - width

Label XML 元素

formatter