title | order | layout |
---|---|---|
PolymerTemplate, Combining Templates and Binders |
11 |
page |
Usage of polymer based templates is deprecated since Vaadin 18 and we recommend using Lit based templates instead.
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;
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;
}