带有选项卡的 Vaadin 14 对话框

Question

我想达到以下目标： 对话框包含一个带有标签栏的布局，而标签栏又包含每个标签的组件容器。

private final Map<Tab, Component> tabComponentMap = new LinkedHashMap<>();
public DialogLayout()
    {
        super();
        this.initUI();

        final Tabs tabs             = this.createTabs();
        final Div  contentContainer = new Div();
        this.addComponentAtIndex(1, tabs);
        this.addComponentAtIndex(2, contentContainer);

        tabs.addSelectedChangeListener(e -> {
            contentContainer.removeAll();
            contentContainer.add(this.tabComponentMap.get(e.getSelectedTab()));
        });

        contentContainer.add(this.tabComponentMap.get(tabs.getSelectedTab()));
    }
private Tabs createTabs()
    {
        this.tabComponentMap.put(new Tab("1"), new View1());
        this.tabComponentMap.put(new Tab("2"), new View2());
        this.tabComponentMap.put(new Tab("3"), new View3());
        return new Tabs(this.tabComponentMap.keySet().toArray(new Tab[]{}));
    }

当我打开对话框时，选项卡 1 应该打开（这是默认设置）。每个视图中有两个按钮（后退/下一个）影响选项卡之间的导航。因此，如果我在带有 View1 的 Tab1 中并单击下一步，则会打开带有 View2 的 Tab2，依此类推。如果可能，对话框应保持不变，因此只有选项卡会更改。我如何实现这个目标以及每个视图中的按钮单击事件需要包含什么？我不知道如何从各个视图访问 DialogLayout 中的选项卡。

Answer 1

这样的东西会起作用吗？

@Route("dialogs-tabs")
public class DialogContainerTabs extends VerticalLayout {
    public DialogContainerTabs(){
        Dialog dialog=new Dialog();

        Tab tab1 = new Tab("Tab one");
        Div page1 = new Div();
        page1.setText("Page#1");

        Tab tab2 = new Tab("Tab two");
        Div page2 = new Div();
        page2.setText("Page#2");
        page2.setVisible(false);

        Tab tab3 = new Tab("Tab three");
        Div page3 = new Div();
        page3.setText("Page#3");
        page3.setVisible(false);

        Map<Integer, Component> tabsToPages = new HashMap<>();
        tabsToPages.put(0, page1);
        tabsToPages.put(1, page2);
        tabsToPages.put(2, page3);
        Tabs tabs = new Tabs(tab1, tab2, tab3);
        Div pages = new Div(page1, page2, page3);
        Set<Component> pagesShown = Stream.of(page1)
                .collect(Collectors.toSet());

        tabs.addSelectedChangeListener(event -> {
            pagesShown.forEach(page -> page.setVisible(false));
            pagesShown.clear();
            Component selectedPage = tabsToPages.get(tabs.getSelectedIndex());
            selectedPage.setVisible(true);
            pagesShown.add(selectedPage);
        });

        Button back=new Button();
        back.setIcon(VaadinIcon.ARROW_BACKWARD.create());
        dialog.add(back);
        back.addClickListener(e->{
           if(tabs.getSelectedIndex()>0){
               pagesShown.forEach(page -> page.setVisible(false));
               pagesShown.clear();
               tabs.setSelectedIndex(tabs.getSelectedIndex()-1);
               Component selectedPage = tabsToPages.get(tabs.getSelectedIndex());
               selectedPage.setVisible(true);
               pagesShown.add(selectedPage);
           }
           else{
               //Do what you want, maybe navigate to the last one? or NOOP
           }
        });


        Button forward=new Button();
        forward.setIcon(VaadinIcon.ARROW_FORWARD.create());
        dialog.add(forward);
        forward.addClickListener(e->{
            if(tabs.getSelectedIndex()<tabsToPages.size()-1){
                pagesShown.forEach(page -> page.setVisible(false));
                pagesShown.clear();
                tabs.setSelectedIndex(tabs.getSelectedIndex()+1);
                Component selectedPage = tabsToPages.get(tabs.getSelectedIndex());
                selectedPage.setVisible(true);
                pagesShown.add(selectedPage);
            }
            else{
                //Do what you want, maybe navigate to the first one one? or NOOP
            }
        });


        dialog.add(tabs);
        dialog.add(pages);
        dialog.setOpened(true);
        add(dialog);
    }

}

我在选项卡顶部有按钮，但如果你愿意，当然可以将它们放在视图中。 在 Vaadin 14 中，选项卡不包含组件，因此一旦切换选项卡，您应该手动将以前的组件设置为 hidden，将新的组件设置为 visible

结果对话框如下所示：

标签代码直接取自这里：Tabs : Java Examples

附： 它只是一个 POC，这可能与您想要的不完全是 1:1，但是您可以从这里得到一个想法，如何遵循 :) 并且应该重构此代码以不重复使用相同的逻辑三次（在标签监听器和后退/前进按钮）