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

我有以下XHTML文件有一个进度条：为什么我的p：progressBar不显示，只有数字？

<!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

@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（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>

来源

2014-12-25 DP_

非常侧面的说明：“*属性缓存未在组件progressBar *中定义。 – Tiny

@BalusC查看更新1. –

问题是双重的。

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

enter image description here

看来，<p:progressBar>脚本ISN” t默认包含在PrimeFaces mobile 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移动的错误。你最好的选择是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

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

来源

2014-12-27 13:10:32 BalusC

问题已在PF中报告：http：//code.google.com/p/primefaces/issues/detail？id = 7717，请'明星'问题 – Kukeltje

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

回答

相关问题