使用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图像作为背景图像

回答

相关问题