Creating a Simple Component Using the Polymer Template API
Polymer templates are deprecated. Lit templates are recommended instead.
Creating the Template File on the Client Side
The first step is to create the Polymer JavaScript template file on the client side in frontend/src/hello-world.js
.
This file contains the view structure.
Example: Creating the hello-world.js
JavaScript Polymer template file.
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@polymer/paper-input/paper-input.js';
import '@vaadin/button';
import '@vaadin/text-field';
class HelloWorld extends PolymerElement {
static get template() {
return html`
<div>
<vaadin-text-field id="firstInput"></vaadin-text-field>
<paper-input id="secondInput"></paper-input>
<vaadin-button id="helloButton">Click me!</vaadin-button>
</div>
`;
}
static get is() {
return 'hello-world';
}
}
customElements.define(HelloWorld.is, HelloWorld);
-
This is the JavaScript ES6 module that defines a Polymer template.
-
The
is()
function defines the name of the HTML tag that’s used to reference this module. The tag name should contain at least one dash (-
). For example,hello-world
is a valid tag name, buthelloworld
isn’t. -
The imported dependencies are:
-
PolymerElement
(from the Polymer library): this is the required superclass of all Polymer templates; -
vaadin-text-field
,vaadin-button
andpaper-input
components; -
html
for inline DOM templating.
-
Note
|
The return statement in the render method needs to end with a semi-colon (; ) for the parser to find the template contents.
|
Creating the Java Template Class
To use the client-side Polymer template on the server side, you need to create an associated Java class that extends the PolymerTemplate
class.
Example: Creating the HelloWorld
Java template class.
@Tag("hello-world")
@NpmPackage(value = "@polymer/paper-input", version = "3.0.2")
@JsModule("./src/hello-world.js")
public class HelloWorld extends PolymerTemplate<HelloWorld.HelloWorldModel> {
/**
* Creates the hello world template.
*/
public HelloWorld() {
}
public interface HelloWorldModel extends TemplateModel {
}
}
-
The
@Tag
annotation name matches the return value of theis()
function (static getter) in the JavaScript template. This ensures that the tag name is the same on the server and the client. -
The
@JsModule
annotation binds the Java class to thehello-world.js
template class by specifying the relative path to the JavaScript module in thefrontend
folder in the project root. You can import multiple JavaScript resources using the@JsModule
annotation, if needed. -
The
@NpmPackage
annotation declares a dependency on thepaper-input
npm package:@polymer/paper-input 3.0.2
. This annotation can be used to declare a dependency on any npm package.
BF7B633A-FD34-4762-A82E-D5B921B0F042