3.5.11. DOM and CSS Attributes

The framework 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(Component component, String attributeName, String value) – sets DOM attribute on the top-most element of the UI component.

  • setCssProperty(Component component, String propertyName, String value) – sets CSS property value on the top-most element of UI component.

  • setDomAttribute(Component component, String querySelector, String attributeName, String value) – sets DOM attribute for all nested elements of UI component corresponding to the given query selector.

  • getDomAttribute(Component component, String querySelector, String attributeName) – gets DOM attribute value assigned earlier using HtmlAttributes. Does not reflect a real value from DOM.

  • removeDomAttribute(Component component, String querySelector, String attributeName) – removes DOM attribute for all nested elements of UI component corresponding to the given query selector.

  • setCssProperty(Component component, String querySelector, String propertyName, String value) – sets CSS property value for all nested elements of UI component corresponding to the given query selector.

  • getCssProperty(Component component, String querySelector, String propertyName) – gets CSS property value assigned earlier using HtmlAttributes. Does not reflect a real value from DOM.

  • removeCssProperty(Component component, String querySelector, String propertyName) – clears CSS property value for all nested elements of UI component corresponding to the given query selector.

  • applyCss(Component component, String querySelector, String css) – applies CSS properties from the CSS string.

The methods described above accept the following parameters:

  • component – the component’s identifier.

  • querySelector – a string containing one or more selectors to match. This string must be a valid CSS selector string.

  • attributeName – DOM attribute name (e.g. title).

  • propertyName – CSS property name (e.g. border-color).

  • value – the attribute value.

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

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