GWT UiBinder和图像精灵

我无法让CSS图像精灵出现在GWT UiBinder中。我没有审查how do i use image sprites in GWT?，但发现我已经在做什么建议。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>

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精灵？

来源

2011-06-04 Ray

您必须在您的代码的某个地方拨打CssResource来呼叫ensureInjected();或者：

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

或

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

另外，如果你不同意与其他代码样式/图像，你可以用所UiBinder的从ui:style和ui:image（创建一个隐含的ClientBundle然后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>

来源

2011-06-04 12:28:19

GWT UiBinder和图像精灵

回答

相关问题