Why are my pages "stacking" instead of switching when I navigate?

Flow
1

Hello! I’m having a pretty frustrating issue here. I’m not sure what I’m missing exactly, and nothing I’ve found has helped.

When I navigate from view to view, instead of “swapping out”, each individual page’s contents just start stacking under each other. I’ve attached an image to illustrate my issue.

Each of those panels is actually components from different View classes. If you where to hit the “home” button, the URI would change, but it would create a fourth stacked panel at the bottom saying “This is my Default Label”. Why is this happening? I have changed relatively very little about the spring-tutorial code that Vaadin provides, but now this is happening. Any insight is appreciated.

MyUI.java

package org.vaadin.spring.tutorial;

import com.vaadin.annotations.Theme;
import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewDisplay;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.spring.annotation.SpringViewDisplay;
import com.vaadin.ui.*;
import com.vaadin.ui.themes.ValoTheme;

@Theme("valo")
@SpringUI
@SpringViewDisplay
public class MyUI extends UI implements ViewDisplay {
    final VerticalLayout MY_WINDOW = new VerticalLayout();

    @Override
    protected void init(VaadinRequest request) {
        MY_WINDOW.setSizeFull();
        setContent(MY_WINDOW);

        final CssLayout topBar = new CssLayout();

        for (String[] s: new String[]
[]{{"UI","ui"}, {"View","view"}, {"Home",""}, {"Login","login"}}) {
            topBar.addComponent(this.createNavigationButton(s[0]
, s[1]
));
        }

        MY_WINDOW.addComponent(topBar);
    }

    private Button createNavigationButton(String caption,
                                          final String viewName) {
        Button button = new Button(caption);
        button.addStyleName(ValoTheme.BUTTON_SMALL);
        // If you didn't choose Java 8 when creating the project, convert this
        // to an anonymous listener class
        button.addClickListener(
                event -> getUI().getCurrent().getNavigator().navigateTo(viewName));
        return button;
    }

    public void showView(View view) {
        MY_WINDOW.addComponent((Component) view);
    }
}

33410.png

2

Hi,
I think your problem is in showView() method; you are always adding the view component to MY_WINDOW VerticalLayout;
you should empty the layout before addin the view component (eg MY_WINDOW.removeAllComponents() before add).

In vaadin spring tutorial they used a Panel.setContent to set the view component so the old content gets replaced.

HTH
Marco

3

Huzzah!

That was exactly it! I’ve replaced my showView method with this:

public void showView(View view) { mainLayout.removeAllComponents(); mainLayout.addComponent((Component) view); } mainLayout is a CssLayout object declared earlier.I used that instead so I could preserve my top bar.

Marco Collovati has come to save the day! Is there a way for me to declare your answer THE answer, or otherwise give you a +1 other than the cute little thumbs up at the bottom of the post?