vaadin更新组合框_大数据知识库

首先：我在这篇文章的底部提供了完整的类定义，同时试图解释我的代码段问题（下面）——这些代码段都包含在类定义中。
我创造了一个 .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_lecturers , id_studentgroups , id_rooms -在我的java代码中，我通过将当前所选选项卡中的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的效果非常好，但是当我更改选项卡选择时，selectbox没有任何变化。此外，下拉列表的值仍然与模板中定义的值相同( 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);

vaadin更新组合框

暂无答案！

相关问题

热门标签

最新问答