How to dynamically add classes to HTML elements in GWT UiBinder?

Question

JavaScript libraries like jQuery have the ability to dynamically add/remove classes to DOM elements like so:

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

This is important because it allows you to dynamically apply different styling rules to those elements.

In GWT-land, you might have a UiBinder XML snippet like this:

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

1. For the non-Widget elements, such as the <span>, how can I dynamically add/remove classes in the Java code?
2. Speaking of <gwt:RadioButton>, I can't seem to find GWT's reference XSD for UiBinder XML, or some kind of official reference to the legal definitions for all the elements and attributes of com.google.gwt.* XML. For instance, where can I find documentation for what child elements and attributes gwt:RadioButton supports? And not just for that one widget, for all of them! Can someone point me in the right direction?

Thanks in advance!

Answer 1

You can find the UiBinder.xsd in gwt-user-<version>.jar (At least from 2.4.0 onwards, but I suspect older versions as well).

As for your other question: You can always traverse the DOM using

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

and find the Element with the matching id, but that isn't very elegant. I actually have never encountered this situation; it is an interesting question!

Hope that helps.

Cheers,