CODEWITHSUNDEEP
user-interfaceuinavigationcontrollervaadin
carora3
carora3

Reputation: 466

VAADIN 7: Navigating sub views

How would I navigate between sub-views in Vaadin UI. I want my header on the website to stay static like a master page and the content view to change using navigation. How can I do that in Vaadin.

Upvotes: 1

Views: 1967

Answers (2)

shoguren
shoguren

Reputation: 137

If in you application you need to support browser's bookmarks and navigation (backward and forward buttons) you'll need to use URIFragments, described on the book of vaadin.

A common way of using it is with a Navigator:

public class NavigatorUI extends UI {
Navigator navigator;
protected static final String MAINVIEW = "main";

@Override
protected void init(VaadinRequest request) {
    getPage().setTitle("Navigation Example");

    // Create a navigator to control the views
    navigator = new Navigator(this, this);

    // Create and register the views
    navigator.addView("", new StartView());
    navigator.addView(MAINVIEW, new MainView());
} }


Your views will need to implemente the View interface as described in the book of vaadin

And if you use Spring, you could also use an addon, like SpringVaadinIntegration or vaadin4spring to make this easier and each of them have several other advantages.

Upvotes: 0

shoguren
shoguren

Reputation: 137

Well you could simply design your UI with a header (and other stuff if needed) and a component that will act as a placeholder for the changing content. Then I add a method that receives the new content to display and puts it inside the place holder. Here is some code:

public class MyUI extends UI implements ErrorHandler {

// I usually use a layout as a place holder
private VerticalLayout content;
...

    @Override
    public void init(VaadinRequest request) {
        ...
        content = new VerticalLayout();
        content.setSizeFull();

        final VerticalLayout layout = new VerticalLayout(header, menu, content, footer);
        layout.setMargin(true);
        setContent(layout);
    }

    public void changeContent(Component view) {
        content.removeAllComponents();
        content.addComponent(view);
        content.setComponentAlignment(view, Alignment.MIDDLE_CENTER);
    }

}

Upvotes: 2

Related Questions