使用 ClientBundle 图像作为背景图像

Question

我正在尝试使用来自ClientBundle 的图像作为 UIBInder 模板中的背景图像。我使用this discussion 作为指导，但无法让它工作。

在我的 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”字符串显示为红色，表明有些地方不太正确：

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

    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> 一起工作，所以我试图让它工作。但似乎您不能在 <ui:data> 资源中同时包含 CSS 样式（例如我的 paidIcon() 方法）和 DataResources。我无法在 <ui:data> 上找到太多文档，所以我真的只是抓住了这根稻草。

Answer 1

除了Images，要设置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>
....

客户端包如下所示：

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，但我觉得我也必须与您分享我的经验。

问候， 斯蒂芬

Answer 2

这是我的做法。这与您的方法略有不同，但在这种情况下对我来说效果很好。 您的 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(); 最好的地方是你的 EntryPoint 方法