Question

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

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

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

在GWT-land中，你可能有一个像这样的UiBinder XML代码段：

<!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支持的文档？并不仅仅是针对所有这些小部件！有人能指出我正确的方向吗？

提前致谢！

Answer 1

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

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

来遍历DOM

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

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

希望有所帮助。

干杯，

Answer 2

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

yourUI.addStyleName("your-class");

GWT中的

：styleName = class

更多UIObject methods

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

Answer 4

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

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

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

.MyClass{background-color:black;}

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

如何在GWT UiBinder中动态地向HTML元素添加类？

4 个答案: