GWT UiBinder and Image Sprites

gwt sprite uibinder clientbundle
Ray picture Ray · Jun 4, 2011 · Viewed 7.2k times · Source

I'm having trouble getting CSS image sprites to appear in GWT UiBinder. I did review how do i use image sprites in GWT?, but found I was already doing what was suggested.

I have a ui.xml, ClientBundle interface with a CssBundle nested interface, and a css file.

ui.xml:

<!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:with field="resources"
    type="edu.wts.upholdingthetruth.poweroftheword.client.resources.POWResources" />

    <g:FlowPanel width="100%" styleName="{resources.sprites.underMenuGlow}" />
</ui:UiBinder>

ClientBundle:

public interface POWResources extends ClientBundle {
    public static final POWResources INSTANCE = GWT.create(POWResources.class);

    @Source("site1/undertopglow.png")
    ImageResource underTopGlow();

    @Source("sprites.css")
    public Sprites sprites();

    public interface Sprites extends CssResource {

            String underMenuGlow();
    }

    // other stuff
}

sprites.css:

@sprite .underMenuGlow {gwt-image: "underTopGlow"}

So, I compile my app (which does not complain), and in the browser, my image is missing. When I review the page in Chrome's Developer Tools, I see the corresponding div references the obfuscated css class, but I was not able to find that class defined anywhere.

I was, on the other hand, able to display the image using <g:Image resource="{resources.underTopGlow}" />.

Is there a step I am missing to get images to display via css sprites like this?

Answer

Thomas Broyer picture Thomas Broyer · Jun 4, 2011

You have to call ensureInjected() on your CssResource somewhere in your code; either:

POWResources.INSTANCE.sprites().ensureInjected();

or

@UiField POWResources resources;
…
resources.sprites().ensureInjected();

Alternatively, if you don't share the styles/images with other code, you can replace your ClientBundle with the implicit one that UiBinder creates from ui:style and ui:image (and UiBinder will then take care of calling ensureInjected for you):

<ui:style>
  @sprite .underMenuGlow {gwt-image: "underTopGlow"}
</ui:style>
<ui:image field="underTopGlow" src="site1/undertopglow.png" />
…
<span class="{style.underMenuGlow}">foo</span>

Related questions

How do I pass a class as a parameter in Java?

Is there any way to pass class as a parameter in Java and fire some methods from that class? void main() { callClass(that.class) } void callClass(???? classObject) { classObject.somefunction // or new classObject() //something like that ? } I am using Google Web …

Read More
java.lang.NoClassDefFoundError: org/apache/http/client/HttpClient

I am trying to make a get request from the GWT servlet to get JSON response from a web service. Following is the code in my servlet : public String getQueData() throws IllegalArgumentException { String message = null; try { HttpClient httpclient = new DefaultHttpClient(); …

Read More
ClassNotFoundException: org.slf4j.LoggerFactory

I am trying to run GWT RequestFactory and facing this error: ClassNotFoundException: org.slf4j.LoggerFactory I have tried to download slf4j-api-1.3.1.jar but it didnt resolve the issue Any idea exactly which jar I need to download ?

Read More