Vaadin 14 диалог с вкладками - PullRequest
Новая
       25

Vaadin 14 диалог с вкладками

0 голосов
/ 22 октября 2019

Я хочу достичь следующего: диалоговое окно содержит макет с панелью вкладок, которая, в свою очередь, содержит контейнеры компонентов для каждой вкладки. 

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 должна быть открыта(это по умолчанию). В каждом представлении есть две кнопки (назад / далее), которые влияют на навигацию между вкладками. Поэтому, если я нахожусь в Tab1 с View1 и нажимаю «Далее», открывается Tab2 с View2 в нем и так далее. Если возможно, диалог должен остаться без изменений, поэтому меняются только вкладки. Как мне достичь этой цели и что должны содержать события нажатия кнопки в каждом представлении? Я не знаю, как получить доступ к вкладкам в DialogLayout из соответствующего представления.

1 Ответ

1 голос
/ 22 октября 2019

Хотелось бы что-нибудь подобное? 

@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

Диалоговое окно результатов выглядит следующим образом:enter image description here

И код вкладок взят прямо отсюда: Вкладки: Примеры Java

PS Это просто POC, и это может бытьровно 1: 1 с тем, что вы хотите, но вы можете получить представление здесь, как следовать :) И этот код должен быть реорганизован, чтобы не повторять ту же логику три раза (во вкладках слушатель и кнопки назад / вперед)

...