如何在 GWT UiBinder 中为 HTML 元素动态添加类？答案

【问题标题】：How to dynamically add classes to HTML elements in GWT UiBinder?如何在 GWT UiBinder 中为 HTML 元素动态添加类？
【发布时间】：2012-11-08 11:44:33
【问题描述】：

像 jQuery 这样的 JavaScript 库能够动态地向 DOM 元素添加/删除类，如下所示：

$("#some-element").addClass("make-me-pretty");

这很重要，因为它允许您对这些元素动态应用不同的样式规则。

在 GWT-land 中，您可能有一个像这样的 UiBinder XML sn-p：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:gwt="urn:import:com.google.gwt.user.client.ui">
    <div>
        <span id="">Some content</span>

        <gwt:RadioButton ...>
            ...
        </gwt:RadioButton>

        <!-- etc. -->
    </div>
</ui:UiBinder>

对于非Widget元素，如<span>，如何在Java代码中动态添加/删除类？
说到<gwt:RadioButton>，我似乎找不到GWT 对UiBinder XML 的引用XSD，或某种官方对com.google.gwt.* XML 的所有元素和属性的法律定义的引用。例如，我在哪里可以找到gwt:RadioButton 支持的子元素和属性的文档？不仅针对那个小部件，还针对所有这些小部件！有人能指出我正确的方向吗？

提前致谢！

【问题讨论】：

标签： java css gwt uibinder

【解决方案1】：

您可以在 gwt-user-<version>.jar 中找到 UiBinder.xsd（至少从 2.4.0 开始，但我也怀疑旧版本）。

至于你的另一个问题：你总是可以使用遍历 DOM

yourUi.getElement().getElementsByTagName( "span" )

并找到与id 匹配的Element，但这不是很优雅。我实际上从未遇到过这种情况；这是一个有趣的问题！

希望对您有所帮助。

干杯，

【讨论】：

谢谢@Anders Rostgaard Bystru (+1) - 我马上看看这里。关于为非小部件动态添加/删除类的任何想法？再次感谢！

【解决方案2】：

对于任何 UIobject（包括 RadioButton），您可以：

yourUI.addStyleName("your-class");

在 GWT 中：styleName = 类

更多UIObject methods

【讨论】：

虽然正确，但我相信 orionTurtle 询问了如何以编程方式更改活页夹中非@UiField 元素的样式。

【解决方案3】：

我认为你可以做这样的事情。将您作为 UI 字段映射到 GWT 'SpanElement'。

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <div>
    Hello, <span ui:field='nameSpan'/>.
  </div>
</ui:UiBinder>

在绑定到上述 ui.xml 文件的类中，您可以按如下方式更改类

      interface MyUiBinder extends UiBinder<DivElement, HelloWorld> {}
      private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

      @UiField SpanElement nameSpan;

      public HelloWorld() {
        setElement(uiBinder.createAndBindUi(this));
      }

      public void changeClass(){
           nameSpan.setClassName("newClass");
      }

【讨论】：

【解决方案4】：

我猜你有一个 html 页面，你可以在其中加载你的小部件。您可以在 **.ui.xml 文件中分配一个类，就像在 html 页面中一样。

<div class="MyClass" align="middle">
    <gwt:VerticalPanel>
              .......
    </gwt:VerticalPanel>
</div>

然后在 main.css 文件中写入 css 规则。

.MyClass{background-color:black;}

加载视图时，main.css 文件将“看到”类的名称并对其进行操作。

【讨论】：