Vaadin 设计器选项卡未正确将子“选项卡”添加到选项卡对象

如何解决Vaadin 设计器选项卡未正确将子“选项卡”添加到选项卡对象

我正在使用 Vaadin Deisgner 14.6.1 创建一些超级简单的选项卡。但是，当我尝试在 java 类中执行一些简单的操作（例如选择选项卡）时，它会抛出一个错误，表明“Tabs”对象没有具有正确的子“选项卡”组件.下面是一个简单的测试用例。（当我尝试向 tabs 类添加 addSelectedchangelistener() 并发现它永远不会触发时，我发现了这个问题，大概是因为“tabs”类从来没有正确地有任何孩子。）我尝试了很多技巧，但没有任何效果。（过去，如果我纯粹坚持编程方法，我会使用选项卡工作，但我真的真的很喜欢使用 Designer，因为它为我节省了大量时间并保持代码非常模块化和干净......当它工作时....)

import {html,polymerElement} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js';
import '@vaadin/vaadin-tabs/src/vaadin-tabs.js';
import '@vaadin/vaadin-tabs/src/vaadin-tab.js';

class MyTabtest extends polymerElement {

    static get template() {
        return html`
<style include="shared-styles">
                :host {
                    display: block;
                    height: 100%;
                }
            </style>
<vaadin-vertical-layout theme="spacing" style="width: 100%; height: 100%;">
 <vaadin-tabs theme="equal-width-tabs" id="tabs" orientation="horizontal" selected="0">
  <vaadin-tab id="tab1" selected>
    Tab one 
  </vaadin-tab>
  <vaadin-tab id="tab2">
    Tab two with a longer title 
  </vaadin-tab>
  <vaadin-tab id="tab3">
    Tab three 
  </vaadin-tab>
 </vaadin-tabs>
 <label id="lbl1">page1</label>
 <label id="lbl2">page2</label>
 <label id="lbl3">page3</label>
</vaadin-vertical-layout>
`;
    }

    static get is() {
        return 'my-tabtest';
    }

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

customElements.define(MyTabtest.is,MyTabtest);

和

package com.deepsearch.fe.tab2vizdb.fpsgraphicaldetails.spectratab.hslspectrachartandalts;

import com.vaadin.flow.component.html.Label;
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.router.Route;
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 my-tabtest template.
 *
 * Designer will add and remove fields with @Id mappings but
 * does not overwrite or otherwise change this file.
 */
@Route("tabtest")
@Tag("my-tabtest")
@JsModule("./src/my-tabtest.js")
public class MyTabtest extends polymerTemplate<MyTabtest.MyTabtestModel> {

    @Id("tabs")
    private Tabs tabs;
    @Id("tab1")
    private Tab tab1;
    @Id("tab2")
    private Tab tab2;
    @Id("tab3")
    private Tab tab3;
    @Id("lbl1")
    private Label lbl1;
    @Id("lbl2")
    private Label lbl2;
    @Id("lbl3")
    private Label lbl3;

    /**
     * Creates a new MyTabtest.
     */
    public MyTabtest() {
      //  tabs.setSelectedTab(tab2); //throws error!
        tabs.addSelectedchangelistener(e -> {
            System.out.println("A tab got selected!"); //this never fires!!!!
        });
    }

    /**
     * This model binds properties between MyTabtest and my-tabtest
     */
    public interface MyTabtestModel extends TemplateModel {
        // Add setters and getters for template properties here.
    }
}

最终，我正在尝试捕获一个选项卡选择事件——但是在 Designer 中创建选项卡时它似乎不起作用......在 Vaadin 方面也是如此吗？（即这是否可重现？）

解决方法

这是组件映射到模板中定义的元素的不幸限制。映射到 Java 时，不会保留父子关系，因此 tabs 组件不会意识到 tab 是其子组件之一。

见https://github.com/vaadin/flow/issues/7622

使其工作的方法是在 Java 中创建 Tabs 和 Tab 实例，在 Designer 中创建其余实例。