Using Parent Layout

Warning

Polymer support has been deprecated since Vaadin 18 (released in November 2020), in favor of faster and simpler Lit templates. The built-in support for Polymer templates has been removed and is only available as a commercial add-on. However, a free conversion tool is available to assist in converting Polymer templates to Lit.

Read more about setting up the commercial Polymer templates addon in the Upgrade Guide.

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

You can see in the example the 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.

This example shows a 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.

This example is 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 Router Layouts and Nested Router Targets for more about parent views, and Creating a Simple Component Using the Template API for general information about the PolymerTemplate API.

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

Documentation

Documentation

Using Parent Layout