Widgets Customization

Themes is one of widgets customization options. However you can change look & feel of some components using decorators.

Decorator is a class that is executed after a widget was displayed. Currently only grids support decoration feature but it is in plans to extend this approach to other components.

If you want to decorate a grid you must implement the GridDecorator interface. Here is one simple sample of such implementation.

editableGrid.addGridDecorator( new GridDecorator() {
    public void decorate (EditableGrid grid) {
        grid.setColumnWidth(0, 500);
    }
})
            

Decorators are useful in cases when themes don't help because of CSS restrictions. Note that grid decorators will be invoked in the same order they were added.

If you want to change the view totally, you can develop a custom renderer. Renderer is a class that dynamically builds displayable content. Any renderer must implement the GridRenderer interface. Methods of the interface are invoked by a grid widget every time it is going to render headers, table body rows or cells. Currently a grid calls only two methods: drawHeaders() and drawContent(). Other methods might be used by a renderer itself.

The most effective way to develop a renderer is to extend it from one of default implementations:

editableGrid.setGridRenderer(new DefaultGridRenderer() {
    public void drawCell(Object value, int row, int column, boolean active) {
        getGrid().setText(row, column, String.valueOf(value); // always diaplay as a text
    }
})
            

The sample above creates a new renderer implementation that always display data model values as textual string.

And finally if decorators and renderers are not enough flexible you can extend a widget class. Note that widgets like the DatePicker, ComboBox, SuggestionBox and SimpleGrid don't support decorators and renderers, so extension might be a good solution.

Working on Advanced GWT Components the team kept in mind that users may want to add new features and unexpected functionality to existent widgets. It's a reason why most of methods are public or protected.

If you override a protected method note that it may require to override many other methods as well. Investigate an original implementation to know what exactly might be affected. On the other hand you can override public methods without restrictions. The next listing shows how to extend the DatePicker and redefine a default image for the button.

new DatePicker(new Date()) {
    protected String getDefaultImageName() {
        return "mySuperImage.gif";
    }
}.diaply()
            

If you run this code you can see that the default button image will be replaces with yours.