ProgressBar works after the main method

Flow
1

I am writing a download dialog(showUploadDialog()) which has a progress bar. By clicking on the button, write to the database. At this point, a progressbar should be displayed, but it appears only after the recording is completed (after method parseAndSaveWorkbook). Why


@SpringComponent
@UIScope
public class CarView extends AbstractMiddleView {
    public final static String ID_VIEW = "CAR_VIEW";
    private ProgressBar bar;
    private Workbook workbook;

    public CarView(CarMenuView carMenu, CarGridView carGridView, CarExcelItem carExcelItem, CarUploadExcelItem carUploadExcelItem) {
        super(carMenu, carGridView, carExcelItem, carUploadExcelItem);
    }

    @Override
    protected void addAdditionalButtons() {

        Button uploadButton = new Button(" import from Excell");
        uploadButton.addClickListener((e) -> {
            showUploadDialog();
        });
        btnLayout.add(uploadButton);
    }

    private void showUploadDialog() {
        Dialog dialog = new Dialog();
		
        VerticalLayout layout = new VerticalLayout();

        VerticalLayout progresLayout = new VerticalLayout();
        bar = new ProgressBar();
        progresLayout.add(bar);
        bar.setVisible(false);

        HorizontalLayout layoutBtn = new HorizontalLayout();

        Button startBtn = new Button("Commit in DB", VaadinIcon.DATABASE.create());
        startBtn.setEnabled(false);

        Button cancelBtn = new Button("Cancel");
        cancelBtn.setSizeFull();
        startBtn.setSizeFull();

        layoutBtn.add(cancelBtn, startBtn);
        layoutBtn.setSizeFull();

        MultiFileMemoryBuffer buffer = new MultiFileMemoryBuffer();

        Upload upload = new Upload(buffer);
        upload.setAcceptedFileTypes("application/vnd.ms-excel");
        upload.setMaxFiles(1);
        upload.setSizeFull();
        upload.addSucceededListener((event) -> {
            String name = event.getFileName();
            try {
                workbook = WorkbookFactory.create(buffer.getInputStream(name));
            } catch (IOException e) {
                e.printStackTrace();
            }

            startBtn.setEnabled(true);

        });
// this clickListener
        startBtn.addClickListener((event) -> {
            if (workbook == null) return;
			
            bar.setVisible(true);

            bar.setIndeterminate(true);

            startBtn.setEnabled(false);

            parseAndSaveWorkbook(workbook); 

            workbook = null;

            bar.setIndeterminate(false);
			
			bar.setVisible(false);

        });

        layout.add(progresLayout, upload, layoutBtn);
        layout.setAlignItems(Alignment.CENTER);

        dialog.add(layout);
        dialog.setHeight("270px");
        dialog.setWidth("450px");
        dialog.open();

    }
// method write in DB
    private void parseAndSaveWorkbook(Workbook workbook) {
        List<Car> list = uploadable.saveWorkbook(workbook);

    }
}
2

Hi, it’s probably because of blocking threads. At the same place you try to make changes in UI and to do some maybe time consuming operation. Try something like this:

        startBtn.addClickListener((event) -> {
            if (workbook == null) return;
			
            bar.setVisible(true);
            bar.setIndeterminate(true);
            startBtn.setEnabled(false);

			new Thread(() -> {
				parseAndSaveWorkbook(workbook); 
	
				this.getUI().access(() -> {
					workbook = null;
					bar.setIndeterminate(false);
					bar.setVisible(false);
				});
			
			}).start();
        });

This way you do first UI changes in the standard way in the UI thread, then you start the new thread with saving to the database. When it’s done then you do next UI changes back in the UI thread.
Hope it helps,
Piotr

3

Piotr, I set annotation @Push. But I get push disabled:
System.out.println(getUI().get().getPushConfiguration().getPushMode());

import com.vaadin.annotations.Push;

@SpringComponent
@UIScope
@Push(PushMode.MANUAL)
public class CarView extends AbstractMiddleView {
//---///
}

How enable pushmode?

4

Use just

@Push

Which is equal to

@Push(PushMode.AUTOMATIC)

Don’t use manual mode unless you really want to call push() explicitly.

5

I tried to use @Push(PushMode.AUTOMATIC) and @Push - not works. Only if I write in code:

getUI().get().getPushConfiguration().setPushMode(PushMode.AUTOMATIC);