如何在 Vaadin14 中为选项卡设置不同的内容? [英] How to set different content for Tabs in Vaadin14?

问题描述

我有一个非常简单的类，它基本上只是一个带有一些 Tab 的 AppLayout.

I have a pretty simple class that basically is just an AppLayout with some Tab.

现在是我的问题.我无法找到一种智能方式来显示 Tabs 类的不同内容.是否有任何接口或可以调用的东西来区分 Tab 的内容?

Now my issue. I am not able to find a smart way to display different contents for the Tabs-class. Is there any interface or something that can be called to differ the content for the 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"));
}

}

推荐答案

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

Here is one example, using a map to keep track of which content belongs to which tab. In reality your tab content would be more complicated, and maybe be created in it's own method.

@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.如果您想在从其他地方导航后自动选择正确的选项卡，这也需要更多的逻辑.

You can do something similar with routes also, but then you would probably want your containing component to be a RouterLayout. Also this requires a bit more logic if you want to automatically select the correct tab after navigating from somewhere else.

@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");
    }
}

这篇关于如何在 Vaadin14 中为选项卡设置不同的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！