Cross-browser UI with GWT

October 27th, 2008 Slava Nadvorny Posted in GWT | 5 Comments »

I’m happy to announce that we have new release of Lombardi Blueprint out. In this article, I want to share some experience I got while working on it. This will cover some basic layout strategies and highlight common problems that every GWT developer will ran into while trying to make UI look the same on all platforms.

Layout with GWT

GWT uses Panels to layout UI. Panels are similar to SWT Composites that have specific layout. FlexTable is the class we need to create large complex layouts. It is based on HTML table and allows splitting and joining cells. Common trick is to use auto-incrementing row and column counter variables instead of hard-coding values. It greatly simplifies inserting and reordering rows and columns.

VerticalPanel and HorizontalPanel are two classes to use for another strategy. They layout child widgets into one line vertically or horizontally. You can wrap them one into each other to create complex interface. To control child widget alignment use setCellHorizontalAlignment() and setCellVerticalAlignment().

There are two strategies in building complex UI with GWT. We can either create one big layout for all components or use many simpler panels wrapping them into each other. While second solution is easier to maintain, test and debug it is harder to make it stretch as you want. Selecting strategy depends on complexity of UI. It helps to draw layout on paper first before making any decision. In many cases, solution is to create outer frame as FlexTable and insert smaller panels into it.

You can split complex UI into standalone widgets and use much simpler layout with them. Note that classes extending Widget do not pass browser events like mouse clicks to widgets inside it. So you need to override onBrowserEvent() and pass events there.

I frequently use FlowPanel instead of VerticalPanel, as there is no additional tuning required adding padding to it. They act similar with block elements, but be warned, form controls like radio buttons are inline elements so they will not be stacked vertically. Instead, they will flow to the right and wrap at panel border.

Using Constants interface for String constants and CSS for style customization helps to create UI that can be tuned without source code changes.

Browser specific

Here are some browser specific tips might be helpful if you work with GWT:

Setting table padding on IE works similar to setting cellPadding table attribute. It sets padding for each cell. While GWT keeps border-collapse collapsed FF renders tables with padding differently. You either need to set border-collapse to separate to emulate IE behavior on FF, or wrap the panel into a simple panel with padding.

Complex layouts with multiple DIVs and TABLEs nested can lose background color in IE6. This can be fixed setting div height property to 1%. We have separate CSS for IE6 overrides and there are loads of 1% fixes. They take the second place just after AlphaImageLoader filter that fixes PNG opacity.

Sometimes you need to center table based panel. Setting margin-left and margin-right style attributes of panel to auto will fix the problem on all browsers. Setting align HTML table property to center also works well, but this is not pure CSS solution.

In Blueprint’s user administration page, we have nice animation that fades away user entry as we remove him from the list. Opacity is set via opacity CSS attribute on all browsers except IE6. We are using Alpha Opacity filter for it. However, to make fade animation work on IE6 we should ensure that background-color is set for the element we hiding. Otherwise, animation will blink and text will get opaque outline.

Debugging tools

Now a couple of words about debugging tools. Hosted mode browser allows debugging GWT code as pure java code. However, as you compile JavaScript this is not enough.

There is IE7 preinstalled on my PC. To test on IE6 I use Microsoft Virtual PC 2007 and an image of Windows XP with IE6 preinstalled. Both can be downloaded from Microsoft site free. Windows image expires in 3 month so I do not have to reinstall it too frequently. I run FF2 on Virtual PC as well, so it does not interfere with FF3 installation on my machine.

All browsers have either FireBug with Web Developer Toolbar for FF or IE Developer Toolbar for IE installed. I cannot imagine working without these tools.

Creating cross browser UI is now almost as easy as creating cross platform UI with SWING or SWT. As I build UI and test it in FF and IE7 it look just as I expect it to. While IE6 has some issues need to be tweaked, in most cases it is identical to other browsers. I hope that this article will help you to make clean and efficient user interfaces.