tutorial-polymer-template-and-binder.asciidoc

title	order	layout
PolymerTemplate, Combining Templates and Binders	11	page

PolymerTemplate, Combining Templates and Binders

Usage of polymer based templates is deprecated since Vaadin 18 and we recommend using Lit based templates instead.

Creating the Template Component

The first step is to create the JavaScript Polymer template and its mapped Java class.

Example: Creating the user-form JavaScript Polymer template.

import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-form-layout/vaadin-form-layout.js';
import '@vaadin/vaadin-text-field/vaadin-text-field.js';
import '@vaadin/vaadin-text-field/vaadin-text-area.js';
import '@vaadin/vaadin-checkbox/vaadin-checkbox.js';
import './form-buttons-bar.js'

class UserForm extends PolymerElement {
    static get template() {
        return html`
            <style>
            </style>
            <vaadin-form-layout id="form">
                <vaadin-text-field id="email" label="Email (login)" colspan="2"></vaadin-text-field>
                <vaadin-text-field id="first-name" label="First Name"></vaadin-text-field>
                <vaadin-text-field id="last-name" label="Last Name"></vaadin-text-field>
                <vaadin-text-area id="comments" label="Comments"></vaadin-text-area>
            </vaadin-form-layout>
            <form-buttons-bar id="action-buttons"></form-buttons-bar>`;
    }

    static get is() {
          return 'user-form';
    }
}

customElements.define(UserForm.is, UserForm);

Example: Creating the mapped UserForm Java template class.

@Tag("user-form")
@JsModule("./src/user-form.js")
public class UserForm extends PolymerTemplate <UserForm.FormComponentModel> {

  @Id("email")
  private TextField email;

  @Id("first-name")
  private TextField firstName;

  @Id("last-name")
  private TextField lastName;

  @Id("comments")
  private TextArea comment;

  @Id("action-buttons")
  private FormButtonsBar actionButtons;

Creating and Linking the Binder

Creating the Main View

First, we create the MainView Polymer template component. This component displays a grid of users and our new UserForm component. For the grid, we use the Vaadin Grid component

Here is the result.

Example: Creating the main-view JavaScript Polymer template.

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

class MainView extends PolymerElement {
    static get template() {
        return html`
            <style>
            </style>
            <div id="main-container">
                <vaadin-grid id="users-grid"></vaadin-grid>
                <user-form id="user-form"></user-form>
            </div>`;
    }

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

customElements.define(MainView.is, MainView);

Example: Creating the mapped MainView Java template class.

@Tag("main-view")
@JsModule("./src/main-view.js")
@Route("")
public class MainView extends PolymerTemplate<TemplateModel> {

    @Id("user-form")
    private UserForm userForm;

    @Id("users-grid")
    private UsersGrid usersGrid;
}