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.
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();
}
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);
}
}