如何在對話框中顯示 primefaces 進度條

Question

我正在嘗試在對話框中顯示從菜單調用的長時間操作的進度條。 對話框不顯示。 我不確定我錯過了什么。 任何幫助深表感謝。

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 -> 包含進度對話框

<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 包含調用 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

正如 Primefaces 文檔所述：

PrimeFaces executeScript 提供了一種在 ajax 請求完成時執行 javascript 的方法

所以，基本上，你可以看到的是： longOperation 被調用，它確實有效，只有在那之后，你才會顯示進度條並在之后立即隱藏它，所以你什么也看不到，除非你檢查你的瀏覽器控制台。

為了實現您的目標，您可以像這樣定義您的菜單項：

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 文檔

如何在對話框中顯示 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