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 :

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.

score 31 · Accepted Answer · answered Dec 28 '10 at 18:47

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

Thanks so much for your answer. It's been many hours of fighting something so simple!!! — Miquel, Mar 08 '13 at 16:21

score 13 · Answer 2 · answered Mar 07 '11 at 21:19

13

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

answered Mar 07 '11 at 21:19

Christian Achilli

4,887
2
23
24

2

I've been looking for the height and width to auto for some time. Thanks! – Sébastien Tromp Sep 07 '11 at 13:38
Great little comment. Helped me understand the process more. Thanks! – slugmandrew May 24 '12 at 10:52

score 4 · Answer 3 · edited Oct 22 '12 at 09:26

4

I would like to add also

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

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

wont work..

edited Oct 22 '12 at 09:26

Alessandro Minoccheri

32,975
19
110
159

answered Oct 22 '12 at 09:09

simonvogensen

1,022
1
8
9

score 1 · Answer 4 · answered Oct 28 '16 at 06:58

1

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

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

answered Oct 28 '16 at 06:58

tanghao

1,397
1
9
16

how do i use image sprites in GWT?

4 Answers4

Linked