FAQ - Advanced Tab Panel Questions

  1. What is AdvancedTabPanel? Why do I need it?
  2. How to use AdvancedTabPanel?
  3. How to customize AdvancedTabPanel look & feel?
  4. How to make my tabs band renderer?
What is AdvancedTabPanel? Why do I need it?

AdvancedTabPanel is a GWT widget that has rather similar functionality with standard TabPanel. But there are several differences:

  • It allows displaying the tabs band on any side of the panel - top, bottom, left and right
  • It supports themes
  • It provides API for look & feel customization
  • It automatically resizes other advanced widgets on tab click (page opening)

Taking into account features and restrictions listed above you can make decision whether you need this component.

[top]

How to use AdvancedTabPanel?

Everything you need is to create an instance and add tabs: 

AdvancedTabPanel panel1 = new AdvancedTabPanel(TabPosition.LEFT);
AdvancedTabPanel panel2 = new AdvancedTabPanel(TabPosition.BOTTOM);

panel1.addTab(new Label("Nested Tabs"), panel2);

This sample creates two panels and adds one of them into other.

[top]

How to customize AdvancedTabPanel look & feel?

You can customize:

  • tab borders
  • content border

The sample below illustrates how do all these customizations: 

BorderFactory contentbBorderFactory = new BorderFactory() {
    public Border create() {
        return new SingleBorder();
    }
};

BorderFactory tabBorderFactory = new BorderFactory() {
    public Border create() {
        return new RoundCornerBorder();
    }
};

AdvancedTabPanel panel = new AdvancedTabPanel(TabPosition.TOP, tabBorderFactory, contentbBorderFactory);

[top]

How to make my tabs band renderer?

AdvancedTabPanel provides API that allows to define a custom tabs band renderer. It's not trivial to use this API but possible. The easiest way is to extends one of existing renderers: 

public static class MyTabBandRenderer extends TopBandRenderer {
    public Widget render(AdvancedTabPanel panel) {
        Widget tab = super.render(panel);

        //do something specific

        return tab;
    }
}

There is no a special method to set the custom renderer. But there is a back door. You will have to extend the TabPosition class since its constructor has protected access level and requires that the renderer is passed as a parameter: 

public static class MyTabPosition extends TabPosition {
    public static final TabPosition CUSTOM = new MyTabPosition("custom");

    protected MyTabPosition(String name) {
        super(name, new MyTabBandRenderer(), DockPanel.NORTH);
    }
}

Now pass the CUSTOM tab position in the AdvancedTabPanel constructor.

[top]