In GWT, how can I override DisclosurePanel's CSS using <ui:style> or ClientBundle

Question

I have a class that extends Composite and contains a DisclosurePanel at the top-level of the associated UiBinder file.

In DisclosurePanel, the HTML looks like this:

<table class="gwt-DisclosurePanel gwt-DisclosurePanel-closed>
  <tr>
    <td>
      <a href="javascript:void(0);" style="display: block;" class="header">
        <div class=""> <!-- an HTMLPanel I've shoved in to a <gwt:customHeader> block -->
           ...
        </div>
      </a>
...

In my UiBinder file I can use addStyleNames="{style.???}" and style some things, like I can style the DisclosurePanel itself and I can style my HTMLPanel inside the , but I can't style the

<a>

except by doing this:

disclosurePanel.getHeader().getParent().getElement().getStyle().setTextDecoration(TextDecoration.NONE);
disclosurePanel.getHeader().getParent().getElement().getStyle().setColor("black");

in the code, but that's ugly and the style is now in two places, the code and the UiBinder file.

The reason I'm doing that is to get rid of the underlining and blue color that the has by default. Another alternative is to do something like this:

.gwt-DisclosurePanel a {
    text-decoration: none;
    text: black;
}

but then I would need to reference that CSS file from my home page (Client.html) or reference from the gwt.xml file, but both of those ways of doing things are deprecated.

How do I do this in a better way, or is it not possible?

Answer 1

Hmmm...will ensureInjected() do what I want? Can I just define a CssResource and a ClientBundle that references that CssResource and then call ensureInjected on the CssResource and it will inject all the CSS, even if I haven't referenced all the methods on my CssResource sub-interface?

Yes and no - you'd have to disable CSS obfuscation (<set-configuration-property name="CssResource.style" value="pretty" /> - warning, that's global, so probably not what you want) in order for it to work. But if you reference those class names only from your UiBinder templates as such you should be fine:

<!-- Insert usual UiBinder stuff here -->
<ui:with field='res' type='com.example.client.resource.SomeCoolBundle'/>
<!-- SomeCoolBundle has a CssResource defined and available via style() -->

<div class='{res.style.lbox}'></div>

Just remember to mark the GWT classes as @external in your CSS file or else you won't be able to override them (since they'll get obfuscated):

@external .gwt-TextBox, .gwt-PasswordTextBox, .gwt-Button, .gwt-CheckBox;

If this doesn't suit your needs (or is to cumbersome), by all means do use one of those "deprecated" (not really) methods.