Adding css sprites in GWT on top of GXT 3.1

I’m a GWT/GXT beginner, so I typically end up having to look up how to do every little thing online in terms of styling/theming. However, after looking online for how to add css sprites to my application on top of GWT/GXT, I couldn’t find a good guide explaining how to do this. So I investigated and tinkered on my own and thought I would share what I discovered. There are a few necessary components:

Step 1: Define your ClientBundle

//My resource interface 
public interface MyResources extends ClientBundle {
	
    //@Source("mysprites.png")
    @ImageOptions(repeatStyle = RepeatStyle.None)
    ImageResource my_sprites();
    
    @Source("mysprites.css")
    MyCssResource resource();
    
    interface MyCssResource extends CssResource { 
    	String myLogo();
    	
    	String anotherSprite();
    }
	
}

Here’s what my sprite image looks like:

First, it’s necessary to define an interface that extends the GWT ClientBundle. This interface becomes the entry point to injecting the proper CSS sprite into your web application.

In the source above, you can see that I have a .png (this has to be in the same package as the interface), which is your sprite image. The way sprites are loaded are through a css class, which is defined in the CssResource which is also a part of the interface. You use the @Source annotations to define what the names of your files are.

Here’s an example of what the css file should look like: You’ll notice that the gwt-image maps onto the name of the ImageResource method that is your css sprite. The height and width css properties correspond to the chunk of the image to use as your sprite. Background-position corresponds to where to start in the image (pixels from top, pixels from left).

/* mysprites.css */
@sprite .myLogo {
  gwt-image: "my_sprites";
  width: 86px;
  height: 36px;
  background-position: 0 0;
}

@sprite .anotherSprite {
  gwt-image: "my_sprites";
  width: 86px;
  height: 36px;
  background-position: 36 0;
}

Next, you define the interface of your CssResource, whose methods (String methodName();) get mapped to css classes defined in your css file.

Step 2: Get an instance of your ClientBundle using GWT.create

//My widget class
private static MyResources myresource = GWT.create(MyResources.class);

This is the instance that you will use to add sprites to your widget. I was doing this for a while, but noticed that after trying to call the methods made available through my CssResource interface, the css class was not being injected into my application. However, I did find that my sprite image was correctly injected. After some more online research, I found that you need to call this in order to ensure that the css class is actually injected. Add this line after you instantiate the class in order to actually put your css classes in your application

//My widget class
myresource.resource().ensureInjected();

Here, myresource is the GWT object created for the entire resources class. resources() is the CSSResource which has the method ensureInjected(); Finally, you need to actually add a widget that contains the correctly styling in order to render the sprite correctly. Since CSS sprites are just classes, I used a blank GWT HTML widget, which just gets rendered as a blank div in your application.

Step 3: Add the sprite to your application

//My widget class
HTML logo = new HTML();		
logo.addStyleName(myresource.resource().myLogo());
mybanner.add(logo, new HorizontalLayoutData(-1, -1, new Margins(0, 5, 5, 5)));

Finally, in your application if you inspect the element, you can see that the CSS class got rendered into the application and attached to the HTML widget

/* Inspected Javascript */
.GKTGO20BA3B-MyResources-MyCssResource-myLogo {
height: 492px;
width: 68px;
overflow: hidden;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAHsCAYAAABrKwuFAAAPFUlE…Als9kMoqN9zlNMpAqDBOKWCBBGJ4BCICgySCoQhAEzbD+D1IzkMByojJyAAAAAElFTkSuQmCC") -0px -0px no-repeat;
width: 68px;
height: 36px;
background-position: 0 0;
}