Disclosure panel header widget client bundle,@sprite is not working

Question

I am having DisclosurePanel, as header content i have HorizontalPanel which is applied style, these styles is having background image, which uses ClientBundle with @sprite. But issue is the style is not applying for the header widget (Horizontal Panel)

here my code goes

Entry class

public class Test implements EntryPoint {

    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        TestClientBundle.INSTANCE.testCsss().ensureInjected();
        DisclosurePanel dp = new DisclosurePanel();
        HorizontalPanel hp = new HorizontalPanel();
        dp.setStyleName("blue");
        Label l = new Label("testing the DP with IMG-CSS bundle");
        hp.add(l);
        dp.setHeader(hp);
        dp.setContent(new Label("Body"));
        RootPanel.get().add(dp);
    }
}

ClientBundle interface

public interface TestClientBundle extends ClientBundle {

    TestClientBundle INSTANCE = GWT.create(TestClientBundle.class);

    @Source("blue.jpg")
    public ImageResource blue();

    @Source("test.css")
    public CssResource testCsss();
}

Css File

@external .blue;
@sprite .blue {
    gwt-image: 'blue';
    cursor: pointer;
    text-decoration: none;
}

Is it known issue in GWT or my code is wrong?

Answer 1

Instead of

    dp.setStyleName("gates_playbookimage_blue");

you need to have a way to refer to that css class name - you need a CssResource interface:

public interface MyCssResource extends CssResource {
    String gates_playbookimage_blue();
}

Reference this from your clientbundle instead of CssResource:

public interface TestClientBundle extends ClientBundle {
    TestClientBundle INSTANCE = GWT.create(TestClientBundle.class);

    @Source("playbook_blue.jpg")
    public ImageResource playbookBlue();

    @Source("test.css")
    public MyCssResource testCsss();
}

Now you can do this:

    MyCssResource css = TestClientBundle.INSTANCE.testCsss();
    css.ensureInjected();
    //...
    dp.setStyleName(css.gates_playbookimage_blue());

This will let the css compiler rewrite your css as needed, and be sure to pass in the rewritten class name to your widget.