后端处理上的进度条素面 [英] Progress bar primefaces on backend processing

问题描述

如果有人可以给我一些有关进度条和ajax后端处理的提示，我将不胜感激.

I would appreciate it if someone can give me some hints about progress bar and ajax back-end processing.

为了澄清我所需要的是以下详细信息:

To clarify what I need following are details:

我有一个命令按钮可以在后端进行一些处理. 我想显示一个进度条，当backing bean完成对后端指令的处理时，进度条达到100％. 我查看了许多线程，但没有运气.他们中的大多数没有显示具体的示例如何执行此操作. 以下是我的代码段:

I have a command button to do some processing at the back-end. I would like to show a progress bar that reach the 100% when the backing bean finishes processing back-end instructions. I looked over many threads but no luck. Most of them did not show a concrete sample how to do that. Below is a snippet of my code:

</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>

这是Progress Brean的代码:

This is the code for the Progress 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;  
  }  
}  

此代码的结果只是一个空白的进度条，而当我单击按钮时什么也没有发生. 提前致谢.

The result of this code is just an empty progress bar and nothing happen when I click on my button. Thanks in advance.

推荐答案

如果我简单地向您介绍示例代码，会更容易，因为您有两个bean，但我不知道它们之间的交互.您可以使用它来将其应用于您的.

It'll be easier if I simply walk you through my sample code since you have two beans and I don't know the interaction between them. You can use it to apply it to yours.

<p:commandButton>

<p:commandButton>

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

这里没什么好印象的.您有一个commandButton和widgetVar="startButton1".当您单击它时，onclick会进入并禁用commandButton.它还通过pbAjax.start()发出<p:progressBar>信号(<p:progressBar>具有widgetVar = "pbAjax.start()").

Nothing impressive here. You have a commandButton with widgetVar="startButton1". When you click on it, onclick comes in and disables the commandButton. It also signals <p:progressBar> to start via pbAjax.start() (<p:progressBar> has 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> will simply keep calling #{progressBean.progress} to update the progress. When the progress reaches 100% <p:ajax> kicks in and calls #{progressBean.onComplete}. <p:commandButton> get re-enabled and <p:growl> gets updated. Notice how I'm not using PF(...). To be honest, I'm not sure if it makes a difference, I did not test.

注意

在您的<p:progressBar>中，您有oncomplete="startButton2.enable().应该为startButton1.enable()，因为您的<p:commandButton>的widgetVar值为startButton1.

In your <p:progressBar> you have oncomplete="startButton2.enable(). It should be startButton1.enable() since your widgetVar value for your <p:commandButton> is startButton1.

此外，请注意，我没有使用styleClass="animated".有了这个，您将获得淡淡的蓝色条形.如果要使用它，则需要采取一些额外的步骤.查看您的代码，看来您是直接从PrimeFaces展示柜中获取代码，因此我也将使用它们的资产.

Also, notice that I did not use styleClass="animated". With this, you'll just get the bland looking blue bar. If you want to use it then you need to take some extra steps. Looking at your code, it seems you're taking it straight from the PrimeFaces showcase so I'll also use their assets.

使用styleClass="animated"

Using styleClass="animated"

首先，您将在webapp文件夹(对于Netbeans为Web Pages)中创建一个名为resources的文件夹.然后创建一个名为css的文件夹，并添加一个名为style.css的样式表.目录结构将如下所示:resources/css/style.css.在style.css中，您将必须定义此规则. (不用担心这会造成混淆，我将在下面提供完整的代码).

First, you're going to create a folder called resources in your webapp folder (Web Pages for Netbeans). Then create a folder called css and add in a stylesheet called style.css. The directory structure will be like this: resources/css/style.css. In style.css you're going to have to define this rule. (Don't worry if this is confusing, I'll have the whole code below).

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

然后您将在resources下创建一个images文件夹并将图像放置 该文件夹(resources/images/pbar-ani.gif)中的pbar-ani.gif.下图.

Then you're going to create an images folder under resources and place the image pbar-ani.gif in that folder (resources/images/pbar-ani.gif). Image below.

确保在<h:head>中具有<h:outputStylesheet name='css/style.css' />，并在<p:progressBar>中添加styleClass="animated".

Make sure you have <h:outputStylesheet name='css/style.css' /> in <h:head> and add styleClass="animated" in <p:progressBar>.

重要！

如果您像我一样使用PrimeFaces 3.5，图像将不会显示(包括当您不使用styleClass时).如果您仔细查看Firebug，将会看到以下错误

If you are using PrimeFaces 3.5 like I am the image will just not display (including when you're not using styleClass). If you look closely at Firebug you will see the following error

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

我发现的一种解决方法为此，只需使用虚拟<p:dialog>.

One workaround I found for this is to simply use dummy <p:dialog>.

就是这样.

您可以通过开发人员指南获得有关progressBar的更多信息.

You can get more information about the progressBar through the developer's guide.

如果您想知道我如何知道从何处获取图像，则必须下载展示柜.您可以阅读此文章，以了解如何下载展示. 我认为，当您确实要使用展示代码时，最好只是下载演示.很多时候我要么看不到完整图片，要么展示柜中的代码有一些错误

In case you're wondering how I knew where to get the image you'll have to download the showcase. You can read this article to find out how to download the showcase. In my opinion, when you really want to use the showcase code, it's better if you simply download the demo. Often time I'm either not seeing the complete picture or the code in the showcase has some mistakes

无论如何，这是所承诺的示例代码.我使用的是展示柜中的ProgressBean(与您的展示柜相同).请记住，您将必须弄清楚对象与ProgressBean交互方式的逻辑，以更新进度栏.

Anyway here's the sample code as promised. I'm using the same ProgressBean from the showcase (same as yours). Keep in mind that you will have to come up with the logic with how your object interacts with ProgressBean to update the progress bar.

摘要

<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

这篇关于后端处理上的进度条素面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！