Vaadin Tabs based component created using Designer doesn't show data when bound using its Java companion file

Question

Below is the Vaadin Designer code for simple tab functionality

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-tabs/src/vaadin-tabs.js';
import '@vaadin/vaadin-tabs/src/vaadin-tab.js';

class TestUi extends PolymerElement {

    static get template() {
        return html`
<style include="shared-styles">
                :host {
                    display: block;
                    height: 100%;
                }
            </style>
<vaadin-tabs theme="equal-width-tabs" id="vaadinTabs">
 <vaadin-tab id="vaadinTab">
  Product Overview
 </vaadin-tab>
 <vaadin-tab id="vaadinTab1">
   Product DetailView
 </vaadin-tab>
 <vaadin-tab id="vaadinTab2">
   Reports
 </vaadin-tab>
</vaadin-tabs>
`;
    }

    static get is() {
        return 'test-ui';
    }

    static get properties() {
        return {
            // Declare your properties here.
        };
    }
}

customElements.define(TestUi.is, TestUi);

It's corresponding Java companion file looks as below

import com.vaadin.flow.component.polymertemplate.Id;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.templatemodel.TemplateModel;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.polymertemplate.PolymerTemplate;

/**
 * A Designer generated component for the test-ui template.
 *
 * Designer will add and remove fields with @Id mappings but
 * does not overwrite or otherwise change this file.
 */
@Tag("test-ui")
@JsModule("./src/productdetailview/test-ui.js")
public class TestUi extends PolymerTemplate<TestUi.TestUiModel> {

    @Id("vaadinTabs")
    private Tabs vaadinTabs;
    @Id("vaadinTab")
    private Tab vaadinTab;
    @Id("vaadinTab1")
    private Tab vaadinTab1;
    @Id("vaadinTab2")
    private Tab vaadinTab2;

    /**
     * Creates a new TestUi.
     */
    public TestUi() {
        // You can initialise any data required for the connected UI components here.
        vaadinTabs.addSelectedChangeListener(selectedChangeEvent -> {
                selectedChangeEvent.getSelectedTab().getElement().getStyle().set("background-color":"blue");
        });


    }

    /**
     * This model binds properties between TestUi and test-ui
     */
    public interface TestUiModel extends TemplateModel {
        // Add setters and getters for template properties here.
    }
}

In the above code, My thinking was to start writing the selectedChangeListener Handler directly without doing much but instead this doesn't work and below initialization code needs to be added.

//I have added for one tab but it requires all the tabs to be added 
        vaadinTabs = new Tabs();
        vaadinTab = new Tab();
        vaadinTabs.add(vaadinTab);

My question here is why would I need to initialize when the Polymer js code generated using Vaadin Designer clearly defines the tab and it's group?

This is the same issue with Vaadin Grid. Even after defining the columns in the Polymer js, I have to redefine it from the Java component end instead of directly start providing the data via data provider

Answer 1

TLDR; Unfortunately, you have encountered this issue IllegalArgumentException when switching tabs which is closed as won't fix.

---

My question here is why would I need to initialize when the Polymer js code generated using Vaadin Designer clearly defines the tab and it's group?

Generally, you don't need to. But Tabs doesn't work as intended in this case. Thus, for this particular component, it's suggested to not mix template/Java logic.

For example, you can verify it with a <vaadin-text-field>, where event is fired correctly.

Java counterpart

  @Id("vaadinTextField")
    private TextField vaadinTextField;

/**
  * Creates a new TestUi.
  */
public TestUi() {
  // You can initialise any data required for the connected UI components here.
    vaadinTextField.addValueChangeListener(event->{
       System.out.println("Event has happened");
    });
    vaadinTextField.setValueChangeMode(ValueChangeMode.EAGER);

and snippet for the template right after the tabs:

<vaadin-vertical-layout id="vaadinVerticalLayout" style="width: 100%; height: 100%;">
 <vaadin-text-field id="vaadinTextField"></vaadin-text-field>
</vaadin-vertical-layout>

Taken from the issue:

So all Tab related API methods in Tabs are completely broken in regard to injected Tabs.

and

Unfortunately we've concluded that there is no sensible way we can support this for now, thus this issue will be a known limitation with Tabs. It will not work as @Id mapped component when the child vaadin-tabs are created in the template file, so you should not try to mix client & server logic and content for the Tabs component.

As a workaround, you could try to use your own component for @Id mapping tabs like:

@Tag("vaadin-tabs")
public IdMappedTabs extends Component {

    public IdMappedTabs() {
    }

   public Registration addSelectionListener(PropertyChangeListener listener) {
       return getElement().addPropertyChangeListener("selected", listener);
   }

    public void setSelectedTabIndex(int index) {
        getElement().setProperty("selected", index);
    }

}

Edit:

What is the issue with Grid you are having? (There is a good tutorial about Designer, where Grid is used. It might be useful : Vaadin Designer tutorial)