Vaadin 7 Navigator Questions

Vaadin 6 / 7 / 8
1

Hi all,

currently I’m playing around with the Vaadin 7 Navigator and have some questions:

I have several views that shall be linked in sequence, each with an own sub url.
I have a
FirstView
 with a link to a
SecondView
 and this does have a link to the
ThirdView
.
The URL should be like http://localhost:8080/vaadin7demo/secondView/thirdView

I used the example from the blog:

MainUI:


public class MyVaadinUI extends UI {

  @Override
  protected void init(VaadinRequest request) {
    // Create Navigator, use the UI content layout to display the views
    Navigator navigator = new Navigator(this, this);

    // Add some Views
    navigator.addView("", new FirstView()); // no fragment

    navigator.addView(SecondView.NAME, SecondView.class);
    navigator.addView(SecondView.NAME + "/" + ThirdView.NAME, ThirdView.class);
    navigator.addView(SecondView.NAME + "/" + ThirdView.NAME + "/" + ForthView.NAME, ForthView.class);

  }
}

FirstView:

public class FirstView extends Panel implements View {

  public static final String NAME = "";

  public FirstView() {

    Link lnk = new Link("Link to second page", new ExternalResource("#!" + SecondView.NAME));

    setContent(lnk);

  }

  @Override
  public void enter(ViewChangeEvent event) {}

}

SecondView:

public class SecondView extends Panel implements View {

  public static final String NAME = "secondView";

  private static int count = 1;

  public SecondView() {
    String link = SecondView.NAME + "/" + ThirdView.NAME;
    Link lnk = new Link("Link to page 3", new ExternalResource("#!" + link));
    Label label = new Label("Hello on the second view");
    VerticalLayout layout = new VerticalLayout();
    layout.addComponent(label);
    layout.addComponent(lnk);
    setContent(layout);
  }

  @Override
  public void enter(ViewChangeEvent event) {}

}

ThridView:

public class ThirdView extends Panel implements View {

  public static final String NAME = "thirdView";

  public ThirdView() {
    String link = SecondView.NAME + "/" + ThirdView.NAME + "/" + ForthView.NAME;
    Link lnk = new Link("Link to page 4", new ExternalResource("#!" + link));
    Label label = new Label("Now you are on the view number 3 ... ");
    VerticalLayout layout = new VerticalLayout();
    layout.addComponent(label);
    layout.addComponent(lnk);
    setContent(layout);
  }

  @Override
  public void enter(ViewChangeEvent event) {

  }

}

With that setup the URL would be http://localhost:8080/vaadin7demo/#!secondView/thirdView (but with “#!”).

Is the way I build up the URL in the MyVaadinUI class correctly? Or is there an easier option?
Is it possible to eliminate the “#!” in the URL?

Thanks for your help!

2

Hi,

The navigator in Vaadin 7 uses URI fragments (#!/hello/world) to avoid page reloads when moving from one view to another. There are plans on supporting plain URLs also using session history management (not available in Internet Explorer <= 10, Android and maybe other devices/browsers) but this has not been developed yet. Track http://dev.vaadin.com/ticket/9364 for progress updates or to contribute.

3

Hi, thanks for your reply, I will follow up your link.

Back to my first question:
Do you think the way I built the navigation is correctly, or is there an easier way to do?

4

Hi guys, i don’t know if correct my question here but, i’d like to use Navigator but my approach is to use differents view but defined in differents class, and if i use this approach, how can y use Navigator

5

If I understood your question correctly, you can simply call the addView() method of your Navigator and give it a name for the view and a view instance (this can be another class that extends View).

For example:

Navigator navigator = new Navigator(myUI, myContainer);

navigator.addView("main", new MainView());

You should then be able to call the code below to navigate to your view:

UI.getCurrent().getNavigator.navigateTo("main");

You can get more detail about this in Chapter 11.9 of the Vaadin book:
https://vaadin.com/book

6

Thanks!!