为什么我的 p:progressBar 不显示，只有数字？答案

【问题标题】：Why is my p:progressBar not displayed, only the number?为什么我的 p:progressBar 不显示，只有数字？
【发布时间】：2014-12-25 09:25:35
【问题描述】：

我有以下带有进度条的 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（27.12.2014 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>

【问题讨论】：

附注：“组件progressBar中没有定义属性缓存”。
@BalusC 查看更新 1。

标签： jsf jsf-2 primefaces

【解决方案1】：

问题有两个方面。

第一个问题是primefaces:primefaces-mobile.js 中的一个错误，它在浏览器的 JS 控制台中暴露如下（注意应该是我删除了<p:graphicImage> 以减少噪音）：

<p:progressBar> 脚本似乎默认不包含在 PrimeFaces 移动 CSS/JS 中，因此需要单独加载。但是，负责生成的 HTML 输出中的内联 PrimeFaces.cw(...) 调用似乎缺少应该表示 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 结尾：

GET http://localhost:8088/playground/javax.faces.resource/undefined/undefined.js.xhtml?ln=primefaces&v=5.1
GET http://localhost:8088/playground/javax.faces.resource/undefined/undefined.css.xhtml?ln=primefaces&v=5.1

这显然是 PrimeFaces mobile 中的一个错误。你最好的选择是report 这个问题给 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 资源名称时，这基本上默认为小写版本的小部件名称。现在进度计数显示为粗体，并且该计数前面有一个空格：

这给我们带来了第二个问题。 .ui-progressbar .ui-widget-beader CSS 缺少 CSS 中的背景颜色。在标准（非移动）PrimeFaces 上，这是在特定于主题的 CSS 文件中定义的，例如 primefaces-aritso:theme.css。因此，对于移动 PrimeFaces，这种样式应该出现在 primefaces:primefaces-mobile.css 中，但它只包含 <p:panel> 样式。

我不确定这是 PrimeFaces mobile 中的错误还是疏忽。同样在这里，你最好的选择是report 这个问题给 PF 家伙。

同时，您可以通过在头部末尾添加以下 CSS 来设置样式，无论是内联还是通过自定义 CSS 文件：

.ui-progressbar .ui-widget-header {
    background-color: pink;
}

您可能只想添加一个小边框作为画龙点睛。

【讨论】：

问题已在 PF 中报告：code.google.com/p/primefaces/issues/detail?id=7717，请为问题“加注星标”