how do i use image sprites in GWT?

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 :

1. MyCssResource
2. 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 ;)