I'm trying to use an image from a ClientBundle
as a background-image in a UIBInder template. I used this discussion as a guide, but was unable to get it to work.
In my Java class I have:
public static interface PriceButtonStyles extends ClientBundle
{
String paidIcon();
@ClientBundle.Source("paid_button_53x31.png")
DataResource paid_buttonAsDataResource();
}
@UiField
PriceButtonStyles priceButtonStyle;
And then in the corresponding template file I reference it like:
<ui:style field="priceButtonStyle" type="com.example.client.PriceButton.PriceButtonStyles">
@url paidIconUrl paid_buttonAsDataResource;
.paidIcon {
background: paidIconUrl 0 0 no-repeat;
}
</ui:style>
Already at this point my IDE is showing the "paidIconUrl" string in red, indicating that something's not quite right:
And indeed, when I try to run it I get:
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
Further on in the Google Groups discussion it is suggested that this might work with <ui:data>
rather than <ui:style>
, so I tried to make that work. But it seems like you can't include both CSS styles (e.g. my paidIcon()
method) and DataResources in <ui:data>
resources. I wasn't able to find much documentation on <ui:data>
, so I'm really just grasping at straws with this.
In addition to Images, where you want to set the src property, you have to set
<g:Image url="{res.minimize.getSafeUri.asString}" ....>
res is instantiated like this:
<!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>
....
and the client bundle looks 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();
}
Creating the ClientBundle (with e.g. GWT.<TitleBarBundle>create(myRes.class);
) wasn't necessary in my case.
Thanks for your answer Chris Boesing, but I felt like I had to share my experiences with you too.
Regards, Stefan