primefaces cortesia del portal de java

Elaborado por José Salvador Olivares http://portaldejava.com Página 1

CURSO DE PROGRAMACION EN EL LENGUAJE JAVA

ELABORADO POR LIC. JOSE SALVADOR OLIVARES

EMAIL: [email protected]

PRACTICA No 7 NIVEL AVANZADO

DESARROLLO DE APLICACIONES CON PRIMEFACES

1) Vamos a crear un nuevo proyecto en Netbeans. Seleccionamos la opción File y

luego New Project.


2) Seleccionamos la opción Java Web y luego Web Application.

3) Asignamos un nombre a nuestro proyecto. Le pondremos Practica07 y lo

almacenamos dentro de la carpeta c:\ProyectosNetbeans\Avanzado.


4) Seleccionamos Apache Tomcat como servidor web. Los demás parámetros no

los modificamos.

5) Netbeans nos preguntará si utilizaremos alguno de los framework que trae por

defecto. Seleccionamos Java Server Faces. Luego seleccionamos la viñeta

Components.


6) Ahora seleccionamos la opción PrimeFaces. Finalmente damos un clic en Finish.

7) Netbeans nos crea el proyecto web y por defecto crea una página de prueba con

el nombre index.xhtml. Además en la opción Libraries aparecen las librerías de

PrimeFaces adicionadas a nuestro proyecto.


8) Vamos a crear nuestra primera Java Server Face (JSF). Seleccionamos el proyecto dando un clic al nombre del proyecto, luego damos un clic derecho y seleccionamos la opción New y finalmente la opción Other.

9) Seleccionamos la opción Java Server Faces para crear nuestra primera pagina

JSF utilizando PrimeFaces, luego seleccionamos JSF Page. Luego damos un clic

en Next.


10) Ahora asignamos el nombre a nuestra página JSF. Le pondremos de nombre

outputLabelJSF. Luego damos un clic en Finish para terminar.

11) Escribimos el código de nuestra página JSF. Tome nota de crear el espacio de

nombre: xmlns:p=”http://primefaces.prime.com.tr/ui” en el encabezado de la

página JSF si no le aparece.


Código de la página:

<?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:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head> <title>Persona</title> </h:head> <h:body> <h:form> <p:panel id="panel" header="Persona" style="margin-bottom:10px;"> <p:messages id="messages" /> <h:panelGrid columns="2"> <h:outputLabel for="nombres" value="Nombres" /> <p:inputText id="nombres" required="true" maxlength="30" requiredMessage="Los nombres son obligatorios"/> <h:outputLabel for="apellidos" value="Apellidos" /> <p:inputText id="apellidos" required="true" maxlength="30" requiredMessage="Los apellidos son obligatorios"/> </h:panelGrid> </p:panel> <p:commandButton value="Submit" update="panel" style="margin-right:20px;"/> </h:form> </h:body> </html> 12) Seleccionamos la página creada y damos un clic derecho y seleccionamos la

opción Run File.


13) Se abre el navegador y se carga la página creada. Sin llenar ningún campo damos

un clic en Submit para verificar que se muestre los mensajes indicando que los

campos son obligatorios.

14) Si digitamos información en los campos nombres y apellidos y damos un clic en

Submit no se muestra los errores ya que los campos tienen información.


15) Vamos a crear nuestra segunda Java Server Face (JSF). Seleccionamos el proyecto dando un clic al nombre del proyecto, luego damos un clic derecho y seleccionamos la opción New y finalmente la opción Other.

16) Seleccionamos la opción Java Server Faces para crear nuestra segunda página


en Next.



validacionDatos. Luego damos un clic en Finish para terminar.





Código de la pagina:

<?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:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head> <title>Persona</title> </h:head> <h:body> <h:form id="form"> <p:panel id="panel" header="Persona"> <p:messages id="msgs"/> <h:panelGrid columns="3"> <h:outputLabel for="nombres" value="Nombres: *" /> <p:inputText id="nombres" value="#{beanPersona.nombres}" required="true" label="Nombres" requiredMessage="Los nombres son obligatorios"> <f:validateLength minimum="3" /> </p:inputText> <p:message for="nombres" display="icon"/> <h:outputLabel for="apellidos" value="Apellidos: *" /> <p:inputText id="apellidos" value="#{beanPersona.apellidos}" required="true" label="Apellidos" requiredMessage="Los apellidos son obligatorios"> <f:validateLength minimum="3" /> </p:inputText> <p:message for="apellidos" display="icon"/> </h:panelGrid> <p:commandButton id="Guardar" value="Guardar" update="panel" action="#{beanPersona.guardarPersona}"/> </p:panel> </h:form> </h:body> </html>


19) Seleccionamos Source Packages y damos un clic derecho, luego seleccionamos

Other.

20) Seleccionamos la opción Java Server Faces y luego JSF Managed Bean. Luego

damos un clic en Next para continuar.


21) En Class Name asignamos el nombre BeanPersona. En package digitamos

managed_beans para el nombre del paquete. En scope dejamos por defecto la

opción Request. En la página JSF utilizaremos como nombre del bean

beanPersona.. Damos un clic en Finish para terminar.

22) Declaramos los atributos nombres y apellidos del tipo privado y luego creamos

los métodos get y set para implementar el encapsulamiento.


23) Ahora vamos a implementar la lógica de nuestro Managed Bean. En este paso ya

debemos de haber implementado el encapsulamiento de nuestros atributos

privados nombres y apellidos. Además agregamos el método guardarPersona

con el código que se muestra.

Código de la clase:

package managed_beans; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean;


import javax.faces.bean.RequestScoped; import javax.faces.context.FacesContext; /** * * @author Jose Salvador Olivares */ @ManagedBean @RequestScoped public class BeanPersona { private String nombres; public String getApellidos() { return apellidos; } public void setApellidos(String apellidos) { this.apellidos = apellidos; } public String getNombres() { return nombres; } public void setNombres(String nombres) { this.nombres = nombres; } private String apellidos; /** * Creates a new instance of BeanPersona */ public BeanPersona() { } public void guardarPersona() { FacesMessage msg = new FacesMessage("Guardando Datos..."); msg.setSeverity(FacesMessage.SEVERITY_INFO); FacesContext.getCurrentInstance().addMessage(null, msg); } }


24) Ahora seleccionamos la página JSF creada y damos un clic derecho y

seleccionamos la opción Run File.

25) Se abre el navegador y se muestra la página JSF validarDatos.xhtml. Sin

completar ningún campo damos un clic en el botón Guardar y se muestra los

mensajes de error programados en la página.


26) Ahora digitamos valores en los campos Nombres y Apellidos y damos un clic en

Guardar. Se debe de mostrar un mensaje indicando que se están Guardando

Datos.

27) Vamos a crear nuestra tercera Java Server Face (JSF). Seleccionamos el proyecto dando un clic al nombre del proyecto, luego damos un clic derecho y seleccionamos la opción New y finalmente la opción Other.


28) Seleccionamos la opción Java Server Faces para crear nuestra tercera página


en Next.


mascaraDatos. Luego damos un clic en Finish para terminar.





Código de la página

<?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:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head> <title>Validacion Mascara</title> </h:head> <h:body> <h:form id="form"> <p:panel id="panel" header="Mascara"> <p:messages id="msgs"/> <h:panelGrid columns="3"> <h:outputText value="Fecha Nacimiento: " /> <p:inputMask id="fechaNacimiento" value="#{beanMascara.fechaNacimiento}" mask="99/99/9999" required="true" requiredMessage="La fecha de nacimiento es obligatoria"/> <p:message for="fechaNacimiento" display="icon"/> <h:outputText value="Telefono Domicilio: " />


<p:inputMask id="telefonoDomicilio" value="#{beanMascara.telefonoDomicilio}" mask="9999-9999" required="true" requiredMessage="El telefono de domicilio es obligatorio"/> <p:message for="telefonoDomicilio" display="icon"/> <h:outputText value="No Nit: " /> <p:inputMask id="noNit" value="#{beanMascara.noNit}" mask="9999-999999-999-9" required="true" requiredMessage="El numero de nit es obligatorio"/> <p:message for="noNit" display="icon"/> <p:commandButton id="Guardar" value="Guardar" update="panel" action="#{beanMascara.guardarDatos}"/> <p:commandButton id="Limpiar" value="Limpiar" update="panel" action="#{beanMascara.limpiarDatos}"/> </h:panelGrid> </p:panel> </h:form> </h:body> </html>

31) Seleccionamos el paquete managed_beans y damos un clic derecho,

seleccionamos New y luego seleccionamos Other.




33) En Class Name asignamos el nombre BeanMascara. En package nos aparece


opción Request. En las paginas JSF utilizaremos como nombre del bean

beanMascara.. Damos un clic en Finish para terminar.


34) Declaramos los atributos fechaNacimiento, telefonoDomicilio y noNit del tipo

privado y luego creamos los métodos get y set para implementar el

encapsulamiento.



privados fechaNacimiento, telefonoDomicilio y noNit. Además agregamos el

método guardarDatos y limpiarDatos con el código que se muestra.



package managed_beans; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import javax.faces.context.FacesContext; /** * * @author Jose Salvador Olivares */ @ManagedBean @RequestScoped public class BeanMascara { private String fechaNacimiento;


public String getFechaNacimiento() { return fechaNacimiento; } public void setFechaNacimiento(String fechaNacimiento) { this.fechaNacimiento = fechaNacimiento; } public String getNoNit() { return noNit; } public void setNoNit(String noNit) { this.noNit = noNit; } public String getTelefonoDomicilio() { return telefonoDomicilio; } public void setTelefonoDomicilio(String telefonoDomicilio) { this.telefonoDomicilio = telefonoDomicilio; } private String telefonoDomicilio; private String noNit; /** * Creates a new instance of BeanMascara */ public BeanMascara() { } public void limpiarDatos() { this.fechaNacimiento=""; this.telefonoDomicilio=""; this.noNit=""; } public void guardarDatos() { FacesMessage msg = new FacesMessage("Guardando Datos..."); msg.setSeverity(FacesMessage.SEVERITY_INFO); FacesContext.getCurrentInstance().addMessage(null, msg); } }


36) Seleccionamos la página JSF creada mascaraDatos y damos un clic derecho y


37) Se abre el navegador y se carga la pagina mascaraDatos. Sin completar ningún

campo damos un clic en el botón Guardar. Nos deberá de aparecer los errores

que hemos programado cuando los campos están vacios.


38) Ahora completamos los campos Fecha de Nacimiento, Teléfono del Domicilio y

Número de Nit. Luego damos un clic en el botón Guardar. Se muestra un mensaje

indicando que se están Guardando los Datos. En esta página hemos utilizado el

control para manejar la mascara de entrada de datos para los tres campos.

39) Vamos a crear nuestra cuarta Java Server Face (JSF). Seleccionamos el proyecto dando un clic al nombre del proyecto, luego damos un clic derecho y seleccionamos la opción New y finalmente la opción Other.


40) Seleccionamos la opción Java Server Faces para crear nuestra cuarta página


en Next.


mostrarCalendario. Luego damos un clic en Finish para terminar.





Código de la página:

<?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:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head> <title>Calendario</title> </h:head> <h:body> <h:form id="form"> <p:panel header="Calendario"> <p:messages id="msgs"/> <h:panelGrid columns="3" cellpadding="5"> <h:outputText value="Fecha Registro: " /> <p:calendar id="fechaCalendario" value="#{beanCalendario.fechaCalendario}" showOn="button" readOnlyInputText="true" required="true" locale="es" navigator="true" requiredMessage="La fecha de registro es requerida..." pattern="dd/MM/yyyy"/> <p:message id="msg" for="fechaCalendario" /> <h:commandButton value="Guardar" action="#{beanCalendario.guardarDatos}"/> <h:commandButton value="Limpiar" action="#{beanCalendario.limpiarDatos}"/> </h:panelGrid> </p:panel>


</h:form> </h:body> </html>






45) En Class Name asignamos el nombre BeanCalendario. En package nos aparece


opción Request. En las paginas JSF utilizaremos como nombre del bean

beanCalendario. Damos un clic en Finish para terminar.


46) Declaramos el atributo fechaCalendario con alcance privado y luego creamos los

métodos get y set para implementar el encapsulamiento.



debemos de haber implementado el encapsulamiento de nuestro atributo privado

fechaCalendario. Además agregamos el método guardarDatos y limpiarDatos

con el código que se muestra.


48) Seleccionamos la página JSF mostrarCalendario y damos un clic derecho y


49) Se abre el navegador y se carga la pagina mostrarCalendario. Sin completar el

campo damos un clic en el botón Guardar. Nos deberá de aparecer los errores

que hemos programado cuando los campos están vacios.


50) Ahora seleccionamos la Fecha de Registro. Luego damos un clic en el botón

Guardar.

51) Después de dar clic al botón Guardar se muestra un mensaje indicando que se

están Guardando los Datos.


52) Vamos a crear nuestra quinta Java Server Face (JSF). Seleccionamos el proyecto dando un clic al nombre del proyecto, luego damos un clic derecho y seleccionamos la opción New y finalmente la opción Other.

53) Seleccionamos la opción Java Server Faces para crear nuestra quinta página JSF

utilizando PrimeFaces, luego seleccionamos JSF Page. Luego damos un clic en

Next.



registroContribuyentes. Luego damos un clic en Finish para terminar.





Código de la página

<?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:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>Registro de Contribuyentes</title> </h:head> <h:body> <h:form> <p:panel header="Registro de Contribuyentes"> <p:messages id="msgs"/> <h:panelGrid columns="3" cellpadding="5"> <h:outputText value="No Nit: " /> <p:inputMask id="no_nit" value="#{beanContribuyentes.noNit}" mask="9999-999999-999-9" required="true" requiredMessage="No nit es requerido..."> </p:inputMask> <p:message id="no_nit_error" for="no_nit"/> <h:outputText value="Nombre Contribuyente: " /> <p:inputText id="nombre_contribuyente" value="#{beanContribuyentes.nombreContribuyente}" required="true" requiredMessage="Nombre contribuyente es requerido..."> </p:inputText> <p:message id="nombre_contribuyente_error" for="nombre_contribuyente" /> <h:outputText value="Razon Social: " />


<p:inputText id="razon_social" value="#{beanContribuyentes.razonSocial}" required="true" requiredMessage="Razon social es requerida..."> </p:inputText> <p:message id="razon_social_error" for="razon_social" /> <h:outputText value="Representante Legal: " /> <p:inputText id="representante_legal" value="#{beanContribuyentes.representanteLegal}" required="true" requiredMessage="Representante legal es requerido..."> </p:inputText> <p:message id="representante_legal_error" for="representante_legal" /> <h:outputText value="Renta Anual: " /> <p:inputMask id="renta_anual" value="#{beanContribuyentes.rentaAnual}" mask="9,999.99" required="true" requiredMessage="Renta anual es requerida..."> </p:inputMask> <p:message id="renta_anual_error" for="renta_anual" /> <h:outputText value="Fecha Registro: " /> <p:calendar id="fecha_registro" value="#{beanContribuyentes.fechaRegistro}" showOn="button" readOnlyInputText="true" required="true" locale="es" navigator="true" requiredMessage="La fecha de registro es requerida..." pattern="dd/MM/yyyy"/> <p:message id="fecha_registro_error" for="fecha_registro" /> <h:outputText value="Estado Contribuyente: " /> <h:selectOneMenu value="#{beanContribuyentes.estado}"> <f:selectItem itemValue="A" itemLabel="Activo" /> <f:selectItem itemValue="I" itemLabel="Inactivo" /> </h:selectOneMenu> </h:panelGrid> <h:panelGrid columns="2" cellpadding="5"> <h:commandButton value="Guardar" action="#{beanContribuyentes.guardarContribuyente}"/> <h:commandButton value="Limpiar" action="#{beanContribuyentes.limpiarContribuyente}"/> </h:panelGrid> </p:panel> </h:form> </h:body> </html>


58) En Class Name asignamos el nombre BeanContribuyentes. En package nos

aparece managed_beans para el nombre del paquete. En scope dejamos por

defecto la opción Request. En las paginas JSF utilizaremos como nombre del

bean beanContribuyentes. Damos un clic en Finish para terminar.

59) Declaramos los atributos noNit, nombreContribuyente, razonSocial,

representanteLegal, rentaAnual, fechaRegistro, estado con alcance privado y

luego creamos los métodos get y set para implementar el encapsulamiento.




privados noNit, nombreContribuyente, razonSocial, representanteLegal,

rentaAnual, fechaRegistro, estado. Además agregamos el método

guardarContribuyente y limpiarContribuyente con el código que se muestra.



package managed_beans; import java.util.Date; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import javax.faces.context.FacesContext; /** *


* @author Jose Salvador Olivares */ @ManagedBean @RequestScoped public class BeanContribuyentes { private String noNit; public String getEstado() { return estado; } public void setEstado(String estado) { this.estado = estado; } public Date getFechaRegistro() { return fechaRegistro; } public void setFechaRegistro(Date fechaRegistro) { this.fechaRegistro = fechaRegistro; } public String getNoNit() { return noNit; } public void setNoNit(String noNit) { this.noNit = noNit; } public String getNombreContribuyente() { return nombreContribuyente; } public void setNombreContribuyente(String nombreContribuyente) { this.nombreContribuyente = nombreContribuyente; } public String getRazonSocial() { return razonSocial; } public void setRazonSocial(String razonSocial) { this.razonSocial = razonSocial; } public String getRentaAnual() { return rentaAnual; } public void setRentaAnual(String rentaAnual) { this.rentaAnual = rentaAnual;


} public String getRepresentanteLegal() { return representanteLegal; } public void setRepresentanteLegal(String representanteLegal) { this.representanteLegal = representanteLegal; } private String nombreContribuyente; private String razonSocial; private String representanteLegal; private String rentaAnual; private Date fechaRegistro; private String estado; /** * Creates a new instance of BeanContribuyentes */ public BeanContribuyentes() { } public void limpiarContribuyente(){ this.noNit=""; this.nombreContribuyente=""; this.razonSocial=""; this.representanteLegal=""; this.rentaAnual=""; this.fechaRegistro=null; } public void guardarContribuyente(){ FacesMessage msg = new FacesMessage("Guardando Datos..."); msg.setSeverity(FacesMessage.SEVERITY_INFO); FacesContext.getCurrentInstance().addMessage(null, msg); } }


61) Seleccionamos la página JSF registroContribuyentes y damos un clic derecho y


62) Se abre el navegador y se carga la pagina registroContribuyentes. Sin completar

los campos damos un clic en el botón Guardar. Nos deberá de aparecer los

errores que hemos programado cuando los campos están vacios.


63) El formulario muestra los mensajes de error indicando que los campos no se han

completado.


64) Completamos los campos y luego damos un clic en Guardar. Se debe de mostrar

un mensaje indicando que se están Guardando los Datos. Tome nota que el botón

Limpiar sirve para inicializar los campos.

primefaces cortesia del portal de java

Technology