爲什麼我的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不顯示，只有數字？

回答

相關問題