Toggle Layout visibility / switch between two Layouts

Vaadin 6 / 7 / 8
1

Hi guys, as the title says I want to display a specific layout (my wizard) instead of the original layout.

So when I click a specific button I display the wizard instead of the original layout and when I cancel/finish the wizard I want to return to that layout.

Due to restrictions I cannot just navigate to an entirely new view.

The way I had been handling this was to simply remove all components from the layout, then add the wizard component. But when I cancel/finish the wizard, I return to a blank page obviously. Can I do this in a different way?

Button subscribe = new Button("Subscribe", new Button.ClickListener() {
    @Override
    public void buttonClick(ClickEvent event) {
    mainView.getContentLayout().removeAllComponents();
    mainView.getContentLayout().addComponent(wizard);
    }
});
2

Hi,

The following code snippet uses setContent to change the conten of a UI. Hopefully this method can be of use to you.

    @Override
    protected void init(VaadinRequest request) {

        VerticalLayout main = new VerticalLayout();
        main.addComponent(new Button("Button 1"));
        main.addComponent(new Button("Button 2"));
        main.addComponent(new Button("Button 3"));

        HorizontalLayout wizard = new HorizontalLayout();
        wizard.addComponent(new Button("Button A"));
        wizard.addComponent(new Button("Button B"));
        wizard.addComponent(new Button("Button C"));

        setContent(main);

        Button wizardButton = new Button("Load Wizard View",
                new Button.ClickListener() {
                    @Override
                    public void buttonClick(ClickEvent event) {
                        setContent(wizard);
                    }
                });
        main.addComponent(wizardButton);

        Button mainButton = new Button("Load Main View",
                new Button.ClickListener() {
                    @Override
                    public void buttonClick(ClickEvent event) {
                        setContent(main);
                    }
                });
        wizard.addComponent(mainButton);

    }

Best regards,

Henrik

3

In Vaadin, when you remove components from a layout they are removed permanently. So after you remove the wizard, you need to add the old components back in. Another way to do this whole thing is to use a Window for the wizard instead; in the click listener, create a Window, put your wizard as the content, and call Ui.getCurrent().addWindow(). When you want to go back, remove the window from the UI, or call Window.close(); all your old components will still be there.