GWT - images and uibinder

Today we will meet a new friend in the ui:binder's world, <ui:image>. It is used to tag images to be included into the uibinder.

<ui:image field='logoImage' src='gwt.png' />
<ui:style>
    @url logoUrl logoImage;
    .logo {
      background-repeat: no-repeat;
      background-image: logoUrl;
      width: 100px;
      height: 100px;
    }
</ui:style>

<g:FlowPanel>
    <g:Image resource='{logoImage}' />
    <g:HTML styleName='{style.logo}'>
        hello image
    </g:HTML>
</g:FlowPanel>

We need to give a name to the newly included image via the "field" attribute. There are two ways access the image, both are demonstrated in the above codes

1. use <Image> widget 
2. use the image as css background-image. notice the @url rule 

There are several benefits of letting GWT compiler handles the images for you.

1. Images can be anywhere on the classpath, instead of being canned inside the /images/ folder. Now suppose we are writing a reusable component, the component can be nicely encapsulated inside a dedicated package, and the client of the component is hassle free, just include the jar and we are good to go.
2. GWT compiler will do extra work to make the image cache friendly. The image will be either be assigned a random name, or embedded directly into the css codes using data url. The file name is determined by hashing the content of the image, so in case the image never changes, the name remains the same, now we can happily set the TTL of the image to be 1 year at the cache layer. By default, GWT will make a smart guess if the images is small enough, it will be included as data url. You can disable this feature by explicitly set <set-property name="ClientBundle.enableInlining" value="false" /> in the prod.gwt.xml. 
3. Since the original image file name is not used in the final output, we are free of naming collision. Dev A can have a logo.png under packages com.verydapeng.mod1, Dev B can have a logo.png under package com.verydapeng.mod2. There is no need to come up any naming scheme like /images/logo_mod1.png, /images/logo_mod2.png

Codes are available from github https://github.com/verydapeng/gwt-tutorials, under the /Images/ folder

Happy coding ...