进度条的 Primefaces 动态标签

Question

您好，我正在使用带有 Primefaces 的 JSF。我有一个很长的任务，在此期间我想向用户显示一个进度条，以进度（int）和状态（String）作为指示器。这两个参数映射到后端 bean 的两个字段。如果我使用<p:poll>，我可以同时更新两者，如下代码所示：

<p:progressBar id="progress" ajax="false" value="#{backendBean.progress}" widgetVar="pbAjax"
  labelTemplate="{value}%: #{backendBean.statusMessage}" style="width:400px; font-size:12px"/>
<p:poll interval="1" id="poll" autoStart="false" update="progress" widgetVar="pbPoll"/>

一旦用户按下按钮，pbPoll.start()。这工作正常。现在我有两个问题：

(1) 最初可以隐藏进度条吗？我知道我可以将 display:none 放在 css 中，并在单击按钮时让它显示出来。但是投票更新会再次隐藏进度条。也许使用渲染。如果是这样，请告诉我如何。

(2) 由于 progressBar 本身具有 ajax 功能，我可以不使用 poll 吗？请注意，我在上面的代码中设置了 ajax=false。 On their website, it says "dynamic progress label" is added。我试过了，但不知何故，标签只显示"{value}%" 而没有statusMessage。我想知道这是否是因为 #{statusMessage} 需要另一个提取，因此被忽略，而两者都在 poll 中检索。

谢谢！

Answer 1

1. 是的，你可以。这真的很容易。将您的 <p:progressBar/> 包装在像 <h:panelGrid/> 这样的面板中，并将进度条上的 rendered 属性设置为支持 bean 中的布尔值

    <h:panelGrid id="progressBarPanel">
                   <p:progressBar id="progress" interval="100"  rendered="#{backendBean.progressBarRendered}" ajax="true" value="#{backendBean.progressMonitor}" widgetVar="pbAjax" labelTemplate="{value}%: #{backendBean.progressMonitor}" style="width:300px; font-size:12px"/>
    </h:panelGrid>
   

   然后使用按钮（或其他东西）来切换布尔值并更新面板

     <p:commandButton value="Test Progress Bar" action="#{addressUpdate.progressBarControl}" oncomplete="pbAjax.start();" update="progressBarPanel"/>
   

   您需要注意的一件事是，切换进度条可见性的同一个按钮不应使用onclick 事件，而应使用oncomplete 来启动进度条，原因是onclick 触发在请求到达服务器之前，到那时为止，进度条在 DOM 中不存在，所以 start() 将是未定义的。

2. 你是对的。如果您查看开发者控制台，您会看到以下 ajax 对进度条的响应

    "thePanel:progress_value":20
   

   这几乎总结了进度条在更新期间关心的内容，即进度条上的值绑定。如果这是您的必备品，请坚持使用您现在拥有的东西。