TabLayoutPanel disable a Tab GWT

Question

How can i disable a tab (i.e the user cannot open the tab when he clicks on it) in the TabLayoutPanel?I searched online but was not able to find a solution

Thanks

Crysta

Answer 1

Use a BeforeSelectionHandler:

TabLayoutPanel myPanel = new TabLayoutPanel();
// Add children...

myPanel.addBeforeSelectionHandler(new BeforeSelectionHandler<Integer>() {
  @Override
  public void onBeforeSelection(BeforeSelectionEvent<Integer> event) {
    // Simple if statement - your test for whether the tab should be disabled
    // will probably be more complicated
    if (event.getItem() == 1) {
      // Canceling the event prevents the tab from being selected.
      event.cancel();
    }
  }
});

If you want to style the disabled tab differently than enabled tabs, you can use TabLayoutPanel#getTabWidget to get the tab widget and add a style name to it.

Goff

how do i enable it back again? – Crysta

Only call event.cancel() in the BeforeSelectionHandler when you want the tab to be disabled. – Goff

the requirement i have is that i need the tab to disable when the page which has the tab loads first time.But when something happens, i need to enable the tab again.How can i achieve this? – Crysta

In the if statement in onBeforeSelection() test whether the tab should be disabled or not based on your application state. – Goff

Yes,i have an if statement which disables the tab when the application loads.But after the application loads i need to enable the tab ,so i definitely need to change its state from disabled to enabled. – Crysta

I got the solution.I just need to remove the handler in order to enable the Tab back .Thanks – Crysta

Answer 2

For anyone who comes across this later:

As of GWT version 1.6, disabling/enabling tabs is built into GWT. The TabBar class has a method setTabEnabled(int index, boolean enabled) that enables/disables the tab at a given index.

For example, to disable all the tabs in a TabPanel:

TabPanel myTabPanel = new TabPanel();
// Add children

TabBar tabBar = myTabPanel.getTabBar();
for(int i=0; i<tabBar.getTabCount(); i++) {
    tabBar.setTabEnabled(i, false);
}

See the GWT javadoc for more info.

To style disabled tabs differently (which GWT does automatically, but if you wanted to change the style): disabled tabBarItem divs are given another CSS class: gwt-TabBarItem-disabled.

Ghetto

The question was about the TabLayoutPanel type, not TabBar. – Goff

@JasonTerk The TabLayoutPanel contains a TabBar! That is the part at the top of the TabLayoutPanel that holds the tabs. You can access the TabBar of a TabLayoutPanel by using myTabLayoutPanel.getTabBar() (see my answer). I've updated my answer to make this more clear. – Ghetto

There is no getTabBar method on the TabLayoutPanel type. Perhaps you mean TabPanel? – Goff

@JasonTerk Oh yeah - oops, sorry! You're right - I do mean TabPanel. I've corrected my code. – Ghetto

Answer 3

You can access tab style by casting class Tab to Widget

TabPanel tabPanel = new TabPanel();
((Widget)tabPanel().getTabBar().getTab(tabsToDisable.iterator().next())).addStyleName("disabled");

Babble