Question

我有一个带有进度条的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>

在correspoding bean中，我将progress进度设置为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 %字母，但不能看到进度条本身。

Screenshot

如何修复它（使进度条可见）？

更新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>

Answer 1

问题是双重的。

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

enter image description here

看来<p:progressBar>脚本默认包含在PrimeFaces mobile CSS / JS中，因此需要单独加载。但是，生成的HTML输出中的内联PrimeFaces.cw(...)调用对此负责，似乎缺少应该表示CSS / JS资源名称的第4个参数。请参阅生成的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移动版中的一个错误。你最好的选择是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资源名称时，这基本上默认为小部件名称的小写版本。现在，进度计数显示为粗体，并且该计数前面有一个空格：

enter image description here

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

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

同时，您可以通过在内部添加以下CSS来内联或通过自定义CSS文件来设置样式：

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

enter image description here

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

为什么我的p：progressBar没有显示，只有数字？

1 个答案: