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.

Rebut

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

Larger

Thanks so much for your answer. It's been many hours of fighting something so simple!!! – Runthrough

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

Howe

I've been looking for the height and width to auto for some time. Thanks! – Marius

Great little comment. Helped me understand the process more. Thanks! – Distraction

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..

Melo

Answer 4

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

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

Cultured