5.5.9.2. Атрибуты DOM и CSS для визуальных компонентов

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

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

  • setDomAttribute() - устанавливает DOM-атрибут для самого верхнего элемента UI-компонента. Он принимает идентификатор компонента, имя DOM-атрибута (например, title) и его значение.

  • setCssProperty() - устанавливает CSS-свойство для самого верхнего элемента UI-компонента. Он принимает идентификатор компонента, имя CSS-свойства (например, border-color) и его значение.

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

Warning

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

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

XML descriptor 
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        class="com.company.demo.web.screens.DemoScreen"
        caption="Demo">
    <layout>
        <button caption="Demo"
                id="demoBtn"
                width="33%"/>
    </layout>
</window>
Screen controller 
import com.haulmont.cuba.gui.components.AbstractWindow;
import com.haulmont.cuba.gui.components.Button;
import com.haulmont.cuba.gui.components.HtmlAttributes;

import javax.inject.Inject;
import java.util.Map;

public class DemoScreen extends AbstractWindow {
    @Inject
    protected Button demoBtn;
    @Inject
    protected HtmlAttributes html;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        html.setDomAttribute(demoBtn, HtmlAttributes.DOM.TITLE, "Hello !");

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

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