代码之家  ›  专栏  ›  技术社区  ›  Tyvain

Vaadin:在页眉和页脚之间显示RouterLink视图

  •  0
  • Tyvain  · 技术社区  · 6 年前

    我有一个简单的布局:

    @StyleSheet("frontend://styles.css")
    @Route("")
    public class MainView extends Main implements RouterLayout {
        private static final long serialVersionUID = 1L;
        public MainView(@Value("${env}") String env, @Autowired BuildProperties buildProperties) {
            HeaderComponent header = new HeaderComponent(env, Application.APP_NAME, buildProperties.getVersion());
            FooterComponent footer = new FooterComponent(env, buildProperties.getVersion())
            add(header, footer);
        }
    }
    

    顶部是页眉,底部是页脚。

    我想添加以下视图:

    @Route(layout = MainView.class, value = "secured/ue")
    public class UEView extends Article {
    // many stuff
    }
    

    单击链接(或使用路由“安全/ue”)时显示此视图:

    问题是UE视图显示在“页脚”之后。

    main{
    display: grid;
    grid-template-areas:
    "header"
    "article"
    "footer";
    }
    

    我该怎么做?显示页眉和页脚之间的视图??

    0 回复  |  直到 6 年前
        1
  •  3
  •   Tatu Lund    6 年前

    您需要在主视图中为您的文章设置一个占位符,例如Div contentArea下方。除此之外,还需要重写showRouterLayoutContent(..)方法。

    @Route("")
    public class MainView extends Main implements RouterLayout {
        private Div contentArea = new Div();
    
        public MainView(@Value("${env}") String env, @Autowired BuildProperties buildProperties) {
            HeaderComponent header = new HeaderComponent(env, Application.APP_NAME, buildProperties.getVersion());
            FooterComponent footer = new FooterComponent(env, buildProperties.getVersion())
            add(header, contentArea, footer);
        }
    
        @Override
        public void showRouterLayoutContent(HasElement content) {
           contentArea.getElement().appendChild(content.getElement());
        }
    
    }
    
    推荐文章