Jsf 后端处理上的进度条

如果有人能给我一些关于进度条和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>

这段代码的结果只是一个空的进度条，当我点击我的按钮时，什么也没有发生。

---

提前谢谢

如果我简单地引导您浏览我的示例代码，会更容易，因为您有两个bean，我不知道它们之间的交互。您可以使用它将其应用于您的

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

<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（…）

。老实说，我不确定这是否有什么不同，我没有测试

注意

在

中有

oncomplete=“startButton2.enable（）

。它应该是

startButton1.enable（）

，因为

的

widgetVar

值是

startButton1

另外，请注意，我没有使用

styleClass=“animated”

。这样，您只会得到外观平淡的蓝色条。如果您想使用它，则需要采取一些额外的步骤。查看您的代码，您似乎是直接从PrimeFaces showcase中获取它，因此我也将使用它们的资源

使用

styleClass=“animated”

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

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

首先，您将在

webapp

文件夹中创建一个名为

resources

的文件夹（

webpages

用于Netbeans）。然后创建一个名为

css

的文件夹，并添加一个名为

style.css

的样式表。目录结构如下：

resources/css/style.css

。在

style.css

中，您必须定义此规则。（如果混淆，请不要担心，我将在下面给出整个代码）

然后，您将在

资源下创建一个
图像
文件夹

，并放置图像

pbar ani.gif

在该文件夹中（

resources/images/pbar ani.gif

）。下图

确保在

中有

，并在

中添加

styleClass=“animated”

重要！

如果您像我一样使用PrimeFaces 3.5，图像将不会显示（包括您不使用

styleClass

时）

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

记住你的目录

resources/css/style.css

---

resources/images/pbar ani.gif

如果你有什么不明白的地方，尽管问吧。我不会咬你的；）。如果你回复我，想让我看的话，请写上我的名字（例如

@Andy

）。

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