Using TPTMultiView

Flow
1

I am new to Vaadin and I am looking for Multipage solution for my application. Can I get some sample code on TPTMultiView to have multipage in my application.

2

Hi Prabu,

as for TPTMultiView the generic way is as follows:

  1. Create a view controller:
 private TPTMultiView controller = new TPTMultiView ();

or via

 private TPTMultiView controller = new TPTMultiView ( true );

to allow automatic management of web browser address bar (see below)

  1. Add and position it to the root layout or window - TPTMultiView subclasses VerticalLayout
controller.setSizeFull();
addComponent(controller);
  1. Add pages (views) to your controller. You can add any Vaadin component as is, but if you want to catch view lifecycle events in your pages, they must also implement a TPTView interface, but this is optional.
controller.addView ( "view1", new MyPanel() );
controller.addView ( "view2", new Button ("Click me" ) );
  1. Now from any place of your application, you can switch from one view to another by calling
controller.switchView ( "view name", "view parameters" );

Also, if you have create the TPTMultiView with the “true” optional parameter in the constructor, it will automatically install the URIFragmentUtility of Vaadin and will track current view status in browser’s address window. You can also the switch to the desired view by chaning the applicaiton url: http://localhost:8080/myapp#viewname/viewparameter

  1. If your views (current one and one being swithced) are implementing the TPTView interface, its methods will be automatically called by the controller, so current view will know that it is being closed and new view will know that is being displayed and can perform some data loading, for instance.

For more information you can check the
TPT demo
 - go to Widgets->View Controller section. And also check the TPT developer reference (downloadable from the same demo app).

Feel free to ask here if something is unclear.

Best,
Dmitri

3

Hi Dmitri,

Thanks for the sample and the detailed explanation.

In my application, I have created multiple class files extending Panel. Every Panel will do set of activityies. For example LoginPanel will perform login validation and say another class TransactionViewPanel displays transaction details.

In my main Application class

public class TestApplication extends Application
{
private TPTMultiView controller = new TPTMultiView (true);

@Override
public void init() 
{
	Window mainWindow = new Window("TestApplication");
	mainWindow.addComponent(controller );

            controller.addView ( "Login", new LoginPanel() );
            controller.addView ( "Txns", new TransactionViewPanel () );
	setMainWindow(mainWindow);
}

}

In my case, LoginPanel and TransactionViewPanel is in a separate java class file. What I want to achieve is, In the LoginPanel class on successful user validation, I want to display the TransactionViewPanel.

So what I am thinking is, to achieve my objective I will pass the controller object to LoginPanel object in the main application class and on successful login validation, I will call controller.switchView(“Txns”) inside the LoginPanel class.

Is it the right way to use TPTMultiView? . Please clarify

Thanks
Prabu R

4

Sure, from inside one of a view, you can get a controller instance and call switchView, this is normal.

The only thing wich concerns me in your usecase is security - one may just type the proper URL and pass to “Txns” view without logging in. So, Id recommend in this case:

  1. use empty constructor for TPTMultiView or “false” parameter - to disable URL management. this way, views switching can be made only by a switchView method invocation.

  2. Implement TPTView in yout TransactionViewPanel, so when this view will be activated, the viewActivated method will be invoked where you can check the security conditions.

5

Thanks a lot. it is working as expected.