问题描述
我有以下带有进度条的XHTML文件:
I have following XHTML file with a progress bar:
<!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.
In the correspoding bean, I set the progress propety to 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 %字母，但看不到进度栏本身.
When the page is rendered, I can see the 21 % lettering, but not the progress bar itself.
如何解决(使进度条可见)?
How can I fix it (make the progress bar visible) ?
更新1(2014年12月27日13:43 MSK):我正在使用Primefaces 5.1.
Update 1 (27.12.2014 13:43 MSK): I'm using 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:primefaces-mobile.js中的错误，该错误在浏览器的JS控制台中暴露如下(注意，应该删除了<p:graphicImage>以减少噪音):
First problem is a bug in primefaces:primefaces-mobile.js which exposes as follows in browser's JS console (noted should be that I removed the <p:graphicImage> to reduce noise):
<p:progressBar>脚本似乎默认情况下不包含在PrimeFaces移动CSS/JS中，因此需要单独加载.但是，对此负责的生成的HTML输出中的内联PrimeFaces.cw(...)调用似乎缺少第4个参数，该参数应表示CSS/JS资源名称.请参见生成的HTML输出(格式化我的格式)的以下摘录:
It appears that the <p:progressBar> script isn't by default included in PrimeFaces mobile CSS/JS and thus needs to be loaded individually. However, the inline PrimeFaces.cw(...) call in the generated HTML output, which is responsible for that, appears to lack the 4th argument which should represent the CSS/JS resource name. See the following extract from the generated HTML output (formatting mine):
<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结尾:
This causes the CSS/JS resource name to end up as 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移动版中的错误.最好的选择是报告此问题给PF人员.
This is clearly a bug in PrimeFaces mobile. Your best bet is to report this issue to the PF guys.
与此同时，您可以通过内联或通过自定义脚本文件在头尾或主体开头执行以下脚本来解决此问题:
In the meanwhile, you can workaround this by executing this script in end of head or begin of body, either inline or via a custom script file:
var originalPrimeFacesCw = PrimeFaces.cw;
PrimeFaces.cw = function(name, id, options, resource) {
resource = resource || name.toLowerCase();
originalPrimeFacesCw.apply(this, [name, id, options, resource]);
};
当未定义CSS/JS资源名称时，这基本上默认为小写名称的小写版本.现在进度计数显示为粗体，并且该计数前面有一个空格:
This basically defaults to lowercased version of widget name when no CSS/JS resource name is defined. Now the progress count appears as bold and there's a space in front of that count:
这给我们带来了第二个问题. .ui-progressbar .ui-widget-beader CSS缺少CSS中的背景色.在标准(非移动)PrimeFaces上，这是在特定于主题的CSS文件(例如primefaces-aritso:theme.css)中定义的.因此对于移动PrimeFaces，此样式应在primefaces:primefaces-mobile.css中使用，但是仅包含<p:panel>样式.
This brings us to the second problem. The .ui-progressbar .ui-widget-beader CSS is missing the background color in the CSS. On standard (non-mobile) PrimeFaces, this is defined in theme-specific CSS file such as primefaces-aritso:theme.css. For mobile PrimeFaces, this style is thus expected in primefaces:primefaces-mobile.css, however it contains only the <p:panel> style.
我不确定这是PrimeFaces移动版中的错误还是疏忽.同样在这里，您最好的选择是向PF个人报告.
I'm here not sure if this is a bug or an oversight in PrimeFaces mobile. Also here, your best bet is to report this issue to the PF guys.
与此同时，您可以通过在行首或通过自定义CSS文件的末尾添加以下CSS来使其样式化:
In the meanwhile, you can get it to style by adding the following CSS in end of head, either inline or via a custom CSS file:
.ui-progressbar .ui-widget-header {
background-color: pink;
}
您可能只想添加一个小边框作为画龙点睛.
You might only want to add a tiny border as finishing touch.
这篇关于为什么我的p:progressBar不显示，只显示数字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！