how to display a primefaces progressbar in a dialog

Question

I am trying to display a progressbar in a dialog for a long operation called from the menu. The dialog does not show up. I am not sure what I am missing. Any help is much appreciated.

MainPage.xhtml -> contains the menu bar which has the longOperation menuitem

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head></h:head>
<body>
    <h:form>
        <p:menubar model="#{progressBarExample.model}" styleClass="menubar"
            autoDisplay="False" style="margin-bottom:5px;" />
    </h:form>
</body>
</html>

progress.xhtml -> contains the progress dialog

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head></h:head>
<body>

    <p:dialog id="progressDialog" widgetVar="progressDialogVar"
        modal="true" draggable="true" 
        resizable="false" header="Progress" >
        <h:form>
            <p:panel widgetVar="progressPanelVar">
                <h:panelGrid id="ProgressPanel" columns="1"
                    style="margin-bottom:10px" cellpadding="5" width="500px">

                    <p:progressBar widgetVar="progressbar"
                        style="height:20px;width:100%;"
                        mode="indeterminate" />
                </h:panelGrid>
            </p:panel>
        </h:form>
    </p:dialog>
</body>
</html>

ProgressBarExample.java contains the backing bean which calls the longOperation and the Progress dialog.

@Named
@ViewScoped
public class ProgressBarExample implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    private MenuModel model;

    public ProgressBarExample() {   }

    @PostConstruct
    protected void init() {
        model = new DefaultMenuModel();

        DefaultMenuItem item = new DefaultMenuItem();

        item = new DefaultMenuItem();
        item.setValue("Long Operation");
        item.setCommand("#{progressBarExample.longOperation}");
        model.addElement(item);
    }

    public void longOperation(ActionEvent ae) {
        System.out.println("this is a long operation...");
        PrimeFaces.current().executeScript("PF('progressDialogVar').show();");
        try {
              TimeUnit.SECONDS.sleep(5);
          } catch (InterruptedException e) {
              e.printStackTrace();
          }
        PrimeFaces.current().executeScript("PF('progressDialogVar').hide();");
    }

    public MenuModel getModel() {
        return model;
    }

    public void setModel(MenuModel model) {
        this.model = model;
    }

}

Answer 1

As Primefaces docs stated:

PrimeFaces executeScript provides a way to execute javascript when the ajax request completes

So, basically, what you can see is: longOperation is called, it does is work and, only after that, you show the progress bar and hide it immediately after, so you see nothing, except if you inspect your browser console.

To achieve your goal you can define your menu item like this:

DefaultMenuItem item = new DefaultMenuItem();
item = new DefaultMenuItem();
item.setValue("Long Operation");
item.setCommand("#{progressBarExample.longOperation}");
item.setOnstart("PF('progressDialogVar').show()");
item.setOncomplete("PF('progressDialogVar').hide()");
model.addElement(item);

Primefaces docs

how to display a primefaces progressbar in a dialog

Question

1 answers

solution1
2 ACCPTED 2020-04-19 14:54:41

how to display a primefaces progressbar in a dialog

Question

1 answers

solution1 2 ACCPTED 2020-04-19 14:54:41

solution1
2 ACCPTED 2020-04-19 14:54:41