如何在对话框中显示 primefaces 进度条

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 MainPage.xhtml -> 包含具有 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 progress.xhtml -> 包含进度对话框

<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. ProgressBarExample.java 包含调用 longOperation 和 Progress 对话框的支持 bean。

@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 文档所述：

PrimeFaces executeScript provides a way to execute javascript when the ajax request completes PrimeFaces executeScript 提供了一种在 ajax 请求完成时执行 javascript 的方法

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.所以，基本上，你可以看到的是： longOperation 被调用，它确实有效，只有在那之后，你才会显示进度条并在之后立即隐藏它，所以你什么也看不到，除非你检查你的浏览器控制台。

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 Primefaces 文档

如何在对话框中显示 primefaces 进度条

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-04-19 14:54:41

如何在对话框中显示 primefaces 进度条

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-04-19 14:54:41

解决方案1
2 已采纳 2020-04-19 14:54:41