如何在Vaadin14中为Tabs设置不同的内容？

Question

我有一个非常简单的类，基本上只是AppLayout一些Tab.现在是我的问题。我无法找到一种聪明的方法来显示类的不同内容Tabs。是否有任何接口或可以调用的东西来区分 的内容Tab？class MainAppView extends AppLayout {public MainAppView(){    createDrawerAndAddToAppView();}void createDrawerAndAddToAppView(){    Tabs tabs = createTabsForDrawer();    tabs.setOrientation(Tabs.Orientation.VERTICAL);    addToDrawer(tabs);    H1 a = new H1("Test"); // Is displayed as content for every Tab    tabs.addSelectedChangeListener(selectedChangeEvent ->            /**             * How to get the specific content of a Tab here?             */            //selectedChangeEvent.getSelectedTab(). //getContent() and put in super.setContent()?            super.setContent(a)); // Displays 'Test' as content for every Tab            // The Listener shall display the specific content of the getSelectedTab()}private Tabs createTabsForDrawer(){    return  new Tabs(            new Tab("Home"),            new Tab("Dummy"),            new Tab("Test"));}}

Answer 1

这是一个示例，使用地图来跟踪哪些内容属于哪个选项卡。实际上，您的选项卡内容会更复杂，并且可能是用它自己的方法创建的。

@Route

public class TabTest extends VerticalLayout {

    private Map<Tab, Component> tabComponentMap = new LinkedHashMap<>();

    public TabTest() {

        Tabs tabs = createTabs();

        Div contentContainer = new Div();

        add(tabs, contentContainer);

        tabs.addSelectedChangeListener(e -> {

            contentContainer.removeAll();

            contentContainer.add(tabComponentMap.get(e.getSelectedTab()));

        });

        // Set initial content

        contentContainer.add(tabComponentMap.get(tabs.getSelectedTab()));

    }

    private Tabs createTabs() {

        tabComponentMap.put(new Tab("Show some text"), new H1("This is the text tab"));

        tabComponentMap.put(new Tab("Show a Combo Box"), new ComboBox<String>());

        tabComponentMap.put(new Tab("Show a button"), new Button("Click me and nothing happens"));

        return new Tabs(tabComponentMap.keySet().toArray(new Tab[]{}));

    }

}

你也可以对路由做类似的事情，但是你可能希望你的包含组件是一个RouterLayout. 如果您想在从其他地方导航后自动选择正确的选项卡，这也需要更多的逻辑。

@Route

public class TabTest extends VerticalLayout implements RouterLayout {

    private Map<Tab, String> tabToUrlMap = new LinkedHashMap<>();

    private Div contentContainer = new Div();

    public TabTest() {

        Tabs tabs = createTabs();

        Div contentContainer = new Div();

        contentContainer.setSizeFull();

        add(tabs, contentContainer);

        tabs.addSelectedChangeListener(e ->

                UI.getCurrent().navigate(tabToUrlMap.get(e.getSelectedTab())));

    }

    private Tabs createTabs() {

        RouteConfiguration routeConfiguration = RouteConfiguration.forApplicationScope();

        tabToUrlMap.put(new Tab("View 1"), routeConfiguration.getUrl(TestView1.class));

        tabToUrlMap.put(new Tab("View 2"), routeConfiguration.getUrl(TestView2.class));

        tabToUrlMap.put(new Tab("View 3"), routeConfiguration.getUrl(TestView3.class));

        return new Tabs(tabToUrlMap.keySet().toArray(new Tab[]{}));

    }

    @Override

    public void showRouterLayoutContent(HasElement content) {

        getElement().appendChild(content.getElement());

    }

}

和一个示例视图

@Route(layout = TabTest.class)

public class TestView3 extends VerticalLayout {

    public TestView3() {

        add("View 3");

    }

}