GWT UiBinder 和图像精灵答案

【问题标题】：GWT UiBinder and Image SpritesGWT UiBinder 和图像精灵
【发布时间】：2011-06-04 12:10:48
【问题描述】：

我无法让 CSS 图像精灵出现在 GWT UiBinder 中。我确实查看了how do i use image sprites in 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>

客户端包：

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 sprite 显示图像的步骤？

【问题讨论】：

标签： gwt sprite uibinder clientbundle

【解决方案1】：

您必须在代码中的某处调用CssResource 上的ensureInjected()；要么：

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

或

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

或者，如果您不与其他代码共享样式/图像，您可以将您的 ClientBundle 替换为 UiBinder 从 ui:style 和 ui:image 创建的隐式客户端捆绑包（然后 UiBinder 将负责调用 @987654327 @给你）：

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

【讨论】：