gwttabstabpanelgwt-tablayoutpanel

GWT tab panel - how to put the tabs on the bottom

I have been struggling with a problem and searching the web did not yield any result.

Basically I am trying to create in GWT ( plain GWT without ext or smart) a tab panel.

The catch is that I need the tabs to be on the bottom of the panel, not at the top, how they are by default.

Do you have any ideas on how I can achieve this?

Thank you.

Update 1: (To be more clear I have added screenshots) What is the default -> default tab position

What I need -> needed tab position

Solution

  • The TabPanel is actually an aggregate of a TabBar and a DeckPanel widgets. You can arrange them as you like. All you have to do is to addSelectionHandler (or addBeforeSelectionHandler) to the TabBar that will showWidget (according to selected tab) on the DeckPanel.

    For example:

    TabBar tabs = new TabBar();
final DeckPanel deck = new DeckPanel(); 

for(int i = 0; i < 5; i++) {
    tabs.addTab("Tab " + Integer.toString(i + 1));
    deck.add(new Label("Label " + Integer.toString(i + 1)));
}

tabs.addSelectionHandler(new SelectionHandler<Integer>() {
    @Override
    public void onSelection(SelectionEvent<Integer> event) {
        deck.showWidget(event.getSelectedItem());
    }
});

VerticalPanel vPanel = new VerticalPanel();
vPanel.add(deck);
vPanel.add(tabs);

tabs.selectTab(0);