title | order | layout |
---|---|---|
polymer template based view |
1 |
page |
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
.
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.
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.
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.