Vaadin根据选项卡选择更新组合框

Question

首先，我在这篇文章的底部提供了完整的类定义，同时试图解释我的代码片段问题（如下）-这些代码片段都包含在类定义中。

我从Vaadin-Designer创建了一个.js模板，并希望在实例化相应的.java类的同时修改元素的内容。

现在，我尝试的是使用一些vaadin-tabs以及三个可能的值，如下所示：

  <vaadin-tabs id="vaadinTabs" style="align-self: flex-start; margin: var(--lumo-space-xs);" orientation="horizontal" selected="0">
   <vaadin-tab id="id_studentgroups" style="height: 100%; padding: var(--lumo-space-m); width: 200px;" selected> <!-- When adjusting Tab-IDs please also adjust in SchedulingUtils (view->Utils) -->
     Studentgroups 
   </vaadin-tab>
   <vaadin-tab id = "id_rooms" style="padding: var(--lumo-space-m); height: 100%; width: 200px;">
     Rooms 
   </vaadin-tab>
   <vaadin-tab id = "id_lecturers" style="padding: var(--lumo-space-m); width: 200px;">
     Lecturers 
   </vaadin-tab>
  </vaadin-tabs>

它们具有三个ID id_lecturers，id_studentgroups，id_rooms-在我的Java代码中，我通过比较ID中的ID值（以字符串形式）来评估选择的ID。当前选择的标签，其中包含一些指定的常量（提供与ID相同的值）：

 public void updateListBoxContent() {
        Tab selectedTab = vaadinTabs.getSelectedTab();
        switch (selectedTab.getId().get()) {
            case SchedulingUtils.TAB_ID_STUDENTGROUPS:
                fillListBoxWithStudentGroupContent();
                break;
            case SchedulingUtils.TAB_ID_ROOMS:
                fillListBoxWithRoomContent();
                break;
            case SchedulingUtils.TAB_ID_LECTURERS:
                fillListBoxWithLecturerContent();
                break;
            default:
                System.err.println(SchedulingUtils.TAB_SELECTION_IDENTIFIER_ERROR);
                fillListBoxWithStudentGroupContent();
        }
    }

上面的方法定义为TabChangeListener：

public void initializeTabChangeListener() {
    this.vaadinTabs.addSelectedChangeListener(l -> {
       this.updateListBoxContent();
    });
}

现在出于测试目的，我想根据所选值添加一些静态值。我用不同的方法做到了这一点，这是fillListBoxWithStudentGroupContent()的方法：

    //empty the current selection
    private void clearSelectionListbox() {
        this.selectBox.clear();
        this.selectBox.removeAll();
    }

    // empty + fill new content 
    public void fillListBoxWithStudentGroupContent() {
        this.clearSelectionListbox();
        this.selectBox.setLabel("Select Studentgroup");
        this.selectBox.add("Studentengruppe 1");
        this.selectBox.add("Studentengruppe 2");
    }

现在显示UI可以正常工作，但是当我更改选项卡选择时，对于选择框没有任何更改。同样，下拉菜单的值仍与模板中定义的值相同（item-one，item-two等）。显示的错误是：

（错误）：您只能使用渲染器或模板来选择内容

在尝试选择模板中提供给下拉菜单的值时，我也会收到错误消息-该错误是：

'index'参数不应大于或等于子组件的数量。那是：1

现在Vaadin教程似乎也只是以任何形式的ActionListeners（changeListeners等）修改内容-我该如何针对我的情况进行这项工作？

完整代码

这是Java类：

@Tag("scheduling-timetable")
@JsModule("./src/scheduling-timetable.js")
public class SchedulingTimetable extends PolymerTemplate<SchedulingTimetable.SchedulingTimetableModel> {

    @Id("vaadinTabs")
    private Tabs vaadinTabs;

    @Id("selectionbox")
    private Select selectBox;

    private Semester semester;

    /**
     * Creates a new SchedulingTimetable.
     */
    public SchedulingTimetable(Semester semester) {
        // You can initialise any data required for the connected UI components here
        this.init();
    }

    public void init() {
        this.initializeTabChangeListener();
    }

    public void initializeTabChangeListener() {
        this.vaadinTabs.addSelectedChangeListener(l -> {
           this.updateListBoxContent();
        });
    }

    /**
     * This model binds properties between SchedulingTimetable and scheduling-timetable
     */
    public interface SchedulingTimetableModel extends TemplateModel {
        // Add setters and getters for template properties here.
    }

    public void updateListBoxContent() {
        Tab selectedTab = vaadinTabs.getSelectedTab();
        switch (selectedTab.getId().get()) {
            case SchedulingUtils.TAB_ID_STUDENTGROUPS:
                fillListBoxWithStudentGroupContent();
                break;
            case SchedulingUtils.TAB_ID_ROOMS:
                fillListBoxWithRoomContent();
                break;
            case SchedulingUtils.TAB_ID_LECTURERS:
                fillListBoxWithLecturerContent();
                break;
            default:
                System.err.println(SchedulingUtils.TAB_SELECTION_IDENTIFIER_ERROR);
                fillListBoxWithStudentGroupContent();
        }
    }

    private void clearSelectionListbox() {
        this.selectBox.clear();
        this.selectBox.removeAll();
    }

    public void fillListBoxWithStudentGroupContent() {
        this.clearSelectionListbox();
        this.selectBox.setLabel("Select Studentgroup");
        this.selectBox.add("Studentengruppe 1");
        this.selectBox.add("Studentengruppe 2");
    }

    public void fillListBoxWithRoomContent() {
        this.clearSelectionListbox();
        this.selectBox.setLabel("Select Room");
        this.selectBox.add("Room 1");
        this.selectBox.add("Room 2");
    }

    public void fillListBoxWithLecturerContent() {
        this.clearSelectionListbox();
        this.selectBox.setLabel("Select Lecturer");
        this.selectBox.add("Lecturer 1");
        this.selectBox.add("Lecturer 2");
    }
}

这是相应的.js-部分：

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';
import '@vaadin/vaadin-select/src/vaadin-select.js';
import '@vaadin/vaadin-list-box/src/vaadin-list-box.js';
import '@vaadin/vaadin-item/src/vaadin-item.js';

class SchedulingTimetable 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%;">
 <div style="width: 100%; height: fit-content; align-self: flex-start; margin: var(--lumo-space-l);">
  <vaadin-tabs id="vaadinTabs" style="align-self: flex-start; margin: var(--lumo-space-xs);" orientation="horizontal" selected="0">
   <vaadin-tab id="id_studentgroups" style="height: 100%; padding: var(--lumo-space-m); width: 200px;" selected> <!-- When adjusting Tab-IDs please also adjust in SchedulingUtils (view->Utils) -->
     Studentgroups 
   </vaadin-tab>
   <vaadin-tab id = "id_rooms" style="padding: var(--lumo-space-m); height: 100%; width: 200px;">
     Rooms 
   </vaadin-tab>
   <vaadin-tab id = "id_lecturers" style="padding: var(--lumo-space-m); width: 200px;">
     Lecturers 
   </vaadin-tab>
  </vaadin-tabs>
  <vaadin-select id="selectionbox" style="margin: var(--lumo-space-xl); width: fit-content; minimal-width: 200px" label="Select Studentgroup">
   <template>
    <vaadin-list-box selected="0">
     <vaadin-item selected>
       Item one 
     </vaadin-item>
     <vaadin-item>
       Item two 
     </vaadin-item>
     <vaadin-item>
       Item three 
     </vaadin-item>
    </vaadin-list-box>
   </template>Select Studentgroup 
  </vaadin-select>
 </div>
 <div style="width: 100%; height: 100%; padding: 0; margin: var(--lumo-space-l);"></div>
</vaadin-vertical-layout>
`;
    }

    static get is() {
        return 'scheduling-timetable';
    }

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

customElements.define(SchedulingTimetable.is, SchedulingTimetable);