DS Vaadin Flow Gradle Plugin May 29th, 2019

Layouts with Polymer HTML Templates

Polymer templates allows you to define a custom components structure by using a declarative HTML snippet.

The way you define a component using a Polymer template is by defining two files; a HTML template file and a Java component class.

The DS Vaadin Flow Gradle Plugin expects the Polymer templates to be placed in the src/main/webapp/frontend/templates directory.

my-component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="${componentTag}">
    <template>
        <div id="caption" on-click="sayHello">[[caption]]</div>
    </template>
    <script>
        class ${componentName} extends Polymer.Element {
            static get is() {
                return '${componentTag}'
            }
        }
        customElements.define(${componentName}.is, ${componentName});
    </script>
</dom-module>

Once you have created a Polymer template you link it with a Vaadin component like this:

MyComponent.java

1
2
3
4
5
@Tag("my-component")
@HtmlImport("frontend://templates/my-component.html")
public class MyComponent extends PolymerTemplate<Div> {
  ...
}