Dynamic Tab Creation

Hi Friends,
I need to create a Dynamic Tab. Could you please give me sample code.

I tried this code, but not working

When I click on Button, Dynamically tab need to come.

package com.example.dynamictab;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TabSheet.Tab;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@SuppressWarnings(“serial”)
@Theme(“dynamictab”)
public class DynamictabUI extends UI {
@WebServlet(value = “/*”, asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = DynamictabUI.class)
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    setContent(layout);
    final TabSheet tabSheet = new TabSheet();
    Button button = new Button("Click Me");
    button.addClickListener(new Button.ClickListener() {
        public void buttonClick(ClickEvent event) {
            layout.addComponent(new Label("Thank you for clicking"));
            layout.addComponent(new Label("This is the tab content."));
            Tab tab = tabSheet.addTab(layout, "The new Tab", null);
        }
    });
    layout.addComponent(button);
}

}

Thanks

Hi Sakthiplan,

your code should look like this:

@Override
    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);
        final TabSheet tabSheet = new TabSheet();
        layout.addComponent(tabSheet);
        
        Button button = new Button("Click Me");
        button.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                VerticalLayout newTabLayout = new VerticalLayout();
                newTabLayout.addComponent(new Label("Thank you for clicking"));
                newTabLayout.addComponent(new Label("This is the tab content."));
                Tab tab = tabSheet.addTab(newTabLayout, "The new Tab", null);
                tabSheet.setSelectedTab(tab);
            }
        });
        layout.addComponent(button);
    }
  1. you didn’t assign the tabsheet to the layout. so it would never be visible.
  2. in your ClickListener you assigned layout to the tabsheet. there you have to create a new instance of a layout and add it to the tabsheet. don’t add the main layout as a new tab.

greetings
mathias