jsf - progreso - ¿Por qué mi p: progressBar no se muestra, solo el número?
progress bar javascript (1)
Tengo el siguiente archivo XHTML con una barra de progreso:
<!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>
En el frijol correspoding, establecí el progreso de la propety en 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;
}
}
Cuando se procesa la página, puedo ver el 21 % letras, pero no la barra de progreso en sí.
¿Cómo puedo solucionarlo (hacer visible la barra de progreso)?
Actualización 1 (27.12.2014 13:43 MSK): estoy usando 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>
El problema es doble.
El primer problema es un error en primefaces:primefaces-mobile.js que expone de la siguiente manera en la consola JS del navegador (se debe notar que <p:graphicImage> el <p:graphicImage> para reducir el ruido):
Parece que el script <p:progressBar> no está incluido por defecto en PrimeFaces mobile CSS / JS y, por lo tanto, debe cargarse de forma individual. Sin embargo, la llamada PrimeFaces.cw(...) en línea en la salida HTML generada, que es responsable de eso, parece carecer del 4to argumento que debería representar el nombre del recurso CSS / JS. Vea el siguiente extracto del resultado HTML generado (formateando el mío):
<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>
Esto hace que el nombre del recurso CSS / JS termine como 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
Esto es claramente un error en el móvil PrimeFaces. Su mejor apuesta es informar este problema a los chicos de PF.
Mientras tanto, puede solucionar esto ejecutando este script al final de la cabecera o al principio del cuerpo, ya sea en línea o mediante un archivo de script personalizado:
var originalPrimeFacesCw = PrimeFaces.cw;
PrimeFaces.cw = function(name, id, options, resource) {
resource = resource || name.toLowerCase();
originalPrimeFacesCw.apply(this, [name, id, options, resource]);
};
Básicamente esta es la versión en minúsculas del nombre del widget cuando no se define ningún nombre de recurso CSS / JS. Ahora el recuento de progreso aparece en negrita y hay un espacio delante de ese recuento:
Esto nos lleva al segundo problema. El .ui-progressbar .ui-widget-beader CSS no tiene el color de fondo en el CSS. En las PrimeFaces estándar (no móviles), esto se define en el archivo CSS específico del tema, como primefaces-aritso:theme.css . Para PrimeFaces para dispositivos móviles, este estilo se espera en primefaces:primefaces-mobile.css , pero solo contiene el estilo <p:panel> .
No estoy seguro de si esto es un error o un descuido en el móvil PrimeFaces. También aquí, su mejor apuesta es informar este problema a los chicos de PF.
Mientras tanto, puedes personalizar el estilo agregando el siguiente CSS al final de la cabecera, ya sea en línea o mediante un archivo CSS personalizado:
.ui-progressbar .ui-widget-header {
background-color: pink;
}
Es posible que solo desee agregar un borde pequeño como toque final.