Introducción a Primefaces

22
108349

Introducción a Primefaces

Índice de contenidos

  1. Introducción
  2. Añadiendo el soporte para Primefaces
  3. Creando una página de prueba
  4. Añadir el soporte de un ManagedBean
  5. Comparativa con otras librerías
  6. Conclusiones

1. Introducción

PrimeFaces es una librería de componentes visuales open source
desarrollada y mantenida por Prime
Technology,
una compañía Turca de IT especializada en consultoría ágil, JSF, Java
EE y Outsourcing. El proyecto es liderado por Çağatay Çivici, un
miembro del «JSF Expert Group» (y forofo del Barça).

Las principales características de Primefaces son:

  • soporte nativo de Ajax, incluyendo Push/Comet.
  • kit para crear aplicaciones web para móviles.
  • es compatible con otras librerías de componentes, como JBoss
    RichFaces
    .
  • uso de javascript no intrusivo (no aparece en línea dentro de
    los elementos, sino dentro de un bloque <script>).
  • es un proyecto open source, activo y bastante estable entre
    versiones.

Algunos inconvenientes podrían ser:

  • para utilizar el soporte de Ajax tenemos que indicarlo
    explícitamente, por medio de atributos específicos de cada componente.
  • no podemos utilizar el soporte de Ajax de JSF 2 (mediante
    <f:ajax>) con los componentes de Primefaces.

Este tutorial no pretende hacer un análisis exahustivo de todos los
componentes de Primefaces (más de 90 en el momento de escribir este
tutorial), sino servir de introducción y mostrar lo necesario para
poder utilizar la librería en nuestras aplicaciones web.

Este tutorial se apoya en el
de mi compañero Jose de introducción a RichFaces
,
y la similitud de los ejemplos se ha hecho a propósito, para que
resulte más sencillo comparar la utilización de ambas librerías.

2. Añadiendo el soporte para Primefaces

Configuración del pom.xml:

Descriptor de despliegue de la aplicación web:

Por último, y lo mejor, el fichero de configuración de JSF. Con el
uso de anotaciones en nuestros bean manejados y el soporte nativo de
Facelets, este fichero puede ser tan simple como esto:

3. Creando una página de prueba

Para probar si funciona nuestra configuración, vamos a crear la
página index.xhtml, con el siguiente contenido:

Hemos especificado el espacio de nombres «xmlns:p» para poder
utilizar la librería de componentes de Primefaces y, como no, hemos
añadido un componente calendario dentro de un panel, aunque podríamos
haber elegido cualquiera de los que hay en la librería
de componentes de Primefaces
.

Si abrimos la página con un navegador, veremos el resultado:

Vista con el calendario dentro de un panel

4. Añadir el soporte de un ManagedBean

Vamos a añadir un controlador para nuestra vista que guarde en una
variable la fecha seleccionada en el calendario. Además, cuando se
seleccione
la fecha, se realizará una llamada por Ajax al método «cambioFecha» del
controlador, que añadirá un mensaje de Faces que se mostrará en la
página.

El fichero PruebaView.java es el siguiente:

Debemos modificar el código de nuestra vista para enlazar el valor
de la fecha del calendario con la variable «date» del controlador.
Además habrá que llamar al método «cambioFecha» cuando cambie la
selección y añadir el componente que mostrará los mensajes. Se ha
utilizado el componente «growl» de Primefaces, que mostrará los
mensajes dentro de unos «pop-ups» que desaparecerán transcurridos unos
segundos.

Ahora, cuando cambiemos la fecha del calendario, veremos que aparece
el siguiente mensaje:

Mensaje emergente con la fecha seleccionada

5. Comparativa con otras librerías

Para terminar, vamos a ver un resumen de las características de
Primefaces comparándolo con otras dos librerías: ICEfaces y RichFaces.
El siguiente cuadro amplía el
desarrollado por Jose
en su tutorial de introducción a RichFaces,
añadiendo las características propias de Primefaces.

Característica ICEfaces RichFaces Primefaces
Soporte de Ajax Es transparente para el desarrollador, lo implementa de forma
nativa en todos los componentes mediante la propiedad partialSubmit
Tenemos que hacer uso de Ajax4JSF, que no es tan transparente
para el desarrollador, puesto que, además de introducir los componentes
de RichFaces, tenemos que añadir componentes no visuales de la librería
Ajax4JSF.
Es transparente para el desarrollador,
aunque para activarlo deben utilizarse atributos específicos para
lanzar un método del servidor y para indicar los componentes a
actualizar.
Librerías en las que se basan Usa el soporte de prototypejs, aunque la parte de Ajax la han
rescrito y para los efectos visuales utilizan script.aculo.us.
Usa el soporte de prototypejs y script.aculo.us, aunque soporta también jquery. Utiliza el soporte de jQuery y jQuery UI para los efectos visuales.
Personalización de la interfaz de usuario Incorpora el concepto de skins y distribuye 3 temas. Incorpora el concepto de skins y distribuye 12 temas, aunque
se pueden encontrar más en el repositorio de SNAPSHOTS.
Incorpora el concepto de skins, utilizando ThemeRoller, y dispone de 26 temas prediseñados.
Número de componentes Tiene 79 componentes en la versión
básica
, a los que hay que sumar 32 de la versión empresarial, esta última es de pago. La
percepción es que estan inviertiendo esfuerzos en mejorar la versión
empresarial y, como es lógico, esperan obtener beneficio económico por
ello.
Tiene 212 componentes entre los propios de RichFaces y
los de Ajax4JSF. Con RichFaces todos los componentes son OpenSource y
podemos usar un Pick List sin contratar nada, sin embargo, con
ICEfaces sin queremos un Dual List o pagamos o lo implementamos nosotros.
Tiene más de 90 componentes OpenSource, algunos muy avanzados como el HTMLEditor. Además dispone de un kit para crear interfaces web para teléfonos móviles.
Licencia MPL 1.1, que cubre la LGPL V 2.1. Si bien disponen de una
versión empresarial con licencia comercial.
LGPL V 2.1. en su totalidad. Apache
License V2
Relevancia Ha sustituido a Woodstock como librería de componentes de
referencia de Sun para el desarrollo de aplicaciones RIA. Se
distribuye, por defecto, con NetBeans.
Es la librería de componentes visuales de Jboss, se integra,
por defecto con Jboss
Seam
, aunque éste también soporta ICEfaces.
Ha
sido una de las primeras librerías capaces de integrarse con JSF 2 y
viene pisando fuerte debido a la diversidad y calidad de sus
componentes. Puede utilizarse junto a Richfaces, pero no es compatible con ICEfaces.

6. Conclusiones

Existen actualmente bastantes librerías de componentes para JSF. El
elegir utilizar una u otra dependerá en gran medida del número y la
calidad de componentes que nos ofrezca, la estabilidad en los cambios
de versión, el disponer de una buena documentación y la utilización e
integración con otros estándares.

Se puede decir que Primefaces cumple sobradamente con todas esas características, por lo que puede
ser una buena elección. Además hay que tener en cuenta que no estamos
limitados a utilizar una única librería, aunque en ese caso habría
investigar un poco más para estar seguros de que no se produzcan
incompatibilidades entre ellas, que podrían darnos muchos quebraderos de cabeza.

Desde Autentia siempre
procuramos estar al día en este tipo de tecnologías y os animamos a que
deis también el paso si no lo habéis hecho ya. Esperamos que nuestros
tutoriales os ayuden un poquito a conseguirlo.

Un saludo.

22 Comentarios

  1. Lo primero de todo, felicitaros por brindar a la gente la posibilidad de conocer de una forma tan simple y didáctica todas las diferentes tecnologías existentes a través de vuestros tutoriales.

    He visto el manual de PrimeFaces y creo que es la mejor librería JSF que he podido ver. Además, es la primera que veo como en su documentación muestra un ejemplo de cómo generar mediante programación contendidos web sin etiquetas XML a través del atributo dynamic. Actualmente estoy decidiendo que tecnología utilizar GWT o JSF porque mi solución requiere de una generación dinámica de contenidos y no me serviría con crear páginas JSF con contenido estático. GWT permite mediante programación construir interfaces de usuario pero, perdona mi desconocimiento, todavía no había visto en JSF cómo realizarlo. Seguro que todas las librerías lo permiten pero en PrimeFaces es la primera vez que lo veo. ¿Es posible generar dinámicamente interfaces de usuario completas mediante programación en JSF en lugar de etiquetas?.

    Muchas gracias por vuestras aportaciones a este mundillo tan apasionante y un saludo.

    Roberto

  2. Hola ranzgrajal.

    Las páginas JSF pueden incluir contenido estático y dinámico sin ningún problema. El contenido dinámico puede ser generado programáticamente, pero en muchas ocasiones tampoco es necesario, ya que los componentes suelen tomar sus valores de campos de los bean manejados.

    Saludos.

  3. hola todos
    recien entro en primefaces
    si alguien tubiera codigo para
    subir y descargar archivos
    he estado provando del tutorial
    pero no funciona
    gracias

  4. Desde luego funcionaba cuando lo hice. ¿Puedes ser más específico en «qué» es lo que no funciona? Podría ser que hubieses omitido/equivocado algo (o que exista alguna errata), pero necesitaría más información para poder ayudarte.

    Un saludo.

  5. Hola que tal, quisiera saber si podrian ayudar con lo siguiente, estoy haciendo un sistema con java server faces y primefaces de compra y venta de productos, me podrian decir como hago para colocar para cargar una foto

  6. Hola chicaker, no sé si te refieres a colocar una imagen en la página (una etiqueta ) o a subir un fichero de imagen al servidor.
    Para lo primero tienes el tag \\\»graphicImage\\\» del estándar JSF.
    Para lo segundo, Primefaces incluye el componente \\\»fileUpload\\\», que permite subir ficheros al servidor. Te recomiendo echar un vistazo a la documentación de Primefaces.

  7. Hola, soy nuevo en primefaces y me gustaria saber si se pueden hacer aplicaciones web utilizando primefaces y richfaces desde un mismo proyecto en netbeans. será posible? si alguien sabe una solución o conoce un buen tutorial me lo podrían compartor. muchas gracias.

  8. En principio Primefaces y Richfaces trabajan bien juntos. Podrías tener algún problema según las versiones que utilices de ambos, por ejemplo, si éstas utilizan diferentes versiones de la librería de JQuery. Puedes mirar el tutorial de Jose (www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=richFacesJsfIntro) para ver cómo integrar Richfaces en tu proyecto.

  9. gracias elverma. vi el tutorial que me recomendaste, lo intente de nuevo y no pude. tengo problemas con el web.xml conoces otro tutorial donde enseñen paso a paso la integracion de estas dos tecnologias en un solo proyecto? nuevamente gracias!

  10. Hola.

    Estoy echando un vistazo a primefaces y me gustaría saber si es posible crear un proyecto que funcione en tomcat 5.0.16 + eclipse 3.3 + jsf 1.2.

    Parece que las librerías estas para usar jsf 2.0 y tomcat 6 o superior.

    Gracias por el tutorial.

    Salu2

  11. Hola,
    Primero felicitaros por el tutorial, muy didactico y paso a paso sin saltarse ninguna etapa. Pero no me llega a funcionar, cuando le pongo el listener, para que avise cuando cambie de fecha, he metido una traza en el metodo \\\»cambioFecha\\\», y no pasa por ahi, si se os ocurre que es lo que puede estar pasando, os agradeceria que me lo comentaseis.
    Muchas gracias

  12. buen dia amigos de adictos al trabajo….primero quiero felicitarlos por tan buenos aportes que generan…pues me encuentro en la situación de que soy novato en java server faces y pues me esta costando un poco usar primefaces..pues deseaba ver si alguien podria ayudarme a compartir mas manuales un poco mas actualizados de implementaciones con primefaces…ya que este tutorial lo hicieron en el 2010..y pues pueda ser que de ahi dependan los errores…bueno les agradecer mucho su ayuda….gracias.

  13. Hola, soy novato en el desarrollo de aplicaciones web java así que mi pregunta es un poco ridícula. ¿En qué carpeta del proyecto coloco el ManagedBean de la vista?
    Saludos y gracias por la ayuda.

  14. Hola SeeGaryTo.
    El ManagedBean es una clase Java, por lo que se coloca en la carpeta de fuentes del proyecto, en mi caso dentro del paquete \\\»com.autentia.tutorial.view\\\». Lo importante son las anotaciones @ManagedBean
    @ViewScoped, que harán que el Bean esté disponible desde la vista a través de la variable \\\»pruebaView\\\» (por defecto es el mismo nombre de la clase comenzando por minúsculas).
    Espero haber resuelto tu duda.
    Un saludo.

  15. Hola que tal, tengo un problama con un pequeño proyecto en manos, con un error que no me deja dormir, estoy usando tomcat, y postgresQL, como BD, estoy tratando de hacer un logeo(sin exito), pues el servidor encontró un error que no logro decifrar:WARNING: /login.xhtml @19,82 value=\\\»#{loginBean.estu.cuenta}\\\»: Objetivo inalcanzable, identificador \\\’loginBean\\\’ resuelto a nulo
    javax.el.PropertyNotFoundException: /login.xhtml @19,82 value=\\\»#{loginBean.estu.cuenta}\\\»: Objetivo inalcanzable, identificador \\\’loginBean\\\’ resuelto a nulo, me pregunto si podrias ayudarme a entender el error para asi dar solución al mismo gracias…

  16. Pues parece que no está encontrando el bean manejado. Es posible que no hayas declarado \\\»loginBean\\\» como un bean manejado. Podrías hacerlo utilizando la anotación @ManagedBean o mediante el fichero faces-config.xml.

  17. Hola, tengo un problema con los inputmask de los primefaces.
    Necesito que en una mascara \\\»a*-9999/99\\\» me permita introducir opcionalmente un espacio en blanco en el segundo carácter.
    ¿Alguna sugerencia?

  18. Hola fhv.

    En principio el componente no soporta máscaras de ese tipo. Todo lo que permite es añadir una parte opcional, pero siempre al final de la máscara. Te remito al Masked Input Plugin, en el que se basa el componente \\\»inputmask\\\».

    http://digitalbush.com/projects/masked-input-plugin/

    Otra opción podría ser utilizar un \\\»inputtext\\\» con un validador por expresión regular.

    http://stackoverflow.com/questions/10192108/restrict-inputtext-value-to-alphabetic-characters-only

  19. Buenas una pregunta, tengo una aplicacion la cual utilizo un tema de primefaces pero el cliente desea que reduzca el tamaño de letra de la paginas, por eso deseo reducir el tamaño de las letras pero deseo modificar el tema para no incluir una clase css en cada etiqueta.. gracias…

  20. Buenas tardes, soy nuevo en este framework, estoy haciendo un front que se conecta a base de datos, presenta en dos (p:selectOneMenu) los datos,
    pero al querer darle la funcionalidad de que al seleccionar del primer (p:selectOneMenu), el segundo cambie los valores con relacion al primero.
    pero no funciona, agradecria si me pudieran dar una orientacion sobre la funcianlidad de los eventos que se debe usar, he replicado los ejemplos que presenta https://www.primefaces.org (p:selectOneMenu) y no me funciona.

    Saludos cordiales.

Dejar respuesta

Please enter your comment!
Please enter your name here