How to toggle progress bar from button click?

I am setting up a dialog that enables a setting. The dialog has two buttons, one button to perform the action (enable setting) and the other is to cancel.

This is all setup in java.

Both buttons have a click event.
Enable button →

  • toggle progress bar
  • calls enable setting method;
  • closes dialog

Cancel button →

  • closes dialog

The toggle progress bar doesn’t work. The behavior is the progress bar does nothing until the dialog is re-opened. I then see the action of the progress bar. How can I toggle an Indeterminate progress bar behavior on the click. The idea is to show the user that something is happening.

Hi,

which Vaadin version are you using? Can you share a code snippet?

-Olli

version 12

I have modified names for brevity

The following config method is annotated with @EventHandler for the vaadin-button on-click event.

private void config() {
    dialog.setCloseOnEsc(false);
    dialog.setCloseOnOutsideClick(false);
    Button enableButton = new Button("Enable", buttonClickEvent -> {
        progressBar.setVisible(true); // This doesn't work.  How do I toggle the progress bar?
        
		<Call method to "enable"> // This should take a few seconds.  

        dialog.removeAll();
        dialog.close();
    });

    Button cancelButton = new Button("Cancel", nativeButtonClickEvent -> {
        dialog.removeAll();
        dialog.close();
    });

    Div buttonDiv = new Div();
    buttonDiv.addClassName("button-div");
    buttonDiv.add(enableButton, cancelButton);

    dialog.addOpenedChangeListener(e -> {
        progressBar.setVisible(false);
        progressBar.setIndeterminate(true);
    });


    dialog.add(new MyViewComponent, progressBar, buttonDiv);

    dialog.open();
}

Hi Marc!
If you want to do something, and then show the user the progress of that process, then the way of using ProgressBar is something like this:

Dialog d = new Dialog();
Button b = new Button("Start progress and close");
b.setDisableOnClick(true);
ProgressBar pb = new ProgressBar(0, 100, 0);
b.addClickListener(ev -> {
	Thread t = new Thread(() -> {
		for (double i = 0; i < 100; i++) {
			double value = i;
			pb.getUI().ifPresent(ui -> ui.access(() -> pb.setValue(value)));
			try {
				Thread.sleep(100);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
		}
		d.getUI().ifPresent(ui -> ui.access(() -> d.close()));
	});
	t.start();
});

VerticalLayout vl = new VerticalLayout(b, pb);
d.add(vl);
d.open();

Several interesting things to note on this example:

  • I’m creating a Thread for the “background” process, that is being simulated with Thread.sleep()
  • When you want to make changes to the visual part of your application, remember to use ui.access()
  • Also remember to check the existence of the UI (ifPresent)

Regards.

PD: remember to use @Push

I took your code example and modified it to replace the omissions, plus I removed the progressBar.setVisible(false) from the openedChangeListener; here’s the full example:


package org.vaadin.olli;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.HtmlImport;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.progressbar.ProgressBar;
import com.vaadin.flow.router.Route;

/**
 * The main view contains a button and a click listener.
 */

@HtmlImport("frontend://bower_components/vaadin-lumo-styles/presets/compact.html")
@HtmlImport("styles/shared-styles.html")
@Route("")
public class MainView extends VerticalLayout {

    Dialog dialog = new Dialog();
    ProgressBar progressBar = new ProgressBar();

    private void config() {
        dialog.setCloseOnEsc(false);
        dialog.setCloseOnOutsideClick(false);
        Button enableButton = new Button("Enable", buttonClickEvent -> {
            progressBar.setVisible(true);
            dialog.removeAll();
            dialog.close();
        });

        Button cancelButton = new Button("Cancel", nativeButtonClickEvent -> {
            dialog.removeAll();
            dialog.close();
        });

        Div buttonDiv = new Div();
        buttonDiv.addClassName("button-div");
        buttonDiv.add(enableButton, cancelButton);

        dialog.addOpenedChangeListener(e -> {
            progressBar.setIndeterminate(true);
        });

        dialog.add(new Span("foo"), progressBar, buttonDiv);
        dialog.open();
    }

    public MainView() {
        Button button = new Button("click to open dialog", e -> {
            config();
        });
        add(button);
    }
}

Is this what you mean?