GWT shared CSS styles doesn't work

Question

I need to use the same style in a few UI Binder templates so I did everything as described in: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Using_an_external_resource .

So I did the following:

1. Created Resources interface:

public interface Resources extends ClientBundle {
    @Source("shared.css")
    Style style();

    public interface Style extends CssResource {
        String grayedOut();
    }
}

2. Created shared.css file in the same directory as Resources class:

.grayedOut{
    background-color: red;
}

3. Added with element to UI Binder template: <ui:with type="correct.package.Resources" field="res"/>

4. Added reference to style in UI Binder template: addStyleNames="{res.style.grayedOut}"

However it doesn't work. The view is rendered just as grayedOut style wasn't applied at all.

But I observed two things:

1. In Firebug/Chrome Dev Tools I can see that element has assigned an ofuscated style name corresponding to the style I'm trying to add: class="GAWERH0MI gwt-TabLayoutPanelContent" ( GAWERH0MI seem to correspond to my grayedOut class) but I can't locate it in "element styles" panel which probably means that this class is empty (no body). (I did experiment and assigned empty class to element with the same effect in that tools).
2. When I change style name in .css, then I'm getting runtime error that style grayedOut couldn't be found, which seem to mean that my style class is normally successfully found but from some reason doesn't work as expected.

Answer 1

You probably forgot to call ensureInjected() on a Resources.Style instance.

This is done automatically for a <ui:style> (because you don't code the ClientBundle and CssResource interfaces, they are generated for you by UiBinder), but not for any other CssResource .

You can use @UiField Resources res though, that will be injected with the value of the <ui:with field="res"> , and thus call res.style().ensureInjected() just after the call to createAndBindUi .
IMO, you'd however better inject a Resources instance into your view and use @UiField(provided=true) , and thus either make sure ensureInjected() is called before the instance is injected into your view, or choose to call ensureInjected() in each of your views. As in https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Share_resource_instances

Answer 2

ui widget java file:

@UiField
Resources res;
public YourWidget() {
        initWidget(uiBinder.createAndBindUi(this));     
        res.style().ensureInjected();
    }

ui widget xml file:

<ui:with field='res' type="your path to Resource class" />

and

<g:Label addStyleNames="{res.style.grayedOut}" ui:field="icon"></g:Label>