GWT UiBinder y Sprites de imagen

clientbundle

Question

Tengo problemas para que los sprites de imágenes CSS aparezcan en GWT UiBinder. Revisé cómo utilizo sprites de imagen en GWT? , pero descubrí que ya estaba haciendo lo que se sugirió.

Tengo una interfaz ui.xml , ClientBundle con una interfaz anidada de CssBundle y un archivo css.

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"}

Entonces, compilo mi aplicación (que no se queja), y en el navegador, falta mi imagen. Cuando reviso la página en las herramientas para desarrolladores de Chrome, veo las referencias div correspondientes a la clase css ofuscada, pero no pude encontrar esa clase definida en ningún lugar.

Yo, por otro lado, pude mostrar la imagen usando <g:Image resource="{resources.underTopGlow}" /> .

¿Hay algún paso que me falta para que las imágenes se muestren a través de sprites css como este?

Answer 1

ensureInjected() llamar a ensureInjected() en su CssResource en algún lugar de su código; ya sea:

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

o

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

Alternativamente, si no comparte los estilos / imágenes con otro código, puede reemplazar su ClientBundle con el implícito creado por UiBinder desde ui:style y ui:image (y UiBinder se encargará de llamar a ensureInjected por usted):

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