3.5.2.1.22. Label
ДЕМОНСТРАЦИЯ
API DOCS

Надпись (Label) − текстовый компонент, отображающий статический текст либо значение атрибута сущности.

XML-имя компонента: label

Пример задания надписи с текстом, взятым из пакета локализованных сообщений:

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

Атрибут value предназначен для задания текста надписи.

В веб-клиенте текст, содержащийся в атрибуте value, будет разбит на несколько строк, если по длине он превысит значение атрибута width. Поэтому для отображения многострочной надписи, достаточно указать абсолютное значение атрибута width. Если текст надписи слишком длинный, а значение атрибута width не определено, то текст будет урезан.

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

Параметры надписи можно задать в контроллере экрана. Для этого необходимо задать компоненту идентификатор, по которому получить ссылку на него в контроллере:

<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>

В данном случае компонент отображает атрибут name сущности Customer, находящейся в контейнере данных customerDc.

Атрибут htmlEnabled указывает, каким образом будет рассматриваться значение атрибута value: при htmlEnabled="true" как HTML-код, иначе как строка.

Атрибут htmlSanitizerEnabled разрешает или запрещает санитизацию HTML. Если атрибуты htmlEnabled и htmlSanitizerEnabled установлены в true, то значение атрибута value будет санитизировано.

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.

Стили компонента Label

В веб-клиенте с темой, основанной на Halo, к компоненту Label можно применить заданные стили. Стили задаются в XML-дексрипторе или контроллере экрана с помощью атрибута stylename:

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

Чтобы применить стиль программно, выберите одну из констант класса HaloTheme с префиксом компонента LABEL_:

label.setStyleName(HaloTheme.LABEL_COLORED);

  • bold - жирный шрифт. Подходит для выделения важных текстовых элементов UI.

  • colored - цветной текст.

  • failure - стиль сообщения об ошибке. Добавляет рамку вокруг компонента и значок рядом с текстом. Используется как уведомление рядом с другим компонентом.

  • h1 - стиль основных заголовков приложения.

  • h2 - стиль заголовков разделов приложения.

  • h3 - стиль подзаголовков.

  • h4 - стиль подзаголовков.

  • light - облегченный шрифт. Подходит для выделения второстепенных текстовых элементов UI.

  • 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