使用ClientBundle圖像作爲背景圖像

我試圖使用一個圖像從ClientBundle作爲UIBInder模板中的背景圖像。我使用this discussion作爲指南，但無法使其工作。使用ClientBundle圖像作爲背景圖像

在我的Java類，我有：

public static interface PriceButtonStyles extends ClientBundle 
{ 
    String paidIcon(); 

    @ClientBundle.Source("paid_button_53x31.png") 
    DataResource paid_buttonAsDataResource(); 
} 

@UiField 
PriceButtonStyles priceButtonStyle;

然後在相應的模板文件我引用它想：

<ui:style field="priceButtonStyle" type="com.example.client.PriceButton.PriceButtonStyles"> 

    @url paidIconUrl paid_buttonAsDataResource; 

    .paidIcon { 
     background: paidIconUrl 0 0 no-repeat; 

    } 
</ui:style>

在這一點上

已經是我的IDE顯示「paidIconUrl」串紅色，表示某事不太正確：

ide shows red

事實上，當我嘗試運行它，我得到：

ERROR: Type com.ecample.client.PriceButton.PriceButtonStyles does not extend com.google.gwt.resources.client.CssResource Element <ui:style field='priceButtonStyle' type='com.example.client.PriceButton.PriceButtonStyles'> (:7). 
ERROR: Uncaught exception escaped. com.google.gwt.event.shared.UmbrellaException: One or more exceptions caught, see full set in UmbrellaException#getCauses

而且對在Google Groups discussion，建議這可能與<ui:data>而非<ui:style>工作，所以我試圖讓這項工作。但是，您似乎無法同時包含兩種CSS樣式（例如，我的paidIcon()方法）和DataResources在<ui:data>資源中。我無法找到關於<ui:data>的很多文檔，所以我真的只是用這種方法來理解。

來源

2011-03-18 George Armhold

這是我該怎麼做。這與你的方法有點不同，但在這種情況下對我很有幫助。你ClientBundle應該是這樣的：

public static interface PriceButtonStyles extends ClientBundle 
{ 
    @Source("PriceButtonStyles.css") 
    Styles priceButtonStyles(); 

    @Source("paid_button_53x31.png") 
    ImageResource paidButtonPNG(); 

    interface Styles extends CssResource { 
     String buttonBackground(); 
    } 
}

那麼你就需要從第一@Source的PriceButtonStyles.css：

.buttonBackground { 
    gwt-image:'paidButtonPNG'; 
    background-repeat:no-repeat; 
}

你* .ui.xml應該是這樣的：

<ui:with field="res" type="com.ecample.client.PriceButton.PriceButtonStyles"></ui:with> 
<g:Label styleName="{res.priceButtonStyles.buttonBackground}"><g:Label>

即使你的樣式在一個css文件中，它仍然會被編譯器最小化和混淆。
編輯：不要忘記調用
GWT.<PriceButtonStyles> create(PriceButtonStyles.class).priceButtonStyles().ensureInjected(); 最適合這個地方是你的入口點方法

來源

2011-03-18 16:26:42

嗯試過了，但它有錯誤「ERROR：延遲綁定的結果類型‘com.example.client.PriceButton.Styles.PriceButtonStyles’不應該是抽象的。」在我的EntryPoint的頂部，我調用了GWT。 create（PriceButton.Styles.PriceButtonStyles.class）.ensureInjected（）。我在與Java代碼相同的包中有PriceButtonStyles.css。另外，我必須將上層界面重命名爲「樣式」，因爲它不喜歡具有相同名稱的嵌入式界面。 – 2011-03-18 17:15:43

對不起，給兩個接口同名。我認爲你的錯誤來自注入風格的呼叫。您需要將< >和（） – 2011-03-18 17:27:41

之間的上一級界面添加到您的'ImageResource'方法中，以便確保圖像不被* sprited * in一些瀏覽器（即IE6/7） – 2011-03-21 23:28:51

除了圖片，要設置src屬性，你必須設置

<g:Image url="{res.minimize.getSafeUri.asString}" ....>

RES被實例化這樣的：

<!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="res" 
     type="xxx.myRes"></ui:with> 
....

和客戶端包升ooks like this：

package xxx; 

import com.google.gwt.resources.client.ClientBundle; 
import com.google.gwt.resources.client.ImageResource; 

public interface myRes extends ClientBundle { 

    @Source("minimize.png") 
    ImageResource minimize(); 

}

創建ClientBundle（例如， GWT.<TitleBarBundle>create(myRes.class);）在我的情況下是沒有必要的。

感謝您的回答Chris Boesing，但我覺得我必須與您分享我的經驗。

問候，斯特凡

來源

2012-03-29 09:14:30 Stefan

使用ClientBundle圖像作爲背景圖像

回答

相關問題