后端处理的进度条主要表面

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>

这是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;  
  }  
}  

这段代码的结果只是一个空的进度条,当我点击我的按钮时没有任何反应.提前致谢.

Answer 1

如果我简单地引导您完成示例代码,那将会更容易,因为您有两个bean并且我不知道它们之间的交互.您可以使用它将它应用到您的身上.

<p:commandButton>

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

这里没什么好看的.你有一个commandButton带widgetVar="startButton1".当您单击它时,onclick进入并禁用commandButton.它还<p:progressBar>通过pbAjax.start()(<p:progressBar>has widgetVar = "pbAjax.start()")开始发出信号.

<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()因为你widgetVar对你的价值<p:commandButton>就是startButton1.

另外,请注意我没有使用styleClass="animated".有了这个,你就会得到一个平淡无奇的蓝色酒吧.如果你想使用它,那么你需要采取一些额外的步骤.看看你的代码,看起来你是直接从PrimeFaces展示,所以我也将使用他们的资产.

运用 styleClass="animated"

首先,您将创建一个在文件夹中调用resources的webapp文件夹(Web Pages对于Netbeans).然后创建一个名为的文件夹css并添加一个名为的样式表style.css.目录结构如下:resources/css/style.css.在style.css你将不得不定义这个规则.(如果这令人困惑,请不要担心,我将在下面提供完整的代码).

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

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

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

重要!

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

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

我发现的一个解决方法是简单地使用虚拟<p:dialog>.

而已.

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

如果你想知道我怎么知道在哪里获得图像,你将不得不下载展示.您可以阅读本文以了解如何下载展示.在我看来,当你真的想要使用展示代码时,如果你只是下载演示,那就更好了.通常,我要么没有看到完整的图片,要么展示中的代码有一些错误

无论如何这里是承诺的示例代码.我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