After a lot (and I mean a lot) of time I stumbled across the API documentation for image bundles which is the mechanism/technique Google have used to package up images for widgets into a composite image that help reduce calls to the server and speed up the user experience.
In summary, the problem is that GWT makes use an activeX control to process png transparency on IE6. Internet Explorer specifies that files which require the plugin for viewing must be cached to disk by the browser. By default the HTTP headers set by the GWT servlets when the image is requested specify that the payload should not be cached. The image then never stored to disk (cached) and the activeX control cannot process the image and display it to the page. The solution is actually quite simple. You need to create an additional servlet that executes when image resources are requested. This is done by setting up a servlet in the web.xml with a file filter.
package xxxx.xxxxx.xxxxx;
public class ImageServlet extends HttpServlet {
private boolean isIE6(final HttpServletRequest request){
final String userAgent = ((HttpServletRequest) request).getHeader("User-Agent");
return userAgent.contains("MSIE 6");
}
protected doGet(final HttpServletRequest request, final HttpServletResponse response) throws ServletException, IOException {
if (isIE6(request) ){
response.setHeader("Cache-Control", "");
response.setHeader("Pragma", "" );
// This should be some date in the future. Dynamically create the
// date part of the string to be something in the future e.g.
// sysdate + 1
response.setHeader("Expires","Thu, 1 Jan 2013 00:00:00 ");
}
final String uri = request.getRequestURI();
// Extract the icon name
final String iconName = uri.substring(request.getContextPath().length(), uri.length() );
// Supply the icon back to the browser
continueProcessing(request, response, iconName);
}
protected void continueProcessing(final HttpServletRequest request
, final HttpServletResponse response
, final String iconName){
final ServletContext context = getServletContext();
final InputStream is = context.getResourceAsStream(iconName);
final OutputStream os = response.getOutputStream();
response.setContentType("image/png");
byte[] = new byte[8912];
while (true){
final int l = is.read(b);
if (l < 0)
break;
os.write(b,0,l);
}
}
}
The servlet itself should look something like that below : ImageServlet xxxx.xxxxx.xxxxxx.ImageServlet ImageServlet *.png
You then need to set up the servlet mapping in your web.xml so that all png requests get routed through this new servlet. The example could be improved by adding caching of images requested. This would also speed up load performance of your application for images that are requested more than once.
