How to set the default tab selection in TabPanel of GWT using UIBinder

Question

I have a TabPanel which I have coded up in the ui.xml file. I want to keep one of the tabs as the default selection (You would think that the 0th tab is already selected if the user did not specify anything, but that is not the behaviour). How do I do it in via the ui.xml file ? I tried to search for an attribute like

<g:Tab test="Something" selected="true">

but that does not seem to work. I don't want to set the default selection programatically.

Thank you in advance.

Adam Adam · Accepted Answer · 2015-01-28T00:26:56

I could not find any other method, so I have made a simple wrapper for TabPanel:

public class TabPanelWrapper extends Composite implements HasWidgets {

    private FlowPanel wrapper;
    private TabPanel tabPanel;
    private Integer defaultTab;

    public TabPanelWrapper() {
        wrapper = new FlowPanel();
        initWidget(wrapper);
    }

    public void setDefaultTab(int dafaultTab) {
        this.defaultTab = dafaultTab;
        if(tabPanel != null && defaultTab < tabPanel.getWidgetCount())
            tabPanel.selectTab(defaultTab);
    }

    @Override
    public void add(Widget w) {
        if(w instanceof TabPanel && tabPanel == null) {
            tabPanel = (TabPanel) w;
            if(defaultTab != null && defaultTab < tabPanel.getWidgetCount())
                tabPanel.selectTab(defaultTab);
            wrapper.add(tabPanel);
        }
    }

    @Override
    public void clear() {
        wrapper.clear();
    }

    @Override
    public Iterator<Widget> iterator() {
        return wrapper.iterator();
    }

    @Override
    public boolean remove(Widget w) {
        return wrapper.remove(w);
    }
}

This wrapper has setDefaultTab method so you can use defaultTab attribute in UiBinder like this:

<t:TabPanelWrapper defaultTab="1">
    <g:TabPanel>
        <g:Tab text="Header #1">
            <g:FlowPanel>
                <g:Label>Content #1</g:Label>
            </g:FlowPanel>
        </g:Tab>
        <g:Tab text="Header #2">
            <g:FlowPanel>
                <g:Label>Content #2</g:Label>
            </g:FlowPanel>
        </g:Tab>
        <g:Tab text="Header #3">
            <g:FlowPanel>
                <g:Label>Content #3</g:Label>
            </g:FlowPanel>
        </g:Tab>
    </g:TabPanel>
</t:TabPanelWrapper>

The only pitfall you can get is that TabPanel is wrapped in additional <div> element representing FlowPanel.

Using this method you can add any property to any widget ;)

How to set the default tab selection in TabPanel of GWT using UIBinder

1 Answers