Label

LIVE DEMO

Label is a text component that displays static text or value of an entity attribute.

Component’s XML-name: label.

Simple Label

Usage example:

<label value="Simple label"/>

The value attribute sets the text for a label.

The text contained in value will be split into multiple lines if its length exceeds the width value. Therefore, to display a multiline label, it is sufficient to specify an absolute value of width. If the label text is too long and the value of width is not specified, the text will be truncated.

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

Dynamic Label

You can set label parameters in the screen controller. To do this, you should specify a component id and get a reference to the component in the controller:

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

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

Data-aware Label

The Label component can display the value of an entity attribute. Use dataContainer and property attributes, for example:

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

In the example above, the component displays the name attribute of the Customer entity located in the customerDc data container.

HTML Content

htmlEnabled attribute indicates the way the value attribute will be interpreted: if htmlEnabled="true", the attribute will be treated as HTML code, otherwise as a plain string.

The htmlSanitizerEnabled attribute enables or disables HTML sanitization. If htmlEnabled and htmlSanitizerEnabled attributes are set to true, then the label value will be sanitized.

@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);
}

Predefined Styles

You can set predefined styles to the Label component using the stylename attribute either in the XML descriptor or in the screen controller:

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

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

  • bold - bolder font weight. Suitable for important/prominent UI text.

  • colored - colored text.

  • failure - failure badge style. Adds a border around the label and an icon next to the text. Suitable for UI notifications that need to be used in the direct context of some component.

  • h1 - header style for main application headings.

  • h2 - header style for different sections in the application.

  • h3 - header style for different sub-sections in the application.

  • h4 - header style for different sub-sections in the application.

  • light - lighter font weight. Suitable for additional/supplementary UI text.

  • spinner - spinner style. Add this style name to an empty Label to create a spinner.

  • success - success badge style. Adds a border around the label and an icon next to the text. Suitable for UI notifications that need to be used in the direct context of some component.

Events and Handlers

To generate a handler stub in Jmix Studio, select the component in the screen descriptor XML or in the Jmix UI hierarchy panel and use the Handlers tab of the Jmix UI inspector panel.

Alternatively, you can use the Generate Handler button in the top panel of the screen controller.

ContextHelpIconClickHandler

See ContextHelpIconClickHandler.

Formatter

Adds a formatter instance to the component.

In the example below, we will show a formatter usage for the formattedLabel1 label:

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

To add a formatter programmatically, use the addFormatter() component method.

ValueChangeEvent

See ValueChangeEvent.

Label XML Attributes

You can view and edit attributes applicable to the component using the Jmix UI inspector panel of the Studio’s Screen Designer.

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

Label XML Element

formatter