2

我正在使用 Vaadin Deisgner 14.6.1 创建一些超级简单的选项卡。但是，当我尝试在 java 类中执行一些简单操作（例如选择选项卡）时，它会引发错误，表明“选项卡”对象没有正确的子“选项卡”组件。下面是一个简单的测试用例。（当我尝试将 a 添加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 方面也是如此吗？（即这是可重现的吗？）

4

1 回答 1

3

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

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

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

于 2021-06-05T06:10:20.337 回答