How to declare dependent style names with UiBinder

Question

I have a simple UiBinder widget containing a TextArea:

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

    <g:TextArea visibleLines="3" />
</ui:UiBinder>

I want to control the background color of this textarea for writeable and read only states. GWT uses the "-readonly" style name decorator to achieve this. So I try this:

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

    <ui:style>
        .textBoxStyle {
            background-color:yellow;
        }
        .textBoxStyle-readonly {
            background-color:lightgray;
        }
    </ui:style>

    <g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />
</ui:UiBinder>

Obviously this won't work because style names are obfuscated for CssResources resulting in something like this:

.G1x26wpeN {
    background-color:yellow
 }
.G1x26wpeO {
    background-color: lightgray;
}

The result HTML for writeable textarea looks like this:

<textarea tabindex="0" class="G1x26wpeN" rows="3"/>

The read only textarea looks like this:

<textarea tabindex="0" class="G1x26wpeN G1x26wpeN-readonly" readonly="" rows="3"/>

How do I declare the style so GWT will obfuscate the primary part but not the "-readonly" decdorator?

I know that I can disable the obfuscation for the entire style name. But I'd like to keep the obfuscation while making use of the decorators.

Solution 1

At this moment (GWT 2.4) it is not supported, and it's not clear if/when it will be supported, see issue 4746 in the GWT issue tracker.

The workaround is to add @external, which disables obfuscation for those styles. In this case that would be:

@external textBoxStyle, textBoxStyle-readonly;

Solution 2

If you want to use this style for all your read-only TextAreas then I'd suggest just modifying the .gwt-TextArea-readonly style in your GWT theme CSS file.
Otherwise, I can only think of adding your custom style programmatically when you set the TextArea read-only.

PS: from the docs:

<set-configuration-property name="CssResource.obfuscationPrefix" value="empty" />` can be used for minimal-length selector names, but this is only recommended when the GWT module has total control over the page. 

I recommend using this (with "empty" or "X" or other unused prefix) for much shorter class names - because at default settings you don't gain that much through obfuscation (textBoxStyle - 12chars, G1x26wpeN - 9chars, X0 - 2 chars ;)).

Solution 3

Why don't you try sth like this

public class MyFoo extends Widget {
  interface MyStyle extends CssResource {
    String normal();
    String readonly();
  }

  @UiField MyStyle style;

  /* ... */

  void setEnabled(boolean enabled) {
    getElement().addStyle(enabled ? style.normal() : style.readonly());
    getElement().removeStyle(enabled ? style.readonly() : style.normal());
  }
}

this would allow you change style if a text box is "normal" or readonly...

And off course, in the UiBinder you should have sth like

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

  <ui:style type='com.my.app.MyFoo.MyStyle'>
    .redBox { background-color:pink; border: 1px solid red; }
    .normal { color:black; }
    .readonly { color:gray; }
  </ui:style>

  <div class='{style.redBox} {style.normal}'>I'm a red box widget.</div>

</ui:UiBinder>

Solution 4

Try Now This One I Hope You will get it.
With the <ui:style> element, you can define the CSS for your UI right where you need it
Note: <ui:style> elements must be direct children of the root element

    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui">
        <g:TextArea visibleLines="3" />
    </ui:UiBinder>

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

    <ui:style field='MyStyle'>
        .textBoxStyle {
            background-color:yellow;
        }
        .textBoxStyle-readonly {
            background-color:lightgray;
        }
    </ui:style>

    <g:TextArea name="myText" styleName="{MyStyle.textBoxStyle}" visibleLines="3" />
</ui:UiBinder>

Solution 5

Isn't there a typo in your UIBinder?

You have:

    <g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />

.. but I think you need to be using "stylePrimaryName", ie.

    <g:TextArea stylePrimaryName="{style.textBoxStyle}" visibleLines="3" />

But I guess this question has been answered really already..

View more solutions