5.5.9.2. DOM and CSS Attributes for Visual Components

CUBA Platform provides the ad-hoc HTML attributes API for setting DOM and CSS attributes to visual components.

The HtmlAttributes bean allows setting DOM/CSS attributes programmatically using the following methods:

  • setDomAttribute() - sets DOM attribute on the top most element of UI component. It takes the component’s identifier, DOM attribute name (e.g. title) and the attribute value.

  • setCssProperty() - sets CSS property value on the top most element of UI component. It takes the component’s identifier, CSS property name (e.g. border-color) and the attribute value.

The most common DOM attributes names and CSS properties names are available in the HtmlAttributes bean class as constants, but you can use any custom attributes as well.

Warning

The functioning of a particular attribute may vary depending on the component this attribute is applied to. Some visual components may implicitly use the same attributes for their own purposes, so the methods above may not work in some cases.

The HtmlAttributes bean should be injected in the screen controller and used as follows:

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