Vaadin Portal Page Flow

by Goondaba in


In researching using Vaadin portlets within Liferay for a project, I came upon the need to implement some sort of portlet-to-portlet navigation (or page flow, in static html lingo).  And after searching around for a bit, I couldn't find anything to my liking.

What I really wanted to do was have a containing portlet with views I'd setup in a CustomComponent, and then swap out that CustomComponent for a new one on the fly.  So, being familiar with the iOS way of doing things, I simply used an iOS-style push/pop view concept.

In your Vaadin application, setup a function that takes a new CustomComponent; this function will be responsible for swapping out the components in the containing portlet. Then, in your CustomComponents, you can simply push a new view onto the stack, or pop the current one. Example below:

Vaadin Application

package Wizardry;

import com.vaadin.Application;
import com.vaadin.ui.Label;
import com.vaadin.ui.Window;
import com.vaadin.ui.CustomComponent;
import java.util.Stack;
public class WizardryApplication extends Application {
Window window;
Stack<CustomComponent> viewStack = new Stack<CustomComponent>();
public void init() {
window = new Window();
setMainWindow(window);
pushNewView(new FirstView());
}
public void pushNewView(CustomComponent givenComp){
if(viewStack.size() > 0){
if(viewStack.peek() != null){
window.removeComponent((CustomComponent) viewStack.peek());
}
}
window.addComponent(givenComp);
viewStack.push(givenComp);
}
public void popView(){
if(viewStack.size() > 0){
if(viewStack.peek() != null){
window.removeComponent((CustomComponent) viewStack.pop());
}
window.addComponent(viewStack.peek());
}
}
}

Push a new view

WizardryApplication myApp = (WizardryApplication) getApplication();
myApp.pushNewView(new SecondView());

Pop the current view

WizardryApplication myApp = (WizardryApplication) getApplication();
myApp.popView();