如何在按钮点击中设置Vaadin 8 LoadingIndicator配置

How to set Vaadin 8 LoadingIndicatorConfiguration in a button click(如何在按钮点击中设置Vaadin 8 LoadingIndicator配置)
本文介绍了如何在按钮点击中设置Vaadin 8 LoadingIndicator配置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用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配置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)