java web laboratorio

22

Click here to load reader

Upload: fisianthony

Post on 25-Oct-2014

285 views

Category:

Documents


1 download

DESCRIPTION

Java Web

TRANSCRIPT

Page 1: Java Web Laboratorio

GUÍA DE LABORATORIO 2

“JSF y componentes”

Page 2: Java Web Laboratorio

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

Page 3: Java Web Laboratorio

Tecsup JSF y componentes

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.

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

Page 4: Java Web Laboratorio

Tecsup JSF y componentes

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>

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

Page 5: Java Web Laboratorio

Tecsup JSF y componentes

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

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

Page 6: Java Web Laboratorio

Tecsup JSF y componentes

Componentes

AccordionPanel

acordion.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: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>

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

Page 7: Java Web Laboratorio

Tecsup JSF y componentes

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.

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

Page 8: Java Web Laboratorio

Tecsup JSF y componentes

BreadCrumb

navegacion.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: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>

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

Page 9: Java Web Laboratorio

Tecsup JSF y componentes

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");

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

Page 10: Java Web Laboratorio

Tecsup JSF y componentes

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>

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

Page 11: Java Web Laboratorio

Tecsup JSF y componentes

Crear la página:

autocompletar.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><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>

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

Page 12: Java Web Laboratorio

Tecsup JSF y componentes

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"

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

<h:head></h:head>

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

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

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

Page 13: Java Web Laboratorio

Tecsup JSF y componentes

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"

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

<h:head></h:head>

<h:body><p:captcha />

</h:body></html>

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

Page 14: Java Web Laboratorio

Tecsup JSF y componentes

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"

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

<h:head></h:head>

<h:body>

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

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

Page 15: Java Web Laboratorio

Tecsup JSF y componentes

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;

}

}

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

Page 16: Java Web Laboratorio

Tecsup JSF y componentes

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"

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

<h:head></h:head>

<h:body>

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

</h:body></html>

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

Page 17: Java Web Laboratorio

Tecsup JSF y componentes

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;

}}

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

Page 18: Java Web Laboratorio

Tecsup JSF y componentes

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"

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

<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

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

Page 19: Java Web Laboratorio

Tecsup JSF y componentes

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.

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