GWT UiBinder和图像精灵
GWT UiBinder和图像精灵
提问于 2011-06-04 20:10:49
我很难让CSS图像精灵出现在GWT UiBinder中。我确实检查了how do i use image sprites in GWT?，但发现我已经在按照建议执行了。
我有一个带有CssBundle嵌套接口的ui.xml、ClientBundle接口和一个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精灵像这样？
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-06-04 20:28:19
您必须在代码中的某个位置调用CssResource上的ensureInjected()；或者：
POWResources.INSTANCE.sprites().ensureInjected();或
@UiField POWResources resources;
…
resources.sprites().ensureInjected();或者，如果您不与其他代码共享样式/图像，您可以将您的ClientBundle替换为UiBinder从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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6236673
复制相关文章
相似问题
腾讯云开发者
