3.5.11. 可视化组件的 DOM 和 CSS 属性

框架提供了设置组件原生 HTML 属性的 API，用于为可视化组件设置 DOM 和 CSS 属性。

HtmlAttributes bean 允许使用以下方法通过编程方式设置 DOM/CSS 属性：

• setDomAttribute(Component component, String attributeName, String value) - 在 UI 组件的最顶层 HTML 元素上设置 DOM 属性。

• setCssProperty(Component component, String propertyName, String value) - 在 UI 组件的最顶层 HTML 元素上设置 CSS 属性值。

• setDomAttribute(Component component, String querySelector, String attributeName, String value) – 为 UI 组件内满足查询选择器的所有嵌套元素设置 DOM 属性。

• getDomAttribute(Component component, String querySelector, String attributeName) – 获取之前使用 HtmlAttributes 设置的 DOM 属性。并不能反映当前 DOM 的真实值。

• removeDomAttribute(Component component, String querySelector, String attributeName) – 为 UI 组件内满足查询选择器的所有嵌套元素移除 DOM 属性。

• setCssProperty(Component component, String querySelector, String propertyName, String value) – 为 UI 组件内满足查询选择器的所有嵌套元素设置 CSS 属性值。

• getCssProperty(Component component, String querySelector, String propertyName) – 获取之前使用 HtmlAttributes 设置的 CSS 属性值。并不能反映当前 DOM 的真实值。

• removeCssProperty(Component component, String querySelector, String propertyName) – 为 UI 组件内满足查询选择器的所有嵌套元素清除 CSS 属性值。

• applyCss(Component component, String querySelector, String css) – 使用 CSS 字符串应用 CSS 属性。

以上方法接收下面这些参数：

• component – 组件标识符。

• querySelector – 字符串，包含一个或多个 选择器 用来做匹配。这个字符串必须是正确的 CSS 选择器字符串。

• attributeName – DOM 属性名称（比如 title）。

• propertyName – CSS 属性名称（比如 border-color）。

• value – 属性值。

最常见的 DOM 属性名称和 CSS 属性名称在 HtmlAttributes bean 类中作为常量提供，但也可以使用任何自定义属性。

HtmlAttributes bean 应该注入界面控制器中并按如下方式使用：

XML 描述

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

界面控制器

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