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?

Does this help ? http://stackoverflow.com/questions/4535094/how-do-i-use-image-sprites-in-gwt — Olivier Tonglet, Sep 05 '13 at 10:34
otonglet, actually I am doing exactly the same thing, but sprites are not used there. I wonder if I can use my own sprite file somehow. — KutaBeach, Sep 12 '13 at 15:39
Our designer tried to do so but couldn't find a way to have GWT use his own sprite file without breaking the CSS. The best way would be to have the designer work with GWT widgets instead of working with HTML and plain CSS. cfr http://stackoverflow.com/a/18759480/1722236 — Olivier Tonglet, Sep 12 '13 at 17:27

score 0 · Answer 1 · answered Oct 16 '13 at 13:15

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>

How can I force gwt using my sprites?

1 Answers1