A continuación crearemos un pequeño ejemplo que ejemplificará el uso de JavaServer Faces 2.1 y PrimeFaces 3.1.1 utilizando el IDE Netbeans 7.1.1.
Lo primero que vamos a hacer es crear un proyecto
Colocamos los datos del proyecto para mi caso colocaré los que se muestran en la imagen:
Oprimimos el botón de siguiente, seleccionamos Glassfish 3.x como servidor de aplicaciones y seleccionamos Finalizar.
Una vez que se crea el proyecto podemos ver la estructura del proyecto que tenemos:
-Web Pages: En esta carpeta se guardarán los archivos referentes a las paginas de Internet, tales como JSP'S, JSF Pages,HTML, XHTML, entre otros, así como archivos de configuración de JSF y de la aplicación tales como : web.xml y faces-config.xml(en este momento no existen pero los crearemos más adelante) .
-Source package: En esta carpeta crearemos todo el código Java que funcionará dentro de nuestra aplicación.
-Dependencies: En esta carpeta podremos ver las dependencias incluidas dentro de nuestro proyecto, se puede ver que por default se incluye una dependencia llamada javaee-web-api-6.0.jar, esta dependencia contiene el api de JavaEE 6.
-Java dependencies: En esta carpeta podremos obtener información sobre la versión de java que utilizaremos, en este caso voy a utilizar JDK 7.
-Proyect Files: En este lugar se crearán los archivos del proyecto, aquí podremos encontrar el archivo clave para maven, este archivo es el POM.xml del cual hablaremos más adelante.
Una vez creado el proyecto vamos a dar click secundario al proyecto ->Properties->Frameworks->Add->JavaServer Faces.
En este lugar vamos a agregar la configuración para JavaServer Faces.
-En la pestaña de Libraries vamos a dar click en Registred Libraries y seleccionaremos JSF 2.1.
-En la pestaña de Configuración vamos a JSF Servlet URL Pattern escribiremos *.faces.
-En la pestaña de Components podemos ver que aparece PrimeFaces, pero no lo seleccionaremos ya que la versión que aparece disponible es la versión 2.2.1 y nosotros utilizaremos la versión más reciente que es la 3.1.1.
Oprimimos Ok y veremos algunos cambios en el proyecto, el primero y el más importante es la creación de una carpeta dentro de Web Pages llamada WEB-INF y el archivo web.xml, este archivo es un archivo clave dentro de las aplicaciones web en java y es donde podremos ver la configuración de JSF, el segundo es la creación de la carpeta Other Sources, es aquí donde colocaremos archivo que utilizaremos dentro de nuestra aplicación tales como archivos .properties, el tercer cambio es la inclusión de las dependencias de JSF en la carpeta de dependencies y el cuarto es la creación de una pagina llamada index.xhtml, la cual es una página de ejemplo de JSF.Todos estos cambios los veremos a detalle.
1.-Archivo web.xml
Como ya lo mencionamos este archivo es el corazón de nuestra aplicación web y es en este lugar donde encontraremos la configuración de JavaServer Faces. Vamos a analizar a detalle los puntos importantes de este archivo.
Lo primero que vamos a analizar son las siguientes líneas las cuales representan un parámetro que nos dice en que modo vamos a estar trabajando con JSF, en este momento podemos ver que esta en modo Development o Desarrollo, pero este puede tomar los valores: Production, Development, UnitTest, SystemTest y Extensión. Estos valores lo único que representan es el tipo de mensajes que veremos dentro de la aplicación.
<context-param> <param-name>javax.faces.PROJECT_STAGE</param-name> <param-value>Development</param-value> </context-param>
La siguiente parte es la configuración del servlet de JavaServer Faces, a través del cual tienen que pasar todas las peticiones, en estas líneas lo que podemos ver es que si se recibe una petición de un recurso cuya extensión sea .faces debe pasar por el Servlet llamado Faces Servlet cuya clase es javax.faces.webapp.FacesServlet. Esto lo que nos indica es que cuando vallamos a referirnos dentro de la aplicación a una pagina hecha con JavaServer Faces debemos colocar la extensión .faces.
<servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping>
2.-La carpeta de Other sources es el lugar donde colocaremos los archivos de configuración del proyecto, tales como archivos .xml o .properties.
3.-Las dependencias que aparecen en la carpeta de dependencies ya estan incluidas dentro de la dependencia javaee-web-api-6.0.jar, por tal motivo las podemos quitar de la aplicación dando click secundario sobre ella y oprimiendo el botón "Remove Dependency" esto se debe hacer en todas las dependencias menos en javaee-web-api-6.0.jar.
4.-La pagina index.jsp ya no será necesaria dentro de nuestra aplicación debido a que a partir de ahora vamos a utilizar archivos con extensión .xhtml llamados (Facelets) por tal motivo nos podemos sentir libres de borrar el archivo index.jsp. En la pagina index.xhtml es donde pondremos nuestro código JSF.
Con esto tenemos lista la configuración de JSF correctamente, hasta este momento nuestro proyecto se debe ver como se muestra en la siguiente imagen:
Como ya se mencionó antes con esto tenemos configurado JSF para poder trabajar con el, lo único que nos hace falta es la configuración de PrimeFaces para esto entraremos en la pagina de http://primefaces.org/downloads.html en la cual podremos encontrar las dependencias y el repositorio necesario para configurar PrimeFaces.
Lo primero que debemos hacer es copiar el repositorio que se encuentra en la pagina, este repositorio lo debemos de agregar al archivo de configuración pom,xml de nuestro proyecto. Para hacer esto dentro de la etiqueta <repositories> agregaremos el repositorio de maven que copiamos de la pagina de primefaces.org, una vez hecho esto vamos a agregar dentro de nuestras dependencias la dependencia de PrimeFaces que vamos a descargar.
Repositorio de PrimeFaces:
<repository> <id>prime-repo</id> <name>PrimeFaces Maven Repository</name> <url>http://repository.primefaces.org</url> <layout>default</layout> </repository>
Dependencia de PrimeFaces:
<dependency> <groupId>org.primefaces</groupId> <artifactId>primefaces</artifactId> <version>3.3.1</version> </dependency>
Una vez hecho esto nuestro proyecto se debe ver de la siguiente forma:
Una vez hecho esto damos click secundario al proyecto y seleccionamos la opción "Build with Dependencies" para descargar la dependenca de PrimeFaces. Una vez hecho esto nos iremos al archivo index.xhtml y agregaremos el namespace de primefaces, esto es agregar dentro de la etiqueta <html> el atributo xmlns:p="http://primefaces.org/ui", con esto estará configurado primefaces dentro de nuestra página utilizando el prefijo "p".Para probar que PrimeFaces fue configurado correctamente vamos a escribir dentro de la etiqueta body lo siguiente:
<p:calendar/>
Nuestro archivo index.xhtml debe quedar de la siguiente forma :
Listo esto nos iremos al nombre del proyecto, click secundario Run y veamos PrimeFaces en acción :
Como podemos ver ya tenemos lista nuestra aplicación para trabajar con JSF 2.1 Primefaces 3.1.1 y Maven.
Coloco adjunto el proyecto en el siguiente archivo: EjemploJSF.rar
Gracias y espero sea de su utilidad.
--------->>>>>>>>>>>>Oracle Certified Java Programer
--------->>>>>>>>>>>>Oracle Certified Web Components Developer
--------->>>>>>>>>>>>IBM Certified Academic Assosiate DB2.
--------->>>>>>>Twitter: @raidentrance
--------->>>>>>>Contacto:raidentrance@gmail.com
esta chido
ResponderEliminar