Vaadin Designer 选项卡未正确将子“选项卡”添加到选项卡对象答案

【问题标题】：Vaadin Designer Tabs not correctly adding children "tab" to tabs objectVaadin Designer 选项卡未正确将子“选项卡”添加到选项卡对象
【发布时间】：2021-06-04 20:17:03
【问题描述】：

我正在使用 Vaadin Deisgner 14.6.1 创建一些超级简单的选项卡。但是，当我尝试在 java 类中执行一些简单的操作（例如选择选项卡）时，它会抛出一个错误，表明“Tabs”对象 not 具有正确的子“选项卡”组件.下面是一个简单的测试用例。（当我试图将addSelectedChangeListener() 添加到选项卡类时，我发现了这个问题，发现它永远不会触发，大概是因为“选项卡”类从来没有适当地有任何孩子。）我尝试了一堆黑客，但没有工作。（过去，如果我单纯地坚持编程方法，我可以让选项卡工作，但我真的真的很喜欢使用 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 方面也是如此吗？（即这是可重现的吗？）

【问题讨论】：

你能分享你看到的错误的堆栈跟踪吗？

标签： vaadin vaadin-flow vaadin-designer

【解决方案1】：

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

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

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

【讨论】：