3.5.11. Атрибуты DOM и CSS

Платформа CUBA предоставляет специальный API для HTML-атрибутов, позволяющий устанавливать DOM и CSS атрибуты для визуальных компонентов.

DOM/CSS атрибуты можно установить программно с помощью бина HtmlAttributes и следующих его методов:

  • setDomAttribute(Component component, String attributeName, String value) – устанавливает DOM-атрибут для самого верхнего элемента UI-компонента.

  • setCssProperty(Component component, String propertyName, String value) – устанавливает CSS-свойство для самого верхнего элемента UI-компонента.

  • setDomAttribute(Component component, String querySelector, String attributeName, String value) – устанавливает DOM-атрибут для всех вложенных элементов UI-компонента, соответствующих заданному селектору запроса.

  • getDomAttribute(Component component, String querySelector, String attributeName) – получает значение DOM-атрибута, заданное ранее с помощью HtmlAttributes. Не отражает реальное значение из DOM.

  • removeDomAttribute(Component component, String querySelector, String attributeName) – удаляет DOM-атрибут для всех вложенных элементов UI-компонента, соответствующих заданному селектору запроса.

  • setCssProperty(Component component, String querySelector, String propertyName, String value) – задает значение CSS-свойства для всех вложенных элементов UI-компонента, соответствующих заданному селектору запроса.

  • getCssProperty(Component component, String querySelector, String propertyName) – получает значение CSS-свойства, заданное ранее с помощью HtmlAttributes. Не отражает реальное значение из DOM.

  • removeCssProperty(Component component, String querySelector, String propertyName) – очищает значение CSS-свойства для всех вложенных элементов UI-компонента, соответствующих заданному селектору запроса.

  • applyCss(Component component, String querySelector, String css) – задает значение CSS-свойства из строки CSS.

Описанные выше методы принимают следующие параметры:

  • component – идентификатор компонента.

  • querySelector – строка, содержащая один или несколько селекторов для сопоставления. Эта строка должна быть валидной строкой селектора CSS.

  • attributeName – имя DOM-атрибута (например, title).

  • propertyName – имя CSS-свойства (например, border-color).

  • value – значение атрибута.

Имена наиболее часто используемых DOM-атрибутов и CSS-свойств доступны как константы класса HtmlAttributes, однако вы можете использовать и свои собственные имена атрибутов.

Будет ли атрибут работать с конкретным компонентом, зависит от этого компонента. Некоторые визуальные компоненты могут скрыто использовать те же атрибуты для своих собственных нужд, поэтому приведённые выше методы в определенных случаях могут не работать.

Чтобы использовать бин HtmlAttributes, его нужно инжектировать в контроллер экрана, например:

XML descriptor 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
        caption="Demo"
        messagesPack="com.company.demo.web">
    <layout>
        <button id="demoButton"
                caption="msg://demoButton"
                width="33%"/>
    </layout>
</window>
Screen controller 
import com.haulmont.cuba.gui.components.Button;
import com.haulmont.cuba.gui.components.HtmlAttributes;
import com.haulmont.cuba.gui.screen.Screen;
import com.haulmont.cuba.gui.screen.Subscribe;
import com.haulmont.cuba.gui.screen.UiController;
import com.haulmont.cuba.gui.screen.UiDescriptor;

import javax.inject.Inject;

@UiController("demo_DemoScreen")
@UiDescriptor("demo-screen.xml")
public class DemoScreen extends Screen {

    @Inject
    private Button demoButton;

    @Inject
    protected HtmlAttributes html;

    @Subscribe
    private void onBeforeShow(BeforeShowEvent event) {
        html.setDomAttribute(demoButton, HtmlAttributes.DOM.TITLE, "Hello!");

        html.setCssProperty(demoButton, HtmlAttributes.CSS.BACKGROUND_COLOR, "red");
        html.setCssProperty(demoButton, HtmlAttributes.CSS.BACKGROUND_IMAGE, "none");
        html.setCssProperty(demoButton, HtmlAttributes.CSS.BOX_SHADOW, "none");
        html.setCssProperty(demoButton, HtmlAttributes.CSS.BORDER_COLOR, "red");
        html.setCssProperty(demoButton, "color", "white");

        html.setCssProperty(demoButton, HtmlAttributes.CSS.MAX_WIDTH, "400px");
    }
}