我正在尝试使用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>
,因此我尝试了这项工作。但似乎您不能在paidIcon()
资源中包含CSS样式(例如我的<ui:data>
方法)和DataResources。我无法在<ui:data>
上找到太多文档,所以我真的只是抓住稻草。
答案 0 :(得分:7)
除了要设置src属性的Images之外,还必须设置
<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,但我觉得我也必须与您分享我的经历。
此致 斯蒂芬
答案 1 :(得分:4)
我是这样做的。它与您的方法略有不同,但在这种情况下对我来说非常有用。 您的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方法