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