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

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

Vaadin 14带有选项卡的对话框

1 个答案: