A continuación vamos a crear un pequeño sitio que muestre las bondades de utilizar JavaServer Faces utilizando como complemento PrimeFaces, para hacer esto tomaré como base el siguiente post JavaServer Faces y Primefaces utilizando Maven y Netbeans. Una vez configurado JavaServer Faces y Primefaces realizaremos lo siguiente:
Dentro de la carpeta "Source Packages" crearemos un paquete llamado "mx.com.geeksjava.ejemplojsfpt2.model" dentro de este paquete crearemos la clase "Persona".
package mx.com.geeksjava.ejemplojsfpt2.model;
import java.io.Serializable;
public class Persona implements Serializable{
private String nombre;
private String apellidoPaterno;
private String apellidoMaterno;
private Integer edad;
private Character sexo;
private String rfc;
public Persona() {
}
public Persona(String nombre, String apellidoPaterno, String apellidoMaterno, Integer edad, Character sexo, String rfc) {
this.nombre = nombre;
this.apellidoPaterno = apellidoPaterno;
this.apellidoMaterno = apellidoMaterno;
this.edad = edad;
this.sexo = sexo;
this.rfc = rfc;
}
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
public String getApellidoPaterno() {
return apellidoPaterno;
}
public void setApellidoPaterno(String apellidoPaterno) {
this.apellidoPaterno = apellidoPaterno;
}
public String getApellidoMaterno() {
return apellidoMaterno;
}
public void setApellidoMaterno(String apellidoMaterno) {
this.apellidoMaterno = apellidoMaterno;
}
public Integer getEdad() {
return edad;
}
public void setEdad(Integer edad) {
this.edad = edad;
}
public Character getSexo() {
return sexo;
}
public void setSexo(Character sexo) {
this.sexo = sexo;
}
public String getRfc() {
return rfc;
}
public void setRfc(String rfc) {
this.rfc = rfc;
}
}
Ahora vamos a crear otro paquete dentro de "Source Packages" llamado "mx.com.geeksjava.ejemplojsfpt2.controller", dentro de este paquete vamos a hacer "click secundario -> New->Other->JavaServer Faces->JSF Managed Bean".
Hacemos click en "Next" en el campo "Class Name" colocamos "PersonaController" y en el campo "Scope" seleccionaremos "session".
Esto nos va a generar el código base para un controlador, este código lo modificaremos de tal modo que quede de la siguiente forma:
Nos dirigimos a la sección "Web Pages" hacemos "click secundario->New-Other-JavaServer Faces->Facelets Template" y hacemos click en "Next".
En el campo "File Name" colocamos "template-base", en "Folder" colocamos "resources", seleccionamos el "Layout Style" que se muestra en la imagen y hacemos click en "Finish".
Modificamos "template-base.xhtml".
Con esto tendremos una plantilla para trabajar, esta plantilla puede ser aplicada para múltiples páginas de tal modo que no tengamos que reescribir el estilo que deseamos en el sistema. Una vez hecho esto hacemos "Click secundario en Web Pages->New->Other->JavaServer Faces->Facelets Template Client" y damos click en "Next".
Colocamos los siguientes campos "File Name = index" y en "Template" seleccionamos "Browse", seleccionamos "template-base.xhtml", hacemos click en "Select File" y presionamos "Finish".
Modificamos el archivo "index.xhtml".
Hacemos click secundario en el nombre del proyecto y seleccionamos "Run".
Esperamos a que se despliegue la aplicación en nuestro navegador por defecto y el resultado.
Como pueden ver Si hacemos click en el botón "Guardar" y no llenamos de forma adecuada los campos aparecerán mensajes para realizarnos la notificación (Estos mensajes pueden ser modificados), podemos ver que tenemos una tabla de datos con paginación de 5 en 5 controlada por PrimeFaces (Es posible utilizar carga floja para la información) todo esto sin necesidad de utilizar JavaScript para realizar validaciones ni paginación.
El uso de JavaServer Faces es muy poderoso para la capa de presentación, más adelante presentaremos un Post en el cuál se detalle como combinar esto con Spring y Spring Data para almacenar la información.
Si tienen dudas o comentarios no duden en escribir en la sección de comentarios :)
Hacemos click en "Next" en el campo "Class Name" colocamos "PersonaController" y en el campo "Scope" seleccionaremos "session".
Esto nos va a generar el código base para un controlador, este código lo modificaremos de tal modo que quede de la siguiente forma:
package mx.com.geeksjava.ejemplojsfpt2.controller;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import mx.com.geeksjava.ejemplojsfpt2.model.Persona;
@ManagedBean
@SessionScoped
public class PersonaController implements Serializable {
private List<Persona> personas;
private Persona persona;
@PostConstruct
public void inicializa(){
personas=new ArrayList<Persona>();
persona=new Persona();
}
public String guardar(){
personas.add(persona);
persona=new Persona();
return "index.faces";
}
public List<Persona> getPersonas() {
return personas;
}
public void setPersonas(List<Persona> personas) {
this.personas = personas;
}
public Persona getPersona() {
return persona;
}
public void setPersona(Persona persona) {
this.persona = persona;
}
}
Nos dirigimos a la sección "Web Pages" hacemos "click secundario->New-Other-JavaServer Faces->Facelets Template" y hacemos click en "Next".
En el campo "File Name" colocamos "template-base", en "Folder" colocamos "resources", seleccionamos el "Layout Style" que se muestra en la imagen y hacemos click en "Finish".
Modificamos "template-base.xhtml".
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="default.css"/>
<h:outputStylesheet library="css" name="cssLayout.css"/>
<title>Geeks Java México</title>
</h:head>
<h:body>
<div id="top" class="top">
<ui:insert name="top">Geeks Java México!</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">
<h:link outcome="index.faces" value="Inicio"/>
</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content"></ui:insert>
</div>
</div>
</h:body>
</html>
Con esto tendremos una plantilla para trabajar, esta plantilla puede ser aplicada para múltiples páginas de tal modo que no tengamos que reescribir el estilo que deseamos en el sistema. Una vez hecho esto hacemos "Click secundario en Web Pages->New->Other->JavaServer Faces->Facelets Template Client" y damos click en "Next".
Colocamos los siguientes campos "File Name = index" y en "Template" seleccionamos "Browse", seleccionamos "template-base.xhtml", hacemos click en "Select File" y presionamos "Finish".
Modificamos el archivo "index.xhtml".
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<ui:composition template="./resources/template-base.xhtml">
<ui:define name="content">
<h:form> <h1>Personas</h1><br/>
<p:panelGrid columns="3">
<h:outputText value="Nombre"/>
<p:inputText id="nombre_p" required="true" value="#{personaController.persona.nombre}"/>
<p:message for="nombre_p"/>
<h:outputText value="Apellido Paterno"/>
<p:inputText id="appat_p" required="true" value="#{personaController.persona.apellidoPaterno}"/>
<p:message for="appat_p"/>
<h:outputText value="Apellido Materno"/>
<p:inputText id="apmat_p" value="#{personaController.persona.apellidoMaterno}"/>
<p:message for="apmat_p"/>
<h:outputText value="RFC"/>
<p:inputText id="rfc_p" required="true" maxlength="13" value="#{personaController.persona.rfc}"/>
<p:message for="rfc_p"/>
<h:outputText value="Edad"/>
<p:inputText id="edad_p" value="#{personaController.persona.edad}"/>
<p:message for="nombre_p"/>
<h:outputText value="Sexo"/>
<p:selectOneRadio id="sexo_p" required="true" value="#{personaController.persona.sexo}">
<f:selectItem itemLabel="Masculino" itemValue="m"/>
<f:selectItem itemLabel="Femenino" itemValue="f"/>
</p:selectOneRadio>
<p:message for="sexo_p"/>
<p:commandButton action="#{personaController.guardar()}" ajax="false" value="Guardar"/>
</p:panelGrid>
</h:form> <br/>
<p:dataTable id="tabla_personas" value="#{personaController.personas}" var="_persona" rowKey="#{_persona.rfc}"
paginator="true" rows="5">
<f:facet name="header">
<h:outputText value="Personas"/>
</f:facet>
<p:column headerText="Nombre Completo">
<h:outputText value="#{_persona.nombre} #{_persona.apellidoPaterno} #{_persona.apellidoMaterno}"/>
</p:column>
<p:column headerText="RFC">
<h:outputText value="#{_persona.rfc}"/>
</p:column>
<p:column headerText="Edad">
<h:outputText value="#{_persona.edad}"/>
</p:column>
<p:column headerText="Sexo">
<h:outputText value="#{_persona.sexo}"/>
</p:column>
</p:dataTable>
</ui:define>
</ui:composition>
</body>
</html>
Hacemos click secundario en el nombre del proyecto y seleccionamos "Run".
Esperamos a que se despliegue la aplicación en nuestro navegador por defecto y el resultado.
Como pueden ver Si hacemos click en el botón "Guardar" y no llenamos de forma adecuada los campos aparecerán mensajes para realizarnos la notificación (Estos mensajes pueden ser modificados), podemos ver que tenemos una tabla de datos con paginación de 5 en 5 controlada por PrimeFaces (Es posible utilizar carga floja para la información) todo esto sin necesidad de utilizar JavaScript para realizar validaciones ni paginación.
El uso de JavaServer Faces es muy poderoso para la capa de presentación, más adelante presentaremos un Post en el cuál se detalle como combinar esto con Spring y Spring Data para almacenar la información.
Si tienen dudas o comentarios no duden en escribir en la sección de comentarios :)
--------->>>>>>>Autor: Alejandro Agapito Bautista
--------->>>>>>>>>>>>Oracle Certified Java Programer
--------->>>>>>>>>>>>Oracle Certified Web Components Developer
--------->>>>>>>>>>>>IBM Certified Academic Assosiate DB2.
--------->>>>>>>Twitter: @raidentrance
--------->>>>>>>Contacto:raidentrance@gmail.com
