Code sample for making GWT TabLayoutPanel tabs visible and invisible

Here are some code snippets for making TabLayoutPanel tabs visible and invisible. I use it to provision all my tabs in a UiBinder template up front, but have only those tabs that are relevant visible. This requires me to immediately make most of the tabs invisible on load, and then triggering their visibility when the user takes certain actions.

Use Case

The initial rendering of the tabs looks like this. (if you want to know how I styled the tabs, see another post of mine) Notice only one tab is visible:

After the user clicks on one of the enroll buttons, I make the associated tab visible on the control, which results in this:

Sample Code

The following is the sample code that I use to make all of this happen.

UiBinder Page

Here is a snippet from my RewardsView.ui.xml UiBinder file, with most of the user text redacted for brevity. Notice how I define all of the possible tabs up front:

<g:TabLayoutPanel ui:field="programsTabPanel" barHeight="2" barUnit="EM">
    <g:tab>
        <g:header>Available</g:header>
        <g:HorizontalPanel styleName='program_tab'>
            <g:cell width="35%">
                    CONTENT GOES HERE 
            </g:cell>
            <g:cell width='65%'>
                    CONTENT GOES HERE 
            </g:cell>
        </g:HorizontalPanel>
    </g:tab>
    <g:tab>
        <g:header>Demand Response</g:header>
        <g:HorizontalPanel>
            <g:cell width="35%">
                    CONTENT GOES HERE 
            </g:cell>
            <g:cell width='65%'>
                    CONTENT GOES HERE 
            </g:cell>
        </g:HorizontalPanel>
    </g:tab>
    <g:tab>
        <g:header>Energy Efficiency</g:header>
        <g:HorizontalPanel styleName='program_tab'>
            <g:cell width="35%">
                    CONTENT GOES HERE 
            </g:cell>
            <g:cell width='65%'>
                   CONTENT GOES HERE 
            </g:cell>
        </g:HorizontalPanel>
    </g:tab>
</g:TabLayoutPanel>

Hiding a tab during initialization of the UiBinder Composite

I then set most of my tabs to invisible during construction of the UiBinder composite. Notice that I had to introduce an extra getParent() call to do this. If you don’t do this, you will find small slivers of the invisible tabs still visible (and still clickable by the user!). Making the parent invisible properly obscures the whole thing.

@UiField TabLayoutPanel programsTabPanel;

public RewardsView(String firstName) {
    initWidget(uiBinder.createAndBindUi(this));
    programsTabPanel.getTabWidget(1).getParent().setVisible(false);
    programsTabPanel.getTabWidget(2).getParent().setVisible(false);
}

Its a bit lame that I reference the tabs by index, but it works for me.

Displaying a hidden tab in a button ClickHandler

Look at the StockWatcher sample if you need to learn how to create a ClickHandler for a button. You could also trigger visibility of a tab via other means. But in the end, you need a line of code like this to make the tab visible again:

programsTabPanel.getTabWidget(2).getParent().setVisible(true);

You will need to determine the right tab index to enable (I show 2 above), but otherwise its a piece of cake. Done!

Technorati Tags: gwt,tabcontrol