Gwt 使用ClientBundle图像作为背景图像

我正在尝试使用

ClientBundle

中的图像作为UIBInder模板中的背景图像。我曾当过导游，但没能使它发挥作用

在我的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>

@url paidIconUrl付费按钮数据资源；
佩迪肯先生{
背景：配对0 0 0无重复；
}

此时，我的IDE已经用红色显示了“paidIconUrl”字符串，这表明有些地方不太正确：

事实上，当我尝试运行它时，我得到：

    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

错误：键入com.ecample.client.PriceButton.PriceButtonStyles不扩展com.google.gwt.resources.client.CssResource元素（：7）。
错误：未捕获的异常已转义。com.google.gwt.event.shared.ummbrellaexception：捕获一个或多个异常，请参阅ummbrellaexception#getCauses中的完整集

---

在中进一步指出，这可能适用于

，而不是

，因此我尝试让它起作用。但似乎您不能在

资源中同时包含CSS样式（例如my

paidIcon（）

方法）和数据资源。我找不到太多关于

的文档，所以我真的只是抓住了这根稻草。这与你的方法有点不同，但在这种情况下对我非常有效。 您的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();
     }
}

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

<!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>
....

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();

}

然后您需要第一个

@Source

中的PriceButtonStyles.css：

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

您的*.ui.xml如下所示：

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

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

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

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

<!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>
....

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();

}

即使您的样式在css文件中，编译器仍会将其最小化并使其模糊。
编辑：别忘了打电话

GWT。创建（PriceButtonStyles.class）.PriceButtonStyles（）.ensureInjected（）
最好的地方是您的入口点方法
除了要设置src属性的图像之外，还必须设置

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

在我的例子中，不需要创建ClientBundle（例如使用
GWT.create（myRes.class）；
）

谢谢你的回答，克里斯·博辛，但我觉得我也必须和你分享我的经历

问候,，
Stefan
Hmm尝试了这一点，但错误是“错误：延迟绑定结果类型'com.example.client.PriceButton.Styles.PriceButtonStyles'不应该是抽象的。”在我的入口点顶部，我调用了GWT。create（PriceButton.Styles.PriceButtonStyles.class）.ensureInjected（）。我将PriceButtonStyles.css与Java代码放在同一个包中。另外，我不得不将上层接口重命名为“Styles”，因为它不喜欢具有相同名称的嵌入式接口。我认为您的错误来自于调用注入样式。您需要将上层接口放在<>和（）之间。您可能应该向
ImageResource
方法添加一个
@ImageOptions（repeatStyle=repeatStyle.Both）
注释，以确保图像在某些浏览器（即IE6/7）中没有被sprited，但仍然不起作用。该样式确实得到应用，因为如果我在.buttonBackground中添加“border:1px solid red；”，标签周围就会有一个漂亮的红色边框。但是图像不起作用。您关于调用ensureInjected（）的评论非常有用！！谢谢