Navigation in Vaadin.

Plain Vaadin applications do not have normal web page navigation as they usually run on a single page, as all Ajax applications do. Quite commonly, however, applications have different views between which the user should be able to navigate. The Navigator in Vaadin can be used for most cases of navigation. Views managed by the navigator automatically get a distinct URI fragment, which can be used to be able to bookmark the views and their states and to go back and forward in the browser history.

The Navigator class manages a collection of views that implement the View interface.

SO the class in which you are defining Navigation must implement with a View interface.

addView() is the method by which you can register Your View .

You can add your view at any point ,Your View must have name identifier and be added to a View .

Once registered, you can navigate to them with navigateTo().

Navigator manages navigation in a component container, which can be either a ComponentContainer (most layouts) or aSingleComponentContainer ( UI, Panel, or Window). The component container is managed through a ViewDisplay. Two view displays are defined: ComponentContainerViewDisplay and SingleComponentContainerViewDisplay, for the respective component container types.

Just one example and everything would be clear 

we would create 3 files for Navigation 

1.Login.java

2.main.java

3.help.java

By default we have our project name as our class name the file which is default created with init method in it so we would do such that at first the default view will be the login view . Then we would migrate to main View then we would migrate to help view.

1 st step:

• Give the project name say mynavigator and create vaadin 7 project.

• Now under Java resources src we would have class created  named MynavigatorUI in this class we will type all the requirements and the required stuff of Navigator

package com.example.mynavigator;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;

import com.vaadin.annotations.VaadinServletConfiguration;

import com.vaadin.navigator.Navigator;

import com.vaadin.navigator.Navigator.ComponentContainerViewDisplay;

import com.vaadin.server.VaadinRequest;

import com.vaadin.server.VaadinServlet;

import com.vaadin.ui.Button;

import com.vaadin.ui.Button.ClickEvent;

import com.vaadin.ui.Label;

import com.vaadin.ui.UI;

import com.vaadin.ui.VerticalLayout;

@SuppressWarnings("serial")

@Theme("mynavigator")

public class MynavigatorUI extends UI {

public Navigator navigator;

public static final String MAINVIEW = "main";

public static final String HELPVIEW = "help";

@WebServlet(value = "/*", asyncSupported = true)

@VaadinServletConfiguration(productionMode = false, ui = MynavigatorUI.class)

public static class Servlet extends VaadinServlet {

}

@Override

protected void init(VaadinRequest request) {

final VerticalLayout layout = new VerticalLayout();

layout.setMargin(true);

setContent(layout);

ComponentContainerViewDisplay viewDisplay= new ComponentContainerViewDisplay(layout);

navigator=new Navigator(UI.getCurrent(),viewDisplay);

navigator.addView("", new LoginView());

navigator.addView(MAINVIEW, new MainView());

navigator.addView(HELPVIEW, new HelpView());

}

}

Explanation of above file:
See at first we have declared the Navigator navigator; We will instantiate it later then we have provided an identifier to the View as MAINVIEW = "main"; and HELPVIEW = "help";

Now in init() method we would take a Layout named VerticalLayout create an object set it in ComponentContainerViewDisplay as in Which all components get fit and navigator is used to navigate container .

Now instantiating Navigator  the arguments as parameters are the current view and the view replaced by ComponentContainer.

By addView() method we van add View for each View we have to Create New class here we have Login View as default then we Will have Main View again from the main we  will have  Help View.

 The arguements of addView(the string as Identifier ,the Constructor of particular class);


Loginview.java

import com.vaadin.navigator.View;

import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;

public class LoginView extends VerticalLayout implements View {

public LoginView()
{
setSizeFull();
setSpacing(true);

Label label= new Label("Enter your information below to log in.");
TextField username= new TextField("username");
TextField password= new TextField("password");

addComponent(label);
addComponent(username);
addComponent(password);
addComponent(loginButton());

}

@Override
public void enter(ViewChangeEvent event) {
// TODO Auto-generated method stub

}

private Button loginButton(){
Button button = new Button("Log In", new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
getUI().getNavigator().navigateTo(MynavigatorUI.MAINVIEW);


}
});
return button;

}
}

Explanation of this File:

This is our First View and see in MynavigatorView how I have mentioned this View in the argument of addView() ,Now this class will extends VerticalLayout implements View .For no further errors.

So initially the Constructor of  LoginView will be called here we have taken some Components which will be displayed and a method is called named loginButton() guys the return type of this method is Button else the addComponent will throw error.

In this method instantiate a button and add Listener as we want to fire an event so we have to register and in it we will use method navigateTo(classname.String name). By doing this the control will be transfered to MainView . DO the Same thing in Rest of file and through navigateTo(give the View which you want to Navigate).


MainView.java

import com.vaadin.navigator.View;

import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Button.ClickEvent;

public class MainView extends VerticalLayout implements View {
 

public MainView(){
setSizeFull();
setSpacing(true);
Label label= new Label("Entered in mainview.");
addComponent(headingLabel());
addComponent(mainButton());
}


@Override
public void enter(ViewChangeEvent event) {
Notification.show("Showing view: Main!");

}


private Label headingLabel() {
return new Label("Main");
}

private Button mainButton(){
Button button = new Button("mainView", new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
getUI().getNavigator().navigateTo(MynavigatorUI.HELPVIEW);

}
});
return button;
}

}


HelpView.java

import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Button.ClickEvent;

public class HelpView extends VerticalLayout implements View {



HelpView()
{
setSizeFull();
setSpacing(true);
addComponent(helpbutton());



}

@Override
public void enter(ViewChangeEvent event) {
Notification.show("Showing view: help!");
}



private Button helpbutton(){
Button button = new Button("HelpView", new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
getUI().getNavigator().navigateTo(MynavigatorUI.ADD if you have any View here to navigate to and the cycle continuous );

}
});
return button;


}

}