how do i use image sprites in GWT?

I was trying to use a tiled image in an image resource, and i was refering to the GWT tutorial for it...

one sectio开发者_JAVA技巧n 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.

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());

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 ;)

I would like to add also

Remember to call ensureInjected() on MyCssResource.java or else

<g:FlowPanel styleName="{myResources.myCss.myBackground}"/>

wont work..

If you are using gss, @sprite is not working in this case. You should use gwt-sprite like:

.myBackground {
  gwt-sprite: "myImage";
}