How can I force gwt using my sprites?

Question

As far as I understand, GWT is not creating sprites by default except for some old browsers. Instead it stores images as Strings somewhere in javascript code or somehow else. I have heard that changing the property...

<set-property name='ClientBundle.enableInlining' value='false' /> 

...will force GWT to generate image sprites (i.e. big images combined from small icons) from image resources I provided.

The questions are:

1) can I force GWT to use my own sprite file our designer has created for me instead of generating such a file automatically?

2) what is the best way of dealing with images in GWT from your experience?

Answer 1

Create a ressource for your bundle image :

interface MyResources extends ClientBundle {
  @Source("mySpriteImage.png")
  ImageResource mySpriteImage();

  @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: "mySpriteImage";
}
.image1 {
  width: 16px;
  height: 16px;
  background-position: 0 0;
}
.image2 {
  width: 16px;
  height: 16px;
  background-position: -16px 0;
}
.image3 {
  width: 32px;
  height: 32px;
  background-position: -16px -16px;
}
/* ... */

You create your sprites classes and set your class name.

<ui:UiBinder> <!-- Preamble omitted for this example. -->
  <ui:with field="myResources" type="com.mycompany.MyResources"/>

  <g:Image styleName="{myResources.myCss.myBackground} {myResources.myCss.image1}"/>
</ui:UiBinder>