Construting views with different layouts

Vaadin 6 / 7 / 8 Framework UI
1

Hello All,
I’m trying to create a simple application with login view and couple of other views. The login view has single layout and only the login component. Other views (view1 and view2) have a header, left navigation and content region. I’m using a single UI class to load the login page first and redirect to view1 on successful navigation. What are the different ways to achieve a common seperate layouts for multiple views, one for login and other for view1 and view2(header,left nav and content region)?

  1. Should two UI classes be used? If so, how navigation between each UI and views is done? how to persist session data between two UI’s?
  2. Should I create a common layout class and add that in each views?
  3. What are the other possible ways to acheive this?

The link,
https://www.youtube.com/watch?v=YGar0pVeiz4
 explains creating common layout in the UI.

Appreciate your thoughts on this.
-Jagan

2

Not sure if I understand your question. Why should you need several UIs? Just decompose your views to several fragments (Java classes for different panels, abstract classes to inherit common behaviour) and construct your views with them.

3

In this case, shouldn’t I add the common components for each view every time? I want to create the common layout separately and include view as part of common layout.

private HorizontalLayout headerLayout;
private HorizontalLayout navContentLayout;
private ContentLayout contentLayout;
private NavigationLayout navigationLayout;

protected void init(VaadinRequest request) {
        LOGGER.info("----AdminToolUI----init()---");
        getPage().setTitle("Quant Admin Tool");

        final VerticalLayout root = createTwoColumnPageLayout();
        setContent(root);
        root.setSizeFull();
        
        Navigator navigator = new Navigator(this, contentLayout);
        navigator.addProvider(viewProvider);
        navigator.setErrorView(ErrorViewImpl.class);
        getUI().getNavigator().navigateTo(LoginView.NAME);
}

private VerticalLayout createTwoColumnPageLayout() {
        VerticalLayout verticalLayout = new VerticalLayout();
        
        headerLayout = createHeaderLayout();
        navContentLayout = createCenterLayout();
        
        //Add components to root and align
        verticalLayout.addComponents(headerLayout, navContentLayout);
        headerLayout.setSizeFull();
        navContentLayout.setSizeFull();
        verticalLayout.setExpandRatio(headerLayout, 0.15f);
        verticalLayout.setExpandRatio(navContentLayout, 0.85f);
        
        return verticalLayout;
    }

private HorizontalLayout createCenterLayout(){
        HorizontalLayout horizontalLayout = new HorizontalLayout();
        
        //Add centerLayout components
        navigationLayout = new NavigationLayout();
        contentLayout = new ContentLayout();

        horizontalLayout.addComponents(navigationLayout, contentLayout);
        navigationLayout.setSizeFull();
        contentLayout.setSizeFull();
        horizontalLayout.setExpandRatio(navigationLayout, 0.2f);
        horizontalLayout.setExpandRatio(contentLayout, 0.8f);
        
        return horizontalLayout;
    }
4

Consider using an MVC pattern. The UI class should be quite empty exept for some boot-up code. Make a Java class per view. If they have things in common, refactor them into seperate classes for reuse. Make a Java class per controller. Let the controllers open and close their views by adding and removing them from the UI.