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>）发出信号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>的{{1}}值为startButton1。

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

使用styleClass="animated"

首先，您要在resources文件夹中创建名为webapp的文件夹（Netbeans为Web Pages）。然后创建一个名为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）。图片如下。

Progress Bar

确保<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'

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

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

1 个答案: