CODEWITHSUNDEEP
javalayoutnestedvaadin
MrRene
MrRene

Reputation: 194

Vaadin: How to add 3 nested layouts

I'm having issues with my UI in vaadin at the moment. I have my views connected with RouterLayout like this:

My declarations before any class are:

AppView declaration

@Route(value = AppView.ROUTE)

OperationsView declaration

@Route(value = OperationsView.ROUTE, layout = AppView.class)

Operation1View declaration

@Route(value = Operation1View.ROUTE, layout = OperationsView.class)

The problem is the third layout doesn't display correctly. It takes the whole page when accesed and mess up everything in the UI when going to another page. Shouldn't the url be: /operations/operation1 and not /operation1? However I can't get it to work correctly. Am I missing something? Or having 3 nested layouts is not possible with vaadin?

A possible solution (?): Should I dismiss the third nested layout and add methods in the second layout to remove the contents in the container and display the items I want? I really don't care about url navigation in this one. This is the last thing I can come up with.

Thanks in advance

Upvotes: 2

Views: 657

Answers (1)

anasmi
anasmi

Reputation: 2652

Or having 3 nested layouts is not possible with vaadin?

It's possible. But are you implementing a RouterLayoutin both OperationsView and AppView classes?

Take a look into example here: Multiple parent layouts with @ParentLayout. It has a set-up pretty close to yours.

public class MainLayout extends Div implements RouterLayout {
}

@ParentLayout(MainLayout.class)
public class MenuBar extends Div implements RouterLayout {
    public MenuBar() {
        addMenuElement(TutorialView.class, "Tutorial");
        addMenuElement(IconsView.class, "Icons");
    }
    private void addMenuElement(Class<? extends Component> navigationTarget,
            String name) {
        // implementation omitted
    }
}

@Route(value = "tutorial", layout = MenuBar.class)
public class TutorialView extends Div {
}

@Route(value="icons", layout = MenuBar.class)
public class IconsView extends Div {
}

Shouldn't the url be: /operations/operation1 and not /operation1?

No, as in your @Router annotation you have specified that it's operation1. By specifying a layout you are defining the DOM structure, not the navigation route.From docs :

Sets the parent component for the route target component.When navigating between components that use the same layout, the same component instance is reused. Default layout target is the UI, but the layout should not be a custom UI as UI is a special class used to know where the route stack ends and no parent layouts should be involved. All layout stacks will be appended to the UI as it represents the Body element.

BUT If you want it to be operation\operation1, you should use a @RoutePrefix instead ParentLayout Route Control

It takes the whole page when accesed and mess up everything in the UI when going to another page

Could you show a screenshot or add some details how it messes up?

Edit:

It's actually turned out to be harder to implement than I anticipated, but this seems to work:

MainView.java

@Route("")
public class MainView extends VerticalLayout implements RouterLayout {
....

OperationsView.java

//This is needed if you want "operations" to be accessible on its own
@Route(value = "operations",layout = MainView.class)
@ParentLayout(MainView.class)
public class OperationsView extends VerticalLayout implements RouterLayout {

    Div content=new Div();
    public OperationsView(){
        System.out.println("operations view");
        add(new Label("operations view"));
        add(content);
    }
}

Operation1View.java

@Route(value="operation1",layout = OperationsView.class)
@RoutePrefix("operations")
public class Operation1View extends VerticalLayout {

    public Operation1View(){
        add(new Label("Operations view"));
    }
}

Upvotes: 3

Related Questions