jsf - 后端处理的进度条素面

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

这里没有什么令人印象深刻的。你有一个commandButtonwith 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)。下图。

确保您有in<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'

我为此找到的一种解决方法是简单地使用 dummy <p:dialog>。

而已。

progressBar您可以通过开发者指南获得更多信息。

如果您想知道我是如何知道从哪里获取图像的，您必须下载展示。您可以阅读本文以了解如何下载展示柜。在我看来，当你真的想使用showcase代码时，最好直接下载demo。很多时候我要么没有看到完整的图片，要么展示中的代码有一些错误

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