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

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

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

  • setDomAttribute() - 在 UI 组件的最顶层 HTML 元素上设置 DOM 属性。接受组件的标识符、DOM 属性名称（例如 title）和属性值作为参数。

  • setCssProperty() - 在 UI 组件的最顶层 HTML 元素上设置 CSS 属性值。接受组件的标识符、CSS 属性名称（例如 border-color）和属性值作为参数。

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



特定属性的功能可能会根据应用此属性的组件而有所不同。某些可视化组件可能为了特殊的目的隐式使用了相同的属性，因此上述方法在某些情况下可能不起作用。

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

XML 描述 

  1. <window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
  2.         class="com.company.demo.web.screens.DemoScreen"
  3.         caption="Demo">
  4.     <layout>
  5.         <button caption="Demo"
  6.                 id="demoBtn"
  7.                 width="33%"/>
  8.     </layout>
  9. </window>

界面控制器 

  1. import com.haulmont.cuba.gui.components.AbstractWindow;
  2. import com.haulmont.cuba.gui.components.Button;
  3. import com.haulmont.cuba.gui.components.HtmlAttributes;
  5. import javax.inject.Inject;
  6. import java.util.Map;
  8. public class DemoScreen extends AbstractWindow {
  9.     @Inject
  10.     protected Button demoBtn;
  11.     @Inject
  12.     protected HtmlAttributes html;
  14.     @Override
  15.     public void init(Map<String, Object> params) {
  16.         super.init(params);
  18.         html.setDomAttribute(demoBtn, HtmlAttributes.DOM.TITLE, "Hello !");
  20.         html.setCssProperty(demoBtn, HtmlAttributes.CSS.BACKGROUND_COLOR, "red");
  21.         html.setCssProperty(demoBtn, HtmlAttributes.CSS.BACKGROUND_IMAGE, "none");
  22.         html.setCssProperty(demoBtn, HtmlAttributes.CSS.BOX_SHADOW, "none");
  23.         html.setCssProperty(demoBtn, HtmlAttributes.CSS.BORDER_COLOR, "red");
  24.         html.setCssProperty(demoBtn, "color", "white");
  26.         html.setCssProperty(demoBtn, HtmlAttributes.CSS.MAX_WIDTH, "400px");
  27.     }
  28. }