polymer-template-based-view.asciidoc

title	order	layout
polymer template based view	1	page

Polymer Template Based View

ReviewsList is a Polymer template based view class. For more information about Polymer templates, see Creating A Simple Component Using the Template API.

In this view, the list of reviews will be shown under a search bar and an "add a new review" button. The following sections will introduce the main concepts used in ReviewsList.java and reviews-list.html.

Data binding in PolymerTemplate

In the reviews list, every review is shown separately. In order to do this, PolymerTemplate provides a way to generate elements based on a list of items using the repeater template, dom-repeat.

<template is="dom-repeat" items="[[reviews]]">
    <div class="review">
        <div class="review__rating">
            <p class="review__score" data-score$="[[item.score]]">[[item.score]]</p>
            <p class="review__count">
                [[item.count]]
                <span>times tasted</span>
            </p>
        </div>
        <div class="review__details">
            <h4 class="review__name">[[item.name]]</h4>
            <p class="review__category" style$="--category: [[item.category.id]];">[[item.category.name]]</p>
        </div>
        <div class="review__date">
                <h5>Last tasted</h5>
                <p>[[item.date]]</p>
        </div>
        <vaadin-button on-click="edit" class="review__edit" theme="tertiary">
            <iron-icon icon="lumo:edit"></iron-icon><span>Edit</span>
        </vaadin-button>
    </div>
</template>

And on the Java code side, a method is declared in the template model interface for setting the list of items.

public static interface ReviewsModel extends TemplateModel {
    @Encode(value = LongToStringEncoder.class, path = "id")
    @Encode(value = LocalDateToStringEncoder.class, path = "date")
    @Encode(value = LongToStringEncoder.class, path = "category.id")
    void setReviews(List<Review> reviews);
}

There are two data types (Long and LocalDate) which are not supported by TemplateModel directly, so we need to encode them by using the @Encode annotation. For more about ModelEncoders, see Using Model Encoders with a PolymerTemplate Model.

Note	The name of the setter method should match the property name used in the template, reviews in our case.

You can get more information about "Data Binding in PolymerTemplate" in the tutorial Creating Template Contents Dynamically Based on a List of Items.

Binding components from the template

In the HTML template, we have a text-field and a button with the corresponding identifiers.

<vaadin-text-field id="search" class="view-toolbar__search-field" autocapitalize=off>
    <iron-icon icon="lumo:search" slot="prefix"></iron-icon>
</vaadin-text-field>
<vaadin-button id="newReview" class="view-toolbar__button" theme="primary">
    <iron-icon icon="lumo:plus" slot="prefix"></iron-icon>
    <span>New review</span>
</vaadin-button>

We can use these components in our server-side code by mapping them with @Id annotation.

@Id("search")
private TextField search;
@Id("newReview")
private Button addReview;

For more about this topic, see Binding Components from a PolymerTemplate.

Listening for user events from the template

At the right side of each list row, there is an edit button for users to edit the current review. To handle the click event from each button, we need to define a method with the event name, annotated with @EventHandler.

@EventHandler
private void edit(@ModelItem Review review) {
    openForm(review, AbstractEditorDialog.Operation.EDIT);
}

You can check out Handling User Events in a PolymerTemplate for more information about sending events from template to the server.