问题描述
首先，我在这篇文章的底部提供了完整的类定义，同时试图解释我的代码片段问题（如下）-这些代码片段都包含在类定义中。
我从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);
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）