Fatal编程技术网
  • jsf/
  • Jsf 为什么我的p:progressBar不显示，只显示数字？

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

jsf jsf-2 primefaces

Jsf 为什么我的p:progressBar不显示，只显示数字？,jsf,jsf-2,primefaces,Jsf,Jsf 2,Primefaces,我有以下带有进度条的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://primeface

我有以下带有进度条的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>
当页面呈现时，我可以看到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>
这个问题是双重的

第一个问题是primefaces中的一个bug:primefaces-mobile.js，它在浏览器的js控制台中暴露了如下内容注意到，我应该删除了以减少噪音：

默认情况下，该脚本不包含在PrimeFaces mobile CSS/JS中，因此需要单独加载。但是，内联PrimeFaces.cw。。。在生成的HTML输出中调用（负责此操作）似乎缺少第4个参数，该参数应表示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>
这显然是PrimeFaces mobile中的一个bug。你最好把这件事告诉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小部件beader CSS缺少CSS中的背景色。在标准的非移动PrimeFaces上，这是在特定于主题的CSS文件中定义的，例如PrimeFaces aritso:theme.CSS。对于移动PrimeFaces，PrimeFaces:PrimeFaces-mobile.css中需要此样式，但它仅包含样式

我不确定这是PrimeFaces mobile中的错误还是疏忽。同样在这里，你最好的办法是把这个问题交给PF的家伙们

同时，您可以通过在头的末尾添加以下CSS（内联或通过自定义CSS文件）使其成为样式：

.ui-progressbar .ui-widget-header {
    background-color: pink;
}
您可能只想添加一个小小的边框作为最后的修饰。

一个非常重要的注意事项：属性缓存未在组件进度栏中定义。@BalusC请参阅更新1。问题已在PF:中报告，请对问题进行“星型”处理 
.ui-progressbar .ui-widget-header {
    background-color: pink;
}