Wednesday, February 10, 2010

GWT - Use Google analytics to find bug

Google analytics provides a way to monitor the user behaviors. It enables us to monitor conversion rate overall, and/or based on browser type.

Few days ago, the Google analytics conversion chart showed that IE8 conversion rate was much less than IE6 and IE7. We doubted IE8 may have some problem for our application.

With extensive research, we found that IE8 more strict on the rule of form.attributes.name.nodeValue.
If no attribute name for the form, IE6/IE7 will ignore it, while IE8 will give exception.

One of our third party Javascript used form.attributes.name.nodeValue for tracking purpose.

The interesting thing is that it only happended if newly install IE8.
If you upgrade IE8 from IE6 or IE7, there is no such problem as IE8 will run in Compatibility mode. That was the reason the problem was skiped from our developers and QA testers.

With the fix, IE8 conversion rate goes up.


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