UIBinder, CSS and Images (GWT)

I am working with GWT (Google Web Toolkit) since a while now. One of the things I am regularly doing (since version 2.0) is creating UIs through Declarative Layouts with UiBinder. While creating the ui.xml files it is normal to have the need of displaying images or icons.

1) Integrating background images with the ui:style section: for a long time have been using simple colors to create my look and feel but lately I started to feel the need to give the UI a better look using images as background. One way of getting this done with GWT is to include in the ui.xml file something like this - where the image is in the same folder of the ui.xml file:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:style>
    @url fileUrl bckImage;
    .titleBar { background: fileUrl repeat 0 0; }
  </ui:style>

  <ui:data field='bckImage' src='image.gif'/>

  <g:HorizontalPanel styleName='{style.titleBar}'>
  ...
  </g:HorizontalPanel>

</ui:UiBinder>

An alternative way:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:image field='gradient' src='image.gif' />

  <ui:style>
    @sprite .header {
      gwt-image: 'gradient';
      width: 100%;
      height: 18px;
    }
  </ui:style>

  <g:VerticalPanel>
    <g:HorizontalPanel ui:field='header' styleName='{style.header}'/>
  </g:VerticalPanel>

</ui:UiBinder>

2) Getting the images from the ClientBundle: in GWT it is possible to declare resources with something like the following:

package com.commonsemantics.example;

public class Example implements EntryPoint {

  public interface Resources extends ClientBundle
  {
     public static final Resources INSTANCE =  GWT.create(Resources.class);

     @Source("images/myIcon.jpg")
     ImageResource myIcon();
  }

  ...
}

Once the ImageResource is declared it is possible to use it in the ui.xml file:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:style>
    // This does not have any effect as the images are translated by GWT 
    // into background. In this configuration, in order to have the image 
    // of the right size, it has to be manually resized.
    .myImage { width: 18px; height: 18px; }
  </ui:style>

  <ui:with field='resources'
    type='com.commonsemantics.example.Example.Resources' /> 

  <g:HorizontalPanel styleName='{style.titleBar}'>
    <g:Image ui:field='rightSide' resource='{resources.myIcon}'  
      styleName='{style.myImage}'></g:Image>
  </g:HorizontalPanel>

  </ui:UiBinder>

3) Getting the images from the same package. When making use of images it is also possible to copy them in the same package of the class using them and refer to them as follow:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:image field='myImage' src='myImage.gif' />

  <g:HorizontalPanel>
    <g:Image ui:field='rightSide' resource='{myImage}'></g:Image>
  </g:HorizontalPanel>

</ui:UiBinder>