java web laboratorio

GUÍA DE LABORATORIO 2

“JSF y componentes”

Tecsup JSF y componentes

LABORATORIO

Objetivos:

Implementar la capa de presentación con JSF (JavaServer Faces) Utilizar componentes de PrimeFaces.

Equipos, Materiales, Programas y Recursos :

PC con Sistema Operativo con soporte a Java. IDE para Java Navegador Web (recomendable Firefox) Contenedor de Servlets (recomendable Tomcat)

Introducción:

En la presente sesión, se detalla la implementación de la capa de presentación con el framework JSF (JavaServer Faces). JSF es un framework del lado del servidor para crear interfaces en base a componentes utilizado en las aplicaciones Web basadas en Java.

Preparación:

El alumno debe haber revisado previamente el texto del curso, así como también, las presentaciones dadas en la clase de teoría.

Procedimiento y Resultados :

Dpto. de Informática – David Rodríguez – [email protected] Pág. 1


Configuración de JSF y PrimeFaces

Crear un proyecto “Dynamic Web Project”, indicando los siguientes datos:

- Project Name: jsf_primerfaces

- Target Runtime: Apache Tomcat 7

- Configuration: JavaServer Faces v2.0 Project

En la ventana de “JSF Capabilities” crear una nueva “User Library” llamada myfaces. Luego

elija la carpeta donde se desempaquetó la implementación Apache MyFaces. Agregar los

JARs: myfaces-api-2.jar y myfaces-impl-2.jar.

Al proyecto recién creado, agregar las siguientes librerías en la carpeta “WebContent/WEB-

INF/lib”:

- Los JAR respectivos de MyFaces

- commons-fileupload-1.2.1.jar

- commons-io-1.4.jar

- commons-logging-1.1.1.jar

- jstl-api-1.2.jar

- jstl-impl-1.2.jar

- primefaces-3.2.jar

Nótese que estamos agregando la librería de componentes PrimeFaces.



Modificar el archivo de configuración web.xml:

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0"> <display-name> jsf_primerfaces </display-name> <context-param> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>server</param-value> </context-param>

<context-param> <param-name>javax.faces.DATETIMECONVERTER_DEFAULT_TIMEZONE_IS_SYSTEM_TIMEZONE</param-name> <param-value>true</param-value> </context-param>

<filter> <filter-name>PrimeFaces FileUpload Filter</filter-name> <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class> </filter>

<filter-mapping> <filter-name>PrimeFaces FileUpload Filter</filter-name> <servlet-name>Faces Servlet</servlet-name> </filter-mapping>

<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>*.jsf</url-pattern> </servlet-mapping>

</web-app>



Crear una página HTML llamada test.xhtml en la carpeta WebContent, debe llevar el siguiente contenido:

test.xhtml<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"xmlns:p="http://primefaces.org/ui">

<h:head></h:head>

<h:body><p:editor />

</h:body></html>

Ejecutar la página: http://localhost:8080/jsf_primefaces1/test.jsf


http://localhost:8080/jsf_primefaces1/test.jsf


Componentes

AccordionPanel

acordion.xhtml<html xmlns="http://www.w3.org/1999/xhtml"


<h:head></h:head>

<h:body><p:accordionPanel id="panel1">

<p:tab title="JSF (JavaServer Faces) " id="tab1">Patrón de diseño MVC. Especificación JSF e implementaciones.

Configuración del flujo de páginas. </p:tab><p:tab title="Spring MVC " id="tab2">

Framework Spring. Bean container. Configuración de Spring MVC. </p:tab><p:tab title="JPA" id="tab3">

Fundamentos de Objet Relational Mapping (ORM). Especificación JPA. Implementaciones de JPA. Configuración de los JPA Entities. Integración de Hibernate con Spring.

</p:tab><p:tab title="EJB" id="tab4">

Implementación de EJB Session Beans statefull y stateless. </p:tab>

</p:accordionPanel></h:body></html>



Themes

Es posible configurar el diseño de los controles, para esto seguir los siguientes pasos:- Descargar algún tema de su elección de: http://www.primefaces.org/themes.html- Por ejemplo, descargar trontastic-1.0.1.jar y copiarlo a la carpeta “WebContent/WEB-

INF/lib”- Configurar el tema en el web.xml, agregar la siguiente configuración:

<context-param><param-name>primefaces.THEME</param-name><param-value>trontastic</param-value>

</context-param>

Reiniciar el Tomcat y comprobar el nuevo diseño.


http://www.primefaces.org/themes.html


BreadCrumb

navegacion.xhtml<html xmlns="http://www.w3.org/1999/xhtml"


<h:head></h:head>

<h:body>

<p:breadCrumb><p:menuitem value="Inicio" url="acordion.jsf" /><p:menuitem value="Biblioteca virtual" url="acordion.jsf" /><p:menuitem value="Libros" url="acordion.jsf" /><p:menuitem value="Reservas" url="acordion.jsf" />

</p:breadCrumb>

</h:body></html>



AutoComplete

Persona.javapackage proyecto.modelo;

public class Persona {

private String codPersona;private String apePaterno;private String apeMaterno;private String nombres;private String direccion;private String correo;

// Generar setters y getters

}

PersonasBean.javapackage proyecto.bean;

import java.util.ArrayList;import java.util.List;import org.primefaces.event.SelectEvent;import proyecto.modelo.Persona;

public class PersonasBean {

private String texto;private List<Persona> personas;

public PersonasBean() {personas = new ArrayList<Persona>();

Persona p1 = new Persona();p1.setCodPersona("501");p1.setApePaterno("Rodriguez");p1.setApeMaterno("Condezo");p1.setNombres("David");p1.setDireccion("Lima 13");p1.setCorreo("[email protected]");

Persona p2 = new Persona();p2.setCodPersona("502");p2.setApePaterno("Perez");p2.setApeMaterno("Lopez");p2.setNombres("Juan");p2.setDireccion("Lima 21");p2.setCorreo("[email protected]");

Persona p3 = new Persona();p3.setCodPersona("503");p3.setApePaterno("Rodriguez");p3.setApeMaterno("Quispe");



p3.setNombres("Luis");p3.setDireccion("Lima 3");p3.setCorreo("[email protected]");

personas.add(p1);personas.add(p2);personas.add(p3);

}

public List<Persona> buscar(String consulta) {System.out.println(consulta);// Lógica de filtro

List<Persona> encontrados = new ArrayList<Persona>();for (Persona p : this.personas) {

if(p.getApePaterno().toUpperCase().startsWith(consulta.toUpperCase())){encontrados.add(p);

}}

return encontrados;}

public void elegido(SelectEvent event){Object item = event.getObject();System.out.println("Seleccionado: " + item);

}

public void setTexto(String texto) {this.texto = texto;

}

public String getTexto() {return texto;

}}

Registrar PersonasBean.java como managed-bean en el faces-config.xml

<managed-bean><managed-bean-name>personasBean</managed-bean-name><managed-bean-class>proyecto.bean.PersonasBean</managed-bean-class><managed-bean-scope>request</managed-bean-scope>

</managed-bean>



Crear la página:

autocompletar.xhtml<html xmlns="http://www.w3.org/1999/xhtml"


<h:head></h:head>

<h:body><h:form>

<p:autoComplete value="#{personasBean.texto}"completeMethod="#{personasBean.buscar}" var="p"itemLabel="#{p.apePaterno} #{p.apeMaterno} #{p.nombres}"

itemValue="#{p.codPersona}"maxResults="5" listener="#{personasBean.elegido}" />

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



Calendar

Crear la clase FechaBean:

FechaBean.javapackage proyecto.bean;

import java.util.Date;

public class FechaBean {

private Date fecha;

public void setFecha(Date fecha) {this.fecha = fecha;

}

public Date getFecha() {return fecha;

}}

Agregar el bean en el faces-config.xml:

<managed-bean><managed-bean-name>fechaBean</managed-bean-name><managed-bean-class>proyecto.bean.FechaBean</managed-bean-class><managed-bean-scope>request</managed-bean-scope>

</managed-bean>

calendario.xhtml<html xmlns="http://www.w3.org/1999/xhtml"


<h:head></h:head>

<h:body>Elija: <p:calendar value="#{fechaBean.fecha}" showOn="button" locale="es"

pattern="yy/M/d"/></h:body></html>



Captcha

Este componente trabaja con una llave pública y otra privada que se crean ingresando a https://www.google.com/recaptcha/

Esas claves pública y privada deben ser configuradas en el web.xml:

<context-param><param-name>primefaces.PRIVATE_CAPTCHA_KEY</param-name><param-value>6LeiyMYSAAAAAGILocfugZnJyHp0X4s6LEpS5CY4</param-

value></context-param><context-param>

<param-name>primefaces.PUBLIC_CAPTCHA_KEY</param-name><param-value>6LeiyMYSAAAAAG6ljSyWF74UTZsBBLmeEmNgnIea</param-

value></context-param>

Crear la página:

captcha.xhtml<html xmlns="http://www.w3.org/1999/xhtml"


<h:head></h:head>

<h:body><p:captcha />

</h:body></html>


https://www.google.com/recaptcha/


Pie Chart

Crear las siguientes clases:

VentasBean.javapackage proyecto.bean;

import org.primefaces.model.chart.PieChartModel;

public class VentasBean {

private PieChartModel ventas;

public VentasBean() {ventas = new PieChartModel();ventas.set("Adidas", 1200);ventas.set("Puma", 1520);ventas.set("Sketcher", 890);ventas.set("Umbro", 9230);

}

public PieChartModel getVentas(){return ventas;

}}

Agregar el bean en el faces-config.xml:

<managed-bean><managed-bean-name>ventasBean</managed-bean-name><managed-bean-class>proyecto.bean.VentasBean</managed-bean-class><managed-bean-scope>request</managed-bean-scope>

</managed-bean>

Crear la página:

grafico_circular.xhtml<html xmlns="http://www.w3.org/1999/xhtml"


<h:head></h:head>

<h:body>

<p:pieChart value="#{ventasBean.ventas}" legendPosition="w" /> </h:body></html>



LineChart

PBIBean.javapackage proyecto.bean;

import org.primefaces.model.chart.CartesianChartModel;import org.primefaces.model.chart.ChartSeries;

public class PBIBean {

private CartesianChartModel pbis;

public PBIBean() {pbis = new CartesianChartModel();

ChartSeries anual = new ChartSeries();anual.setLabel("Anual");

anual.set(2000, 3.0);anual.set(2001, 0.2);anual.set(2002, 5.0);anual.set(2003, 4.0);anual.set(2004, 5.1);anual.set(2005, 6.7);anual.set(2006, 7.6);anual.set(2007, 8.9);anual.set(2008, 9.7);anual.set(2009, 0.9);anual.set(2010, 8.78);

pbis.addSeries(anual);}

public CartesianChartModel getPbis(){return pbis;

}

}



Agregar el bean en el faces-config.xml

<managed-bean><managed-bean-name>pBIBean</managed-bean-name><managed-bean-class>proyecto.bean.PBIBean</managed-bean-class><managed-bean-scope>request</managed-bean-scope>

</managed-bean>

Crear la página:

grafico_lineal.xhtml<html xmlns="http://www.w3.org/1999/xhtml"


<h:head></h:head>

<h:body>

<p:lineChart value="#{pBIBean.pbis}" legendPosition="e"/>

</h:body></html>



DataGrid

Producto.javapackage proyecto.modelo;

public class Producto {

private int codigo;private String nombre;private String descripcion;private double precio;

public Producto(int codigo, String nombre, String descripcion, double precio) {super();this.codigo = codigo;this.nombre = nombre;this.descripcion = descripcion;this.precio = precio;

}

// Agregar los set y get

}

ProductosBean.javapackage proyecto.bean;

import java.util.ArrayList;import java.util.List;import proyecto.modelo.Producto;

public class ProductosBean {

private List<Producto> productos;

public ProductosBean(){productos = new ArrayList<Producto>();productos.add(new Producto(501, "Lego", "Ambulancia", 150));productos.add(new Producto(502, "Tambor", "De plástico", 150));productos.add(new Producto(503, "Avión", "Control remoto", 150));productos.add(new Producto(504, "Coche", "De plátisco", 150));productos.add(new Producto(505, "Helicoptero", "Usa pilas", 150));productos.add(new Producto(506, "Motocicleta", "Mediana", 150));

}

public List<Producto> getProductos(){return productos;

}}



Registrar en el faces-config.xml:

<managed-bean><managed-bean-name>productosBean</managed-bean-name><managed-bean-class>proyecto.bean.ProductosBean</managed-bean-class><managed-bean-scope>request</managed-bean-scope>

</managed-bean>

Diseñar la página:

datos.xhtml<html xmlns="http://www.w3.org/1999/xhtml"


<h:head></h:head>

<h:body><h:form>

<p:dataGrid var="p" value="#{productosBean.productos}" columns="2" rows="3" ><p:column>

<p:panel header="#{p.nombre}"><h:panelGrid columns="1">

<h:outputText value="#{p.descripcion}" style="color: blue;"/>

<h:outputText value="#{p.precio}" style="color: blue;"/></h:panelGrid>

</p:panel></p:column>

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

A la etiqueta dataGrid agregarle el parámetro:

paginator="true"

2 pies y el a utocompletar



DataTable

Seguir los pasos del manual de usuario de PrimeFaces.

Conclusiones:

En la presente sesión, se detalló la implementación del framework JSF y PrimeFaces.


java web laboratorio

Documents

java package proyecto

import proyecto

import java

import org

javaserver faces

tecsup jsf

jar commons

jar jstl