进度条的Primefaces动态标签 [英] Primefaces dynamic label for progressbar

问题描述

我正在将JSF与Primefaces一起使用.我有一个漫长的任务，在此期间，我想向用户显示一个进度条，并以进度(int)和状态(String)为指标.这两个参数映射到后端bean的两个字段.如果使用<p:poll>，则可以同时更新两者，如以下代码所示:

Hi I am using JSF with Primefaces. I have a long task, during which I want to show user a progress bar, with the progress (int) and status (String) as an indicator. The two parameters are mapped to the two fields of a backend bean. If I use <p:poll>, I can update both, as in the following code:

<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().这很好.现在我有两个问题:

Once user press a button, pbPoll.start(). This works fine. Now I have two questions:

(1)是否可以最初隐藏进度条?我知道我可以将display:none放在CSS中，并在单击按钮时让它显示出来.但是民意调查更新将再次隐藏进度栏.也许使用渲染.如果是这样，请告诉我怎么做.

(1) is it possible to hide the progressbar initially? I know I can put display:none in the css and let it show up when the button is clicked. But the poll update will hide the progressbar again. Maybe use rendered. If so, please tell me how.

(2)我可以不使用民意调查，因为progressBar本身具有ajax函数?请注意，我在上面的代码中设置了ajax = false. 在他们的网站上说动态进度标签"已添加.我尝试过，但是标签以某种方式仅显示"{value}%"而没有statusMessage.我想知道这是否是因为#{statusMessage}需要另一次提取，因此被忽略了，而这两者都是在民意测验中检索的.

(2) can I use without poll since progressBar has ajax function itself? Notice that I set ajax=false in the code above. On their website, it says "dynamic progress label" is added. I tried but somehow the label only displays the "{value}%" without the statusMessage. I wonder if this is because #{statusMessage} requires another fetch, therefore ignored, while both are retrieved in poll.

谢谢！

推荐答案

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

1. Yes you can. It's actually really easy. Wrap your <p:progressBar/> in a panel like <h:panelGrid/> and set the rendered attribute on the progress bar to a boolean in the backing 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>

，然后使用按钮(或其他按钮)切换布尔值并更新面板

and then use a button (or something) to toggle the value of the boolean and update the panel

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

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

One thing you need to be careful about is that the same button that toggles the progress bar's visibility should not use the onclick event but rather the oncomplete to start the progress bar, the reason being that onclick fires before the request hits the server and as at that time, the progress bar does not exist in the DOM so start() will be undefined.

您就对了.如果您要在开发人员控制台中查看一下，将会看到以下有关进度条的ajax响应

You're right on that one. If you'll take a look in your developer console, you'd see the following for the ajax response to the progress bar

 "thePanel:progress_value":20

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

And that pretty much sums up what the progress bar cares about during the update, the value binding on the bar. Stick with what you have now if this is a must-have for you.

这篇关于进度条的Primefaces动态标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！