Tips for using Google Web Toolkit

This post will be a set of notes with UI improvements.

Loading Image ...
If you are loading an image that may take some time to load, it would be nice to tell the user that something will appear.  One way to do this is to put some text into a panel first, and when the image is ready, display it to the user.

// Fill in the panel with some text.
Label loadingImgLabel = new Label("Image loading ...");
private VerticalPanel imagePanel = new VerticalPanel();
imagePanel.setHeight( "250px" );
imagePanel.add( loadingImgLabel );

// Make a async call to get the image you want
// When it is ready, replace the text with an image.
Image image = new Image();
image.setUrl( "location/of/img" );

imagePanel.clear( );
imagePanel.add( image );  

Setting the width of the panel
If you want your widgets to fill up the page, set widths like this:

private VerticalPanel aPanel = new VerticalPanel();
aPanel.setWidth( "100%" );

How to write to and clear a Flextable
I was trying to clear rows from a flextable in the following way:

FlexTable flexTable = new FlexTable();
flexTable.setText( 0, 0, "some text to add in row 1, column 1" );

// This clear statement didn't remove the text from the table
flexTable.clear();

I realized that the clear command will only clear widgets.  Thus, in order to add and remove flextable rows, you need to do the following.

FlexTable flexTable = new FlexTable();
flexTable.setWidget( 0, 0 ,
    new Label( "some text to add in row 1, column 1" ));

// Now, the text as widgets will be removed, as expected
flexTable.clear();

// Just to be extra safe, you can also do

flexTable.removeAllRows();

More to come later ...