GWT UiBinder和图像精灵

我很难让CSS图像精灵出现在GWT UiBinder中。我做了回顾，但发现我已经在做建议的事情了

我有一个

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> 

sprites.css：

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

因此，我编译了我的应用程序（它不会抱怨），在浏览器中，我的图像丢失了。当我在Chrome的开发者工具中查看页面时，我看到相应的div引用了模糊的css类，但我无法在任何地方找到定义的类

另一方面，我能够使用

显示图像

---

要通过css精灵显示图像，我缺少这样一个步骤吗？

你必须在你的

CssResource

代码中的某个地方调用

ensureInjected（）

；要么：

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

或

或者，如果您不与其他代码共享样式/图像，您可以将您的ClientBundle替换为UiBinder从

ui:style

和

ui:image

创建的隐式ClientBundle（然后UiBinder将负责为您调用

ensureInjected

）：

@雪碧.underMenuGlow{gwt图像：“underTopGlow”}
…
福

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

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

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