如何在按钮点击中设置Vaadin 8 LoadingIndicator配置 [英] How to set Vaadin 8 LoadingIndicatorConfiguration in a button click

问题描述

我正在使用Vaadin 8，而LoadingIndicator给我带来了一些问题。在90%的时间内，我需要相应地设置它：

• 第一个延迟==300ms
• 第二个延迟==600ms
• 第三延迟==Integer.MAX

但对于一些特定的操作，我需要修改它，以便立即显示覆盖(加载指示器)，而不是等待预先配置的300ms。例如，当我点击一个按钮时，我希望它立即显示出来。然而，这是有问题的，因为如果我在处理按钮点击事件的过程中将第一个延迟设置为零，那么它只在事件完成之后才会应用。出于这个原因，我想执行一些JS方法，该方法会将该延迟设置为零。我已经尝试直接向上调用JS方法来立即显示覆盖图，但它仍然受到LoadingIndicator Configuration的影响。

编辑：目前，我想出的可行的(不是最好的)解决方案是创建一个模仿v-loading-indicator的CSS类，并创建一个在body元素的开头添加div元素的JavaScript方法，然后将这个CSS类添加到div元素。然后，当创建按钮时，我对这个div执行addEventListener(再次使用JS-这很关键)，并添加方法以显示加载指示器。

推荐答案

通常只有在请求完全处理后才会更新浏览器中的UI。因此，设置按钮被点击前的延迟是有效的，但在点击之后完成时不起作用。要更改这一点，您需要启用推送以立即更新用户界面。尝试使用和不使用推送的以下代码，您应该会看到加载指示器行为的不同。

@Push
public class DemoUI extends UI {

    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();

        Button loadingButton = new Button();
        loadingButton.addClickListener(e -> {
            getLoadingIndicatorConfiguration().setFirstDelay(0);
            getLoadingIndicatorConfiguration().setSecondDelay(1000);
            getLoadingIndicatorConfiguration().setThirdDelay(2500);
            try {
                Thread.sleep(5000);
            } catch (InterruptedException e1) {
        });
        layout.addComponent(button);
        setContent(layout);
    }
}

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = DemoUI.class)
public static class Servlet extends VaadinServlet {
}

这篇关于如何在按钮点击中设置Vaadin 8 LoadingIndicator配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！