为什么我的 p:progressBar 不显示，只显示数字？
DP_*_*DP_ 2 jsf primefaces jsf-2
我有以下带有进度条的 XHTML 文件：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:pm="http://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE"/>
<h:head></h:head>
<f:event listener="#{mainOp.init}" type="preRenderView" />
<h:body id="body">
<pm:page id="page">
<pm:header title="MyProduct">
</pm:header>
<pm:content id="content">
<p:outputLabel value="..."/>
<p:graphicImage id="image" rendered="true"
value="..."
cache="false"/>
<p:progressBar id="progressBar"
value="#{mainOp.progress}"
rendered="true"
cache="false"
labelTemplate="{value}%"
style="width:400px; font-size:12px"
interval="100"/>
...
</pm:content>
<pm:footer title="m.MyProduct.info"></pm:footer>
</pm:page>
</h:body>
</html>
在相应的 bean 中，我将进度属性设置为 21。
@ManagedBean(name = MainOpView.NAME)
@SessionScoped
public class MainOpView {
public static final String NAME = "mainOp";
[...]
private Integer progress = 0;
public void init()
{
[...]
progress = 21;
}
public Integer getProgress() {
return progress;
}
public void setProgress(final Integer aProgress) {
progress = aProgress;
}
}
渲染页面时，我可以看到21 %文字，但看不到进度条本身。
我该如何修复它（使进度条可见）？
更新 1（2014 年 12 月 27 日 13:43 MSK）：我正在使用 Primefaces 5.1。
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>5.1</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.1.11</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.1.11</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
</dependency>
问题有两个方面。
第一个问题是一个错误primefaces:primefaces-mobile.js，在浏览器的 JS 控制台中暴露如下（应该注意的是，我删除了它<p:graphicImage>以减少噪音）：
默认情况下，该<p:progressBar>脚本似乎并未包含在 PrimeFaces 移动 CSS/JS 中，因此需要单独加载。然而，PrimeFaces.cw(...)生成的 HTML 输出中的内联调用（负责此操作）似乎缺少代表 CSS/JS 资源名称的第四个参数。请参阅生成的 HTML 输出的以下摘录（格式化我的）：
<script id="page:progressBar_s" type="text/javascript">
$(function() {
PrimeFaces.cw(
"ProgressBar",
"widget_page_progressBar",
{ id: "page:progressBar", widgetVar: "widget_page_progressBar", initialValue: 21, ajax: false, labelTemplate: "{value}%" }
);
});
</script>
这会导致 CSS/JS 资源名称最终为undefined：
<script id="page:progressBar_s" type="text/javascript">
$(function() {
PrimeFaces.cw(
"ProgressBar",
"widget_page_progressBar",
{ id: "page:progressBar", widgetVar: "widget_page_progressBar", initialValue: 21, ajax: false, labelTemplate: "{value}%" }
);
});
</script>
这显然是 PrimeFaces mobile 中的一个错误。您最好的办法是向 PF 人员报告此问题。
同时，您可以通过内联或通过自定义脚本文件在头部末尾或正文开头执行此脚本来解决此问题：
var originalPrimeFacesCw = PrimeFaces.cw;
PrimeFaces.cw = function(name, id, options, resource) {
resource = resource || name.toLowerCase();
originalPrimeFacesCw.apply(this, [name, id, options, resource]);
};
当没有定义 CSS/JS 资源名称时，这基本上默认为小写版本的小部件名称。现在进度计数显示为粗体，并且该计数前面有一个空格：
这给我们带来了第二个问题。CSS.ui-progressbar .ui-widget-beader中缺少背景颜色。在标准（非移动）PrimeFaces 上，这是在特定于主题的 CSS 文件中定义的，例如primefaces-aritso:theme.css. 对于移动 PrimeFaces，这种样式是预期的primefaces:primefaces-mobile.css，但它只包含样式<p:panel>。
我不确定这是否是 PrimeFaces 移动版的错误或疏忽。同样在这里，您最好的选择是向 PF 人员报告此问题。
同时，您可以通过内联或通过自定义 CSS 文件在头部末尾添加以下 CSS 来设置其样式：
.ui-progressbar .ui-widget-header {
background-color: pink;
}
您可能只想添加一个小边框作为最后的修饰。