GWT UiBinder和Image Sprites

Question

我无法让CSS图像精灵出现在GWT UiBinder中.我确实回顾了如何在GWT中使用图像精灵？,但发现我已经做了建议.

我有一个ui.xml,ClientBundle接口与CssBundle嵌套接口,和一个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"}

所以,我编译我的应用程序(没有抱怨),并在浏览器中,我的图像丢失.当我在Chrome的开发人员工具中查看该页面时,我看到相应的div引用了混淆的css类,但我无法在任何地方找到该类.

另一方面,我能够使用显示图像<g:Image resource="{resources.underTopGlow}" />.

有没有一个步骤,我想通过像这样的CSS精灵来显示图像？

Answer 1

你必须在代码中ensureInjected()的CssResource某个地方打电话; 之一:

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

要么

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

另外,如果你不同意与其他代码样式/图像,你可以用UiBinder的从创建隐含的一个取代你ClientBundle ui:style和ui:image(和UiBinder的会再照顾呼吁的ensureInjected你):

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