Vaadin Designer 选项卡未正确添加 children "tab" 到选项卡 object

Question

我正在使用 Vaadin Deisgner 14.6.1 创建一些超级简单的选项卡。但是，当我尝试在 java class 中执行一些简单操作时（例如 selecting 选项卡），它会抛出一个错误，表明“选项卡”object 不是否具有适当的 children “制表符”组件。下面是一个简单的测试用例。（我在尝试向选项卡 class 添加 addSelectedChangeListener() 并发现它永远不会触发时发现了这个问题，大概是因为“选项卡”class 从来没有正确地拥有任何 children.) 我尝试了很多技巧，但没有任何效果。（如果我纯粹坚持编程方法，我过去曾让选项卡工作，但我真的非常非常喜欢使用 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.
    }
}

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

Answer 1

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

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

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

Vaadin Designer 选项卡未正确添加 children "tab" 到选项卡 object

Vaadin Designer Tabs not correctly adding children "tab" to tabs object

vaadin

vaadin-flow

vaadin-designer