后端处理的进度条主要内容 [英] 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:

我有一个命令按钮可以在后端进行一些处理.我想显示一个进度条，当支持 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 value="Start" type="button" onclick="pbAjax.start();startButton1.disable();" widgetVar="startButton1" />

这里没有什么令人印象深刻的.您有一个带有 widgetVar="startButton1" 的 commandButton.当您单击它时，onclick 会进入并禁用 commandButton.它还指示 通过 pbAjax.start() 开始( 有 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 widgetVar="pbAjax" value="#{progressBean.progress}" ajax="true" labelTemplate="{value}%">
    <p:ajax event="complete" listener="#{progressBean.onComplete}"
            update="growl" oncomplete="startButton1.enable()"/>
</p:progressBar>

只会继续调用 #{progressBean.progress} 来更新进度.当进度达到 100% 开始并调用 #{progressBean.onComplete}. 重新启用并且 得到更新.请注意我没有使用 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"

首先，您将在 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 文件夹并放置图片pbar-ani.gif 在该文件夹中 (resources/images/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.

确保在 中有 并添加 中的 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'

我发现的一个解决方法 就是简单地使用虚拟 .

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屋！