tutorial-template-parent-layout.asciidoc

title	order	layout
PolymerTemplate, Using Parent Layout	19	page

PolymerTemplate, Using Parent Layout

Usage of polymer based templates is deprecated since Vaadin 18 and we recommend using Lit based templates 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 is 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:

• Router Layouts and Nested Router Targets for more about parent views.

• Creating a Simple Component Using the Template API for general information about the PolymerTemplate API.