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和圖像精靈

回答

相關問題