Why is my p: progressBar not showing, just a number?
I have the 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>
In the correspondence bean, I set the progress proposition 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;
}
}
When the page is displayed, I see the caption 21 %
, but not the progress bar itself.
How can I fix it (make the progress bar visible)?
Update 1 ( 12/27/2014 1:43 PM MSK): I am 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>
source to share
The problem is twofold.
The first problem is a bug in primefaces:primefaces-mobile.js
, which is revealed in the browser JS console (note that I removed <p:graphicImage>
to reduce noise):
It looks like the <p:progressBar>
script is not included by default in PrimeFaces mobile CSS / JS and therefore needs to be downloaded separately. However, the inline call PrimeFaces.cw(...)
in the generated HTML output that is responsible for this does not seem to have the 4th argument, which is supposed to represent the CSS / JS resource name. See the following excerpt from the generated HTML output (mine formatting):
<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>
This causes the CSS / JS resource name to end with 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
This is clearly a bug in PrimeFaces mobile. Your best bet is to report this issue to the PF guys.
In the meantime, you can get around this by executing this script at the end of the head or at the beginning of the body, both inline and 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]);
};
Mostly the default is the lower version of the widget name when no CSS / JS resource name is defined. The progress count is now in bold and preceded by a space:
This brings us to the second problem. There is .ui-progressbar .ui-widget-beader
no background color in CSS in CSS. In the standard (non-mobile) PrimeFaces is defined in the CSS file specific to the theme, for example primefaces-aritso:theme.css
. For mobile PrimeFaces, this style is therefore expected in primefaces:primefaces-mobile.css
, however, it only contains the style <p:panel>
.
I'm not sure here if this is a bug or an oversight in the PrimeFaces mobile. Also here is the best place to report this issue to the PF guys.
In the meantime, you can get it styled by adding the following CSS at the end of the head, both inline and custom CSS file:
.ui-progressbar .ui-widget-header {
background-color: pink;
}
You might want to add a tiny border as a finishing touch.
source to share