TabSheet '+' Button to add new Tabs

Vaadin 6 / 7 / 8 Framework UI
1

Hi everybody,

is it possible to a add a ‘+’ button to a tabsheet to add new tabe like it is used for example in firefox to open a new tab?

Thanks for your help

2

Hi,

sure, I can think of a couple of ways to do that. First option would be something like follows:

  1. Create a tab with the caption “+” and an empty VerticalLayout as the content
  2. Add a listener with addSelectedTabChangeListener
  3. In the listener, get the selected tab’s content with event.getTabSheet().getSelectedTab() (note: despite the name, this returns the contents of the tab, not the tab object)
  4. If the content is an empty VerticalLayout, add some component(s) to the newly opened tab. Then change the caption and add a new tab with the caption “+” and set its contents to an empty layout

The second option would be to use a button instead of a tabsheet. Wrap the button and the tabsheet with an AbsoluteLayout so you can place it over the tabsheet where you want. Add new tabs in the button’s click handler and use styles to make the button look like what you want.

Hope these are enough to get you started,
Olli

3

Hello,

I’ve faced another problem when try change selected tab caption - nothing changing.
getTabSheet().getSelectedTab().setCaption(“NEW”);
Please assist.

Thanks

4

Or if it possible can you please provide example how to add button to tab sheet ?

Thanks

5

Use tabSheet.getTab with the index of the tab instead of getSelectedTab() - the latter returns the contents of the selected tab (because of historical reasons).

6

This helped. Another question how can I check that “+” tab clicked?
e.g. if click on caption “new” renamed from “+”, in code in if statement check on “+” that has “+” caption.
Please assist.

Thanks

7

You could store a reference to the “+” tab when you create it and check that it equals the one you want, maybe?

-Olli

8

I resolved problem, when I get tab like this, it get actual tab and it works ok.

getTabSheet().getTab(getTabSheet().getTabPosition(getTabSheet().getTab(getTabSheet().getSelectedTab())))

Thanks

9

Looks good :slight_smile: