java - 如何使用vaadin在java中使用routerLayout将页脚和页眉添加到其他视图答案

【问题标题】：How to add footer and header to other views using routerLayout in java using vaadinjava - 如何使用vaadin在java中使用routerLayout将页脚和页眉添加到其他视图
【发布时间】：2021-10-27 12:29:48
【问题描述】：

我创建了一个名为“Footer”的类，它只有一个标签。我也有一些视图，例如 loginview、orderview）。我想将该页脚添加到每个视图中。这是我到现在为止的代码。

@ParentLayout(OrderView.class)
public class footer extends VerticalLayout implements RouterLayout {
    public footer() {
     add(new Span("This text should be underneath the page in the views"));
    }
}

在您的下面有我的 orederview，我想在其中查看来自 footerclass 的文本。

@Route("order")
public class OrderView extends VerticalLayout implements RouterLayout {

    public OrderView (){
   // What am I supposed to code here to get that text from Footerclass.
        
    }
}

我想知道我错过了什么。感谢您的帮助。

【问题讨论】：

你的 footer() 构造函数并没有真正做任何有意义的事情。
您应该将该标签添加到您正在扩展的布局中。
jmizv，这就是练习所要求的......只需在我拥有的每个视图下方添加一个文本。
安娜，我该怎么做？谢谢
只是add(label);

标签： java vaadin vaadin-flow

【解决方案1】：

您对注释的使用是错误的。这是一个超级简化的大纲，您应该如何创建 MainLayout 和路由，该路由定义了在导航到该路由时显示在 mainlayout 中的组件。

public class MainLayout extends VerticalLayout implements RouterLayout {

    private Div childWrapper = new Div();

    public void MainLayout() {
        setSizeFull();
        Span header = new Span("This text should be above the page in the views");
        Span footer = new Span("This text should be underneath the page in the views");
        add(header);
        addAndExpand(childWrapper)
        add(footer);             
    }

    @Override
    public void showRouterLayoutContent(HasElement content) {
        childWrapper.getElement().appendChild(content.getElement());
    }
}

@Route(value = "order", layout = MainLayout.class)
public class OrderView extends VerticalLayout {

    public OrderView (){
    }
}

vaadin.com 页面上有关于路由器概念的video tutorial 对此进行了详细说明。

【讨论】：

大图，谢谢... 例如，在 orderView 类中是否有可能有多个布局？例如：@Route(value = "order", layout = MainLayout.class, layout = Seconsclass.class)?
我不确定您的目标是什么？但是你可以为一个类定义多个路由。一个带有@Route，其他路由带有@RouteAlias，是的带有@RouteAlias，您可以定义其他布局。观看我完整链接的教程。

【解决方案2】：

代替

new Label("This text should be underneath the page in the views");

试试

add(new Span("This text should be underneath the page in the views"));

在 Vaadin Flow 中，Label 组件旨在与另一个组件结合使用，而不是像在 Vaadin 8 和更早版本中那样添加独立文本。此外，每个组件都需要添加到布局中才能显示，仅创建它们是不够的。

不幸的是，LoginOverlay 没有用于在其中添加额外组件的 API，但有一张关于该功能的公开票，您可以对其竖起大拇指以增加权重，并且 cmets 中还提供了一种解决方法： https://github.com/vaadin/web-components/issues/626

【讨论】：

安娜，我添加了跨度，但我如何才能在登录视图中获取该文本？
抱歉，忘记添加那部分了。修改了答案。
我明白这一点。但我有另一个视图（orderview），它只是扩展verticallayout并实现RouterLayout......为了将页脚文本放入这个类（orderview）......我刚刚添加到构造函数中：addElement（Footer.class，“footer”） ...但它不起作用。
我只记得在 Vaadin Flow 中，LoginOverlay 确实是一个覆盖层（这个名字真的应该是一个提示），所以你不能使用那个解决方法。再次调整我的答案。