java - Vaadin:如何添加 3 个嵌套布局

Question

目前我在 vaadin 中的 UI 遇到问题。我的 View 与 RouterLayout 连接如下:

• -AppView(主 UI)|网址:/
• --OperationsView(AppView 中容器内的嵌套布局)|网址:/操作
• ---Operation1View(OperationsView 中容器内的嵌套布局)|网址:/操作1 <- 这不起作用

我在任何类(class)之前的声明是:

AppView声明

@Route(value = AppView.ROUTE)

OperationsView声明

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

操作1查看声明

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

问题是第三个布局无法正确显示。访问时它会占用整个页面，而当转到另一个页面时它会弄乱 UI 中的所有内容。 url 不应该是:/operations/operation1 而不是/operation1 吗？但是我无法让它正常工作。我错过了什么吗？或者 vaadin 不可能有 3 个嵌套布局？

一个可能的解决方案(？):我应该忽略第三个嵌套布局并在第二个布局中添加方法以删除容器中的内容并显示我想要的项目吗？我真的不关心这个中的 url 导航。这是我能想到的最后一件事。

提前致谢

Answer 1

Or having 3 nested layouts is not possible with vaadin?

这是可能的。但是您是否在 OperationsView 和 AppView 类中实现 RouterLayout ？

查看此处的示例:Multiple parent layouts with @ParentLayout 。它的设置非常接近您的设置。

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?

否，如您在 @Router 注释中指定的那样，它是 operation1。通过指定布局，您正在定义 DOM 结构，而不是导航路线。来自 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.

但是如果您希望它是operation\operation1，则应该使用@RoutePrefix来代替ParentLayout Route Control

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

您可以显示屏幕截图或添加一些详细信息吗？

编辑:

---

事实证明它比我预期的更难实现，但这似乎有效:

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"));
    }
}