如何在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

这是一个示例，使用地图来跟踪哪些内容属于哪个选项卡。实际上，您的选项卡内容会更复杂，并且可能是用它自己的方法创建的。@Routepublic class TabTest extends VerticalLayout {&nbsp; &nbsp; private Map<Tab, Component> tabComponentMap = new LinkedHashMap<>();&nbsp; &nbsp; public TabTest() {&nbsp; &nbsp; &nbsp; &nbsp; Tabs tabs = createTabs();&nbsp; &nbsp; &nbsp; &nbsp; Div contentContainer = new Div();&nbsp; &nbsp; &nbsp; &nbsp; add(tabs, contentContainer);&nbsp; &nbsp; &nbsp; &nbsp; tabs.addSelectedChangeListener(e -> {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentContainer.removeAll();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentContainer.add(tabComponentMap.get(e.getSelectedTab()));&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; // Set initial content&nbsp; &nbsp; &nbsp; &nbsp; contentContainer.add(tabComponentMap.get(tabs.getSelectedTab()));&nbsp; &nbsp; }&nbsp; &nbsp; private Tabs createTabs() {&nbsp; &nbsp; &nbsp; &nbsp; tabComponentMap.put(new Tab("Show some text"), new H1("This is the text tab"));&nbsp; &nbsp; &nbsp; &nbsp; tabComponentMap.put(new Tab("Show a Combo Box"), new ComboBox<String>());&nbsp; &nbsp; &nbsp; &nbsp; tabComponentMap.put(new Tab("Show a button"), new Button("Click me and nothing happens"));&nbsp; &nbsp; &nbsp; &nbsp; return new Tabs(tabComponentMap.keySet().toArray(new Tab[]{}));&nbsp; &nbsp; }}你也可以对路由做类似的事情，但是你可能希望你的包含组件是一个RouterLayout. 如果您想在从其他地方导航后自动选择正确的选项卡，这也需要更多的逻辑。@Routepublic class TabTest extends VerticalLayout implements RouterLayout {&nbsp; &nbsp; private Map<Tab, String> tabToUrlMap = new LinkedHashMap<>();&nbsp; &nbsp; private Div contentContainer = new Div();&nbsp; &nbsp; public TabTest() {&nbsp; &nbsp; &nbsp; &nbsp; Tabs tabs = createTabs();&nbsp; &nbsp; &nbsp; &nbsp; Div contentContainer = new Div();&nbsp; &nbsp; &nbsp; &nbsp; contentContainer.setSizeFull();&nbsp; &nbsp; &nbsp; &nbsp; add(tabs, contentContainer);&nbsp; &nbsp; &nbsp; &nbsp; tabs.addSelectedChangeListener(e ->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; UI.getCurrent().navigate(tabToUrlMap.get(e.getSelectedTab())));&nbsp; &nbsp; }&nbsp; &nbsp; private Tabs createTabs() {&nbsp; &nbsp; &nbsp; &nbsp; RouteConfiguration routeConfiguration = RouteConfiguration.forApplicationScope();&nbsp; &nbsp; &nbsp; &nbsp; tabToUrlMap.put(new Tab("View 1"), routeConfiguration.getUrl(TestView1.class));&nbsp; &nbsp; &nbsp; &nbsp; tabToUrlMap.put(new Tab("View 2"), routeConfiguration.getUrl(TestView2.class));&nbsp; &nbsp; &nbsp; &nbsp; tabToUrlMap.put(new Tab("View 3"), routeConfiguration.getUrl(TestView3.class));&nbsp; &nbsp; &nbsp; &nbsp; return new Tabs(tabToUrlMap.keySet().toArray(new Tab[]{}));&nbsp; &nbsp; }&nbsp; &nbsp; @Override&nbsp; &nbsp; public void showRouterLayoutContent(HasElement content) {&nbsp; &nbsp; &nbsp; &nbsp; getElement().appendChild(content.getElement());&nbsp; &nbsp; }}和一个示例视图@Route(layout = TabTest.class)public class TestView3 extends VerticalLayout {&nbsp; &nbsp; public TestView3() {&nbsp; &nbsp; &nbsp; &nbsp; add("View 3");&nbsp; &nbsp; }}