Salvin Francis Salvin Francis - 1 month ago 9
CSS Question

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

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