Компонент Vaadin Tabs, созданный с помощью Designer, не отображает данные при привязке с помощью его сопутствующего файла Java

Question

Ниже приведен код Vaadin Designer для простой функциональности вкладок

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);

Соответствующий Java сопутствующий файл выглядит следующим образом

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.
    }
}

В приведенном выше коде я подумал, что начните писать обработчик selectedChangeListener напрямую, не прилагая больших усилий, но вместо этого это не сработает, и необходимо добавить код инициализации ниже.

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

Мой вопрос здесь: зачем мне нужно инициализировать, когда Polymer js код, сгенерированный с помощью Vaadin Designer, четко определяет вкладку и ее группу?

Это та же проблема с Vaadin Grid. Даже после определения столбцов в Polymer js мне нужно переопределить его со стороны компонента Java, а не напрямую начинать предоставлять данные через поставщика данных

Answer 1

TLDR; К сожалению, вы столкнулись с этой проблемой IllegalArgumentException при переключении вкладок , которая закрывается как won't fix.

---

Мой вопрос здесь, почему мне нужно инициализировать, когда полимер js код, сгенерированный с помощью Vaadin Designer, четко определяет вкладку и ее группу?

Как правило, вам не нужно. Но вкладки не работают, как задумано в этом случае. Таким образом, для этого конкретного компонента предлагается не смешивать шаблон / Java logi c.

Например, вы можете проверить это с помощью <vaadin-text-field>, где событие запускается правильно.

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);

и фрагмент для шаблона сразу после tabs:

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

Взято из номера:

Таким образом, все API-методы, связанные с Tab, во вкладках полностью нарушены. это пока, таким образом, эта проблема будет известным ограничением для вкладок. Он не будет работать как компонент сопоставления @Id при создании дочерних vaadin-tabs в файле шаблона, поэтому не следует пытаться смешивать логи клиента и сервера c и содержимое для компонента Tabs.

As В качестве обходного пути, вы можете попробовать использовать свой собственный компонент для вкладок отображения @Id, например:

@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);
    }

}

Редактировать:

В чем проблема с Grid, которая возникает у вас? (Есть хороший учебник по Designer, где используется Grid. Он может быть полезен: Учебник Vaadin Designer )