问后端处理中的进度条素面

EN

如果我简单地向您介绍我的示例代码，会更容易一些，因为您有两个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(...)的。老实说，我不确定这是否有区别，我没有测试。

Note

在你的<p:progressBar>中，你有oncomplete="startButton2.enable()。它应该是startButton1.enable()，因为<p:commandButton>的widgetVar值是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']}");
}

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

​

​

确保<h:outputStylesheet name='css/style.css' />在<h:head>中，在<p:progressBar>中添加styleClass="animated"。

重要！

如果你像我一样使用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