使用Designer创建的基于Vaadin选项卡的组件'；使用Java配套文件绑定时不显示数据

下面是用于简单选项卡功能的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);

我这里的问题是，当使用Vaadin Designer生成的Polymer js代码清楚地定义了选项卡及其组时，为什么需要初始化

---

瓦丁网格也存在同样的问题。即使在Polymer js中定义了列，我也必须从Java组件端重新定义它，而不是直接通过数据提供者提供数据

TLDR；不幸的是，您遇到了此问题，该问题已关闭，因为

无法修复


我这里的问题是，当使用Vaadin Designer生成的Polymer js代码清楚地定义了选项卡及其组时，为什么需要初始化

一般来说，你不需要这样做。但在这种情况下，选项卡无法按预期工作。因此，对于这个特定组件，建议不要混合使用模板/Java逻辑

例如，您可以使用
验证它，其中事件被正确触发

Java对等体

@Id（“vaadinTextField”）
私有TextField-vaadinTextField；
/**
*创建一个新的TestUi。
*/
公共TestUi（）{
//您可以在此处初始化连接的UI组件所需的任何数据。
vaadinTextField.addValueChangeListener（事件->{
System.out.println（“事件已发生”）；
});
vaadinTextField.setValueChangeMode（ValueChangeMode.EAGER）；

在
选项卡之后的模板的代码段：



摘自本期：

因此，就注入的选项卡而言，选项卡中所有与选项卡相关的API方法都被完全破坏了

及

不幸的是，我们得出的结论是，目前还没有合理的方法来支持这一点，因此这个问题将是选项卡的已知限制。当在模板文件中创建子vaadin选项卡时，它将不会作为@Id映射组件工作，因此您不应尝试混合选项卡组件的客户端和服务器逻辑和内容

作为一种解决方法，您可以尝试使用自己的组件来创建@Id映射选项卡，如：

编辑：

您的
Grid
有什么问题？（有一个很好的关于设计器的教程，其中使用了Grid。它可能很有用：）

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

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

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

}