如何在Vaadin14中为选项卡设置不同的内容？

Question

我有一个非常简单的类，基本上就是一个带有一些Tab的AppLayout。

现在是我的问题了。我找不到一种智能的方法来显示Tabs-class的不同内容。有没有什么接口或东西可以被调用来区别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");
    }
}