GWT - Quick steps to craete ClientBundle for image

GWT 2.0 provides new features to replace original ImageBundle.

Here are the steps to using ClientBundler

Step 1, add following line to .gwt.xml file
< inherits name="com.google.gwt.resources.Resources" / >

Step 2. for the case of using Maven, copy/create images under src\main\resources
ex.
put two images logos.gif and quickResButton.gif under
src\main\resources\com\myapp\resources\images

Step 3. create your image bundle interface to extends ClientBundle
ex.
public interface MichaelImageBundle extends ClientBundle {

@Source("com/myapp/resources/images/logos.gif")
public ImageResource mylogo();

@Source("com/myapp/resources/images/quickResButton.gif")
@ImageOptions(flipRtl = true)
public ImageResource mypointer();

public class Util {
private static MichaelImageBundle imgBundle = null;

public static MichaelImageBundle getInstance() {
if (imgBundle == null) {
imgBundle = (MichaelImageBundle) GWT.create(MichaelImageBundle.class);
}
return imgBundle ;
}
}
}

Step 4. create Image in your GWT code
ex.

MichaelImageBundle michaelImageBundle = MichaelImageBundle.Util.getInstance();
Image imgLogo = new Image(michaelImageBundle.mylogo().getURL());
Image imgMypointer = new Image(michaelImageBundle.mypointer().getURL());

That is.
For more information, refer to http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource