Vaadin中使用do-while循环导致页面加载异常求助

你犯了一个服务器端UI框架的典型逻辑错误：Vaadin是事件驱动的异步框架，不能用同步的do-while循环控制用户交互流程。

你的代码里，do-while是在服务器初始化页面的线程里同步执行的——这个线程的任务是生成页面内容并发送给浏览器，但用户点击按钮的事件，是在页面加载完成后通过另一个独立的HTTP请求触发的。也就是说，在do-while循环跑的时候，用户根本还没看到页面，更不可能点击按钮修改inputValue的值。

inputValue初始值为-1，循环条件inputValue.intValue() !=4永远成立，服务器线程会一直循环、重复添加菜单组件，永远无法完成页面渲染，自然会出现加载条闪烁、无法完成加载的情况。

放弃用服务器端的同步循环控制流程，改用Vaadin的事件回调机制处理用户交互：

• 初始化时只渲染一次主菜单
• 在按钮的点击事件中处理用户选择，根据选择渲染对应转换界面或退出
• 如果需要回到主菜单，在子界面添加返回按钮，点击时重新渲染主菜单

add(new H1("Welcome to the Conversion Challenge!"));

IntegerField menuChoice = new IntegerField();
Button chooseConversionButton = new Button("Onward!");

// 首次渲染主菜单
showMainMenu(menuChoice, chooseConversionButton);

chooseConversionButton.addClickListener(event -> {
    Integer choice = menuChoice.getValue();
    removeAll();

    if (choice == null) {
        add(new Paragraph("请输入有效的选项数字！"));
        showMainMenu(menuChoice, chooseConversionButton);
        return;
    }

    switch (choice) {
        case 1:
            // 渲染温度转换界面
            add(new H3("华氏转摄氏转换器"));
            // 这里添加你的温度转换逻辑组件（输入框、转换按钮等）
            // 添加返回主菜单按钮
            Button backBtn = new Button("返回主菜单");
            backBtn.addClickListener(e -> {
                removeAll();
                showMainMenu(menuChoice, chooseConversionButton);
            });
            add(backBtn);
            break;
        case 2:
            // 渲染重量转换界面
            add(new H3("重量转换器"));
            Button backToMenu2 = new Button("返回主菜单");
            backToMenu2.addClickListener(e -> {
                removeAll();
                showMainMenu(menuChoice, chooseConversionButton);
            });
            add(backToMenu2);
            break;
        case 3:
            // 渲染货币转换界面
            add(new H3("货币转换器"));
            Button backToMenu3 = new Button("返回主菜单");
            backToMenu3.addClickListener(e -> {
                removeAll();
                showMainMenu(menuChoice, chooseConversionButton);
            });
            add(backToMenu3);
            break;
        case 4:
            // 退出流程
            add(new H3("Bye bye!"));
            break;
        default:
            add(new Paragraph("无效选项，请重新选择！"));
            showMainMenu(menuChoice, chooseConversionButton);
            break;
    }
});

// 封装主菜单渲染逻辑
private void showMainMenu(IntegerField menuChoice, Button chooseConversionButton) {
    add(new H3("What method of conversion would you like to indulge in?"));
    add(new Paragraph("1) A temperate one?"));
    add(new Paragraph("2) Something heavier?"));
    add(new Paragraph("3) Maybe you're money-minded?"));
    add(new Paragraph("4) Or just give up!"));

    menuChoice.setLabel("What is your choice?");
    menuChoice.setHelperText("Don't be silly... go ahead.");
    add(menuChoice, chooseConversionButton);
}

• 服务器端代码是单次请求单次响应的，不能在初始化线程里等待用户的后续交互
• 所有用户交互（比如按钮点击）都是通过独立请求触发回调，流程控制要放在这些回调里
• 不要在UI初始化线程里写无限或长时间运行的循环，会直接阻塞页面渲染

内容的提问来源于stack exchange，提问作者gabbagoo