how do i use image sprites in GWT? - css

Question

I was trying to use a tiled image in an image resource, and i was refering to the GWT tutorial for it...
one section says you need to use sprites:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource
repeatStyle is an enumerated value
that is used in combination with
the#sprite directive to indicate that
the image is intended to be tiled
so, now i need to add a sprite directive .. Where ?
researching about sprites, i came here:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites
The example dictates the creation of two files :
MyCssResource
MyResources
where would I write this :
#sprite .mySpriteClass {gwt-image:
"imageAccessor"; other: property;}
?
some more quotes for reference:
#sprite is sensitive to the FooBundle
in which the CSSResource is declared;
a sibling ImageResource method named
in the #sprite declaration will be
used to compose the background sprite.

Answer 1

From what you've written I'm going to presume that MyResources is an interface that extends ClientBundle and MyCssResources is an interface that extends CssResource:
interface MyResources extends ClientBundle {
#Source("myImage.png")
#ImageOptions(repeatStyle = RepeatStyle.BOTH)
ImageResource myImage();
#Source("myCss.css")
MyCssResource myCss();
}
interface MyCssResource extends CssResource {
String myBackground();
}
So now there are two ways to use the ImageResource obtained from MyResources. The first is to attach it to a CSS rule using the #sprite directive. myCss.css:
#sprite .myBackground {
gwt-image: "myImage";
/* Additional CSS rules may be added. */
}
Then, anything with the myBackground class will have myImage as its background. So, using UiBinder, for example:
<ui:UiBinder> <!-- Preamble omitted for this example. -->
<ui:with field="myResources" type="com.mycompany.MyResources"/>
<g:FlowPanel styleName="{myResources.myCss.myBackground}"/>
</ui:UiBinder>
One can also instantiate Image objects directly using the defined ImageResource. UiBinder:
<ui:UiBinder> <!-- Preamble omitted for this example. -->
<ui:with field="myResources" type="com.mycompany.MyResources"/>
<g:Image resource="{myResources.myImage}"/>
</ui:UiBinder>
Without UiBinder:
MyResources myResources = GWT.create(MyResources.class);
Image myImage = new Image(myResources.myImage());

Answer 2

Just let me add this:
#sprite .myBackground {
gwt-image: "myImage";
/* Additional CSS rules may be added. */
}
becomes
.myBackground {
backgroud-image: url(-url of the image-)
width: *width of the image*
height: *height of the image*
}
Remember to override them in case u need it: for example setting height and width to auto:
#sprite .myBackground {
gwt-image: "myImage";
height: auto;
width: auto;
}
HTH, I struggled a lot to find that out ;)

Answer 3

I would like to add also
Remember to call ensureInjected() on MyCssResource.java or else
<g:FlowPanel styleName="{myResources.myCss.myBackground}"/>
wont work..

Answer 4

If you are using gss, #sprite is not working in this case. You should use gwt-sprite like:
.myBackground {
gwt-sprite: "myImage";
}