後臺處理中的進度條primefaces

Question

如果有人能給我一些關於進度條和ajax後端處理的提示，我將不勝感激。

爲了澄清什麼，我需要以下是詳細信息：

我有一個命令按鈕，在後端做一些處理。 我想顯示一個進度條，當後臺bean完成處理後端指令時達到100％。 我看了很多線程，但沒有運氣。他們中的大多數沒有展示具體的樣本如何做到這一點。 下面是我的代碼片段：

</h:panelGrid> 
<p:commandButton id="btn" value="DoSomeAction" 
styleClass="ui-priority-primary" update="panel" 
onclick="PF('pbAjax').start();PF('startButton1').disable();" 
widgetVar="startButton1" 
actionListener="#{actionBean.DoSomeAction}" /> 

<p:progressBar widgetVar="pbAjax" ajax="true" 
value="#{progressBean.progress}" labelTemplate="{value}%" 
styleClass="animated"> 
<p:ajax event="complete" listener="#{progressBean.onComplete}" 
update="growl" oncomplete="startButton2.enable()" /> 
</p:progressBar> 
</p:panel> 

這是進步了Brean代碼：

@ManagedBean(name="progressBean") 
public class ProgressBean implements Serializable { 

    private Integer progress; 

    public Integer getProgress() { 
    if(progress == null) 
     progress = 0; 
    else { 
     progress = progress + (int)(Math.random() * 35);  
     if(progress > 100) 
     progress = 100; 
    } 

    return progress; 
    } 

    public void setProgress(Integer progress) { 
    this.progress = progress; 
    } 

    public void onComplete() { 
    FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Progress Completed", "Progress Completed")); 
    } 

    public void cancel() { 
    progress = null; 
    } 
} 

這段代碼的結果只是一個空的進度條，並沒有發生，當我點擊我的按鈕。 在此先感謝。

Answer 1

如果我簡單地引導你完成示例代碼，這將更容易，因爲你有兩個bean，我不知道它們之間的相互作用。你可以用它來將它應用到你的。

<p:commandButton>

<p:commandButton value="Start" type="button" onclick="pbAjax.start();startButton1.disable();" widgetVar="startButton1" /> 

沒有什麼令人印象深刻的在這裏。你有一個commandButton與widgetVar="startButton1"。當您點擊它時，onclick進來並禁用commandButton。它還通過pbAjax.start()（<p:progressBar>有widgetVar = "pbAjax.start()"）發信號<p:progressBar>。

<p:progressBar>

<p:progressBar widgetVar="pbAjax" value="#{progressBean.progress}" ajax="true" labelTemplate="{value}%"> 
    <p:ajax event="complete" listener="#{progressBean.onComplete}" 
      update="growl" oncomplete="startButton1.enable()"/> 
</p:progressBar> 

<p:progressBar>只會不停的叫喚#{progressBean.progress}更新進度。當進度達到100%<p:ajax>開始並呼叫#{progressBean.onComplete}。 <p:commandButton>得到重新啓用，<p:growl>得到更新。注意我沒有使用PF(...)。說實話，我不確定它是否有所作爲，我沒有測試。

注意

在你<p:progressBar>你有oncomplete="startButton2.enable()。它應該是startButton1.enable()，因爲您的<p:commandButton>的widgetVar值爲startButton1。

另外，請注意，我沒有使用styleClass="animated"。有了這個，你會得到一個平淡無奇的藍色酒吧。如果你想使用它，那麼你需要採取一些額外的步驟。看看你的代碼，看起來你是直接從PrimeFaces展示中獲得的，所以我也會使用他們的資產。

使用styleClass="animated"

首先，你會在你的webapp文件夾（Web Pages針對NetBeans）創建一個名爲resources文件夾。然後創建一個名爲css的文件夾並添加一個名爲style.css的樣式表。目錄結構將如下所示：resources/css/style.css。在style.css你將不得不定義這個規則。 （如果這很讓人困惑，請不要擔心，我將在下面列出整個代碼）。

.animated .ui-progressbar-value { 
    background-image: url("#{resource['images/pbar-ani.gif']}"); 
} 

然後你會resources下創建一個images文件夾，將圖像 pbar-ani.gif該文件夾（resources/images/pbar-ani.gif）英寸下圖。

請確保您有在<h:head><h:outputStylesheet name='css/style.css' />和<p:progressBar>添加styleClass="animated"。

重要！

如果您使用的PrimeFaces 3.5像我這樣的圖像將不會顯示（包括當你不使用styleClass）。如果您在螢火蟲仔細觀察，你會看到下面的錯誤

Uncaught TypeError: Object #<Object> has no method 'easeInOutCirc' 

One workaround I found這是簡單地使用虛擬<p:dialog>。

就是這樣。

您可以通過developer's guide瞭解更多有關progressBar的信息。

如果你想知道我怎麼知道在哪裏得到圖像，你將不得不下載展示。你可以閱讀這個article to find out how to download the showcase。 在我看來，如果你真的想使用展示代碼，最好是隻要下載演示。很多時候，我要麼沒有看到完整的圖片，要麼展示中的代碼有一些錯誤

無論如何，這裏是示例代碼的承諾。我使用展櫃中的ProgressBean（與您的相同）。請記住，您將不得不提出與對象如何與ProgressBean進行交互以更新進度欄的邏輯。

摘要

<h:head> 
    <h:outputStylesheet name='css/style.css' /> 
</h:head> 
<h:body> 
    <h:form > 
     <p:growl id="growl" /> 
     <h3>Advanced Ajax ProgressBar</h3> 
     <p:commandButton value="Start" type="button" onclick="pbAjax.start(); 
       startButton1.disable();" widgetVar="startButton1" /> 
     <br /><br /> 
     <p:progressBar widgetVar="pbAjax" value="#{progressBean.progress}" ajax="true" labelTemplate="{value}%" styleClass="animated"> 
      <p:ajax event="complete" listener="#{progressBean.onComplete}" 
        update="growl" oncomplete="startButton1.enable()"/> 
     </p:progressBar> 
     <p:dialog></p:dialog><!-- For PrimeFaces 3.5 --> 
    </h:form> 
</h:body> 

，並記住您的目錄

resources/css/style.css

resources/images/pbar-ani.gif