It should be possible to set the initial model property value from the client side

[vlukashov]

As a developer I want set the initial value of some model properties from the client side. Currently (as of alpha 20 of Flow 1.0) an attempt to do so leads to an inconsistent behavior (even though tere was an attempt to fix it earlier: https://github.com/vaadin/flow/issues/2897)

<template>
    <p>[[message]]</p>
    <p>client-side model property value is [[_formatBoolean(checkboxChecked)]]</p>
    <vaadin-checkbox checked="{{checkboxChecked}}">
        a vaadin-checkbox bound to a model property
    </vaadin-checkbox>
</template>

public interface ExampleModel extends TemplateModel {
    Boolean getCheckboxChecked();
}

When this page loads, an observer for the client-side property detects two changes:

checkboxChecked changed from 'undefined' to 'false'
checkboxChecked changed from 'false' to 'null'

The server-side value of the checkboxChecked property depends on the signature of the property getter in the template model:

• Boolean getCheckboxChecked() -> null
• Boolean isCheckboxChecked() -> com.vaadin.flow.templatemodel.InvalidTemplateModelException: com.vaadin.starter.skeleton.ExampleTemplate$ExampleModel has no property named checkboxChecked (or it has been excluded)
• Boolean isCheckboxChecked(); void setCheckboxChecked(Boolean b); -> com.vaadin.flow.templatemodel.InvalidTemplateModelException: Template Model does not support: isCheckboxChecked with return type: java.lang.Boolean with parameters:
• boolean getCheckboxChecked() -> false
• boolean isCheckboxChecked() -> false

The source code of the demo project is attached: platform18-model-properties.zip

Expected behavior

• in this case the value of the checkboxChecked property on the client side should not change from false to null, it should remain false
• the value of the checkboxChecked property on the server side should be false instead of null
• there should not be differences between Boolean and boolean in this case

(or there should be clear documentation explaining the actual behavior)

[stefanuebe]

Similar case here: I have a template with a simple String property, that I want to set initially client side. As soon as I "link" the property in my server side TemplateModel implementation, the client side set value is overriden.

<dom-module id="project-list-accumulate">
    ...
    <h5 id="caption" class="graph-title">[[caption]]</h5>
    ...
    <script>
        class ProjectListAccumulate extends Polymer.Element {
            static get is() {
                return 'project-list-accumulate';
            }

            static get properties() {
                return {
                    caption: String
                }
            }
        }

        customElements.define(ProjectListAccumulate.is, ProjectListAccumulate);
    </script>
</dom-module>

This element is called like for example

<project-list-accumulate id="accumulate-project" caption="Total project"></project-list-accumulate>

The server side Java model is

protected interface ProjectListAccumulateModel extends TemplateModel {
    void setCaption(String caption);
}

When I remove the method setCaption() the client side set value is displayed.