Disclosure panel header widget client bundle,#sprite is not working - gwt

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.