Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Using Parent Layout

Polymer templates are deprecated. Lit templates are recommended instead.

A PolymerTemplate can be used as a parent layout by using the <slot> in the position where the child view should be displayed.

Example: JavaScript Polymer template showing the actual view, MainLayout, below a heading and menu.

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class MainLayout extends PolymerElement {
  static get template() {
    return html`
      <h1>Site title</h1>
      <div class="menu">...</div>
      <!-- child content comes here -->
      <slot></slot>
    `;
  }

  static get is() {
    return 'main-layout';
  }
}

customElements.define(MainLayout.is, MainLayout);

To use this template file, you need a basic Java template class that’s mapped to the JavaScript template file (using the @JsModule annotation) and that implements the RouterLayout interface.

Example: Mapped Java template class that imports the JavaScript template and implements RouterLayout.

@Tag("main-layout")
@JsModule("./com/example/main-layout.js")
public class MainLayout extends PolymerTemplate<TemplateModel>
        implements RouterLayout {
}

  • The showRouterLayoutContent(HasElement) method in the RouterLayout interface has a default implementation. This makes it unnecessary to write additional code, but you can override and re-implement it, if necessary.

You can now use MainLayout as a parent layout using the @Route or @ParentLayout annotations.

Example: Using the layout parameter in the @Route annotation to mark MainLayout as the parent layout.

@Route(value="editor", layout=MainLayout.class)
public class Editor extends Div {
}
@ParentLayout(MainLayout.class)
public class MenuBar extends Div {
}

See the following resources for related information:

24E23F32-0623-456B-8F09-EE90F9605FA4