Vaadin 8:如何在导航到其他具有长加载时间的视图之前显示 ProgressBar 窗口 [英] Vaadin 8: How to show ProgressBar window before navigating to other view with long loading

问题描述

我想导航到在单击按钮后在网格中显示大数据的视图.我知道有延迟加载，但我想加载所有数据以便能够通过单击标题进行排序.使用延迟加载，我只能对一列进行排序.

I want to navigate to a view that displays large data in a grid after a button click. I know there is lazy loading but I want to load all data to be able to sort by clicking the header. With lazy loading I could only sort one column.

Button viewDataBtn = new Button("View scan data");
viewDataBtn .addClickListener(e -> {
        UI.getCurrent().getNavigator().navigateTo("scandataview/" + name);
    });

这确实有效，但在新视图可见之前有很长的休息时间.因此，我想显示一个带有进度条的窗口，直到加载新视图并在另一个线程中加载新视图.我尝试了以下但没有成功:

This does work but there is a long break until the new view is visible. Therefore, I want to show a window with a progress bar until the new view is loaded and load the new view in another thread. I tried the following without success:

viewDataBtn .addClickListener(e -> {

        UI.getCurrent().addWindow(showProgress);
        new Thread(new Loader()).start();
    });

在同一个班级:

 class Loader implements Runnable {

        @Override
        public void run() {
            try {
                //Nullpointer exception here:
              UI.getCurrent().getNavigator().navigateTo("scandataview/" + name);

            } catch (Exception e) {
                e.printStackTrace();
            }
            finally {
                UI.getCurrent().removeWindow(showProgress);
            }
        }
 }

和进度条窗口:

public class LoadingIndicatorWindow extends Window {

public LoadingIndicatorWindow() {
    center();
    setVisible(true);
    setResizable(false);
    setDraggable(false);
    setModal(true);
    setClosable(false);
    setCaption("Loading");

    VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    layout.setWidth("100%");

    Label progressLabel = new Label("Please wait! Data loading in progress...");
    progressLabel.setSizeFull();

    ProgressBar progressBar = new ProgressBar();
    progressBar.setSizeFull();
    progressBar.setIndeterminate(true);
    progressBar.setVisible(true);

    layout.addComponent(progressLabel);
    layout.addComponent(progressBar);

    layout.setComponentAlignment(progressLabel, Alignment.MIDDLE_CENTER);
    layout.setComponentAlignment(progressBar, Alignment.MIDDLE_CENTER);
    setContent(layout);
}

}

我似乎无法在其他线程中导航.

It seems I cannot navigate in a different thread.

当该视图准备好显示带有数据的大网格时，有没有办法在导航到另一个视图之前显示进度条窗口?

Is there any way of showing a progress bar window before navigating to another view when that view is ready showing the large grid with data???

非常感谢您的帮助！

推荐答案

正如 Tatu Lund 所指出的，Alejandro 的教程很棒.然而，不完全是我需要的.因此，我想发布我的答案.

As pointed out by Tatu Lund the tutorial by Alejandro is great. However, not exactly what I needed. Therefore, I want to post my answer.

我发现以下链接很有帮助:

I found the following link helpful:

推送文档

Loader 类现在如下所示:

The Loader class looks now as follows:

class Loader implements Runnable {

    @Override
    public void run() {
        try {
            getUI().access(() -> {
                getUI().getNavigator().navigateTo("scandataview/" + name);
            });

        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

为了关闭进度窗口，我在 UI 类中创建了 LoadingIndicatorWindow 的一个实例并将其提供给两个视图.在显示网格显示代码"后的数据的视图中关闭窗口

To close the progress window I created an instance of the LoadingIndicatorWindow in the UI class and gave it to both views. The window is closed in the view that shows the data after the "grid display code" with

UI.getCurrent().removeWindow(showProgress);

这篇关于Vaadin 8:如何在导航到其他具有长加载时间的视图之前显示 ProgressBar 窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！