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

Question

我有一个非常简单的 class，基本上只是一个 AppLayout 和一些 Tab。

现在是我的问题。我无法找到一种智能方式来显示 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。如果您想在从其他地方导航后自动 select 正确的选项卡，这也需要更多的逻辑。

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

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

How to set different content for Tabs in Vaadin14?

java

vaadin