Binding for Polymer Template Components

Flow
1

I was looking through the documentation (https://vaadin.com/docs/v10/flow/creating-components/tutorial-component-basic.html and https://vaadin.com/docs/v10/flow/binding-data/tutorial-flow-field.html) for an example showing how to create polymer template components that can be bound using the binder. Do you have an example for how to do that?

2

Hi Martin,

At the moment, We have an example project which is showing binding the component from polymer template and some docs can also be found there, [Beverage Starter Flow]
(https://github.com/vaadin/beverage-starter-flow/tree/master/documentation). Maybe you can find what you want there.

BR

Zhe

3

Hi Zhe,

Thanks, I’ll take a look at it today.

Cheers
Martin

4

Have you found what you need? In the end your component just needs to implement the interface HasValue<…>. With that you can then bind if like a simple text field to your bean by using a binder, for example a list of elements

public class MyComponent extends PolymerTemplate<...> implements HasValue<List<...>> {
	public void setValue(List<...> value) {...}
	
	public List<...> getValue() {...}
	
	public Registration addValueChangeListener(...) {...} // also needed
}
5

Hi Stefan,

Got the binder to bind to the component alright, but not sure what the best practices is for getting a change event sent out so the binder will register changes - essentially what goes in the addValueChangeListener and best practice for getting the change event all the way from the DOM to the binder.

The Vaadin examples I could find only shows how to get the dom event to the java code.

6

The binder will register a value change listener in your component (by using the addValueChangeListener method you’ll have to implement) and use this to update the bound bean when there are changes. The easiest way is a simple, good old list with registered listeners, that you iterate and notify, when a value change occur.