Vaadin：如何添加 3 个嵌套布局

Question

我目前在 vaadin 中遇到 UI 问题。我的视图与 RouterLayout 相关联，如下所示：

-AppView(主UI) | url: /
--OperationsView（AppView中容器内的嵌套布局）| url: /操作
---Operation1View（OperationsView 中容器内的嵌套布局）| url: /operation1 <- 这不起作用

我在 class 之前的声明是：

AppView声明

@Route(value = AppView.ROUTE)

OperationsView 声明

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

Operation1View 声明

@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。通过指定 layout，您定义的是 DOM 结构，而不是导航 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 如果你想让它成为 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"));
    }
}

Vaadin：如何添加 3 个嵌套布局

Vaadin: How to add 3 nested layouts

java

layout

nested

vaadin