DS Vaadin Flow Gradle Plugin May 29th, 2019

Layouts with Groovy HTML Templates

You can also specify your Polymer templates using a Groovy DSL.

The benefit of using Groovy instead of plain HTML is that you get the full Groovy runtime environment available for dynamically generating the templates.

The way you define a component using a Groovy templates is by defining two files; a TPL template file and a Java component class.

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

Groovy templates are translated into HTML using the Groovy MarkupTemplateEngine. For more information about the syntax have a look at this documentation.

my-component.tpl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
link (rel:'import', href: '../bower_components/polymer/polymer-element.html')

'dom-module' ( id:'my-component') {
    template {
        div (id:'caption', 'on-click' : 'sayHello') {
            yield '[[caption]]'
        }
    }
    script('''
        class MyComponent extends Polymer.Element {
            static get is() {
                return 'my-component'
            }
        }
        customElements.define(MyComponent.is, MyComponent);
    ''')
}

Once you have created a Groovy 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> {
  ...
}

Note that we reference the my-component.html HTML file in the @HTMLImport.

The Groovy templates are converted at build phase by the vaadinConvertGroovyTemplatesToHtml task.