Java Web Laboratorio

GUA DE LABORATORIO 2
JSF y componentes
Tecsup JSF y componentes
LABORATORIO Objetivos:

Implementar la capa de presentacin 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)
Introduccin: En la presente sesin, se detalla la implementacin de la capa de presentacin 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. Preparacin: El alumno debe haber revisado previamente el texto del curso, as como tambin, las presentaciones dadas en la clase de teora. Procedimiento y Resultados:
Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe
Pg. 1
Configuracin 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 implementacin Apache MyFaces. Agregar los JARs: myfaces-api-2.jar y myfaces-impl-2.jar. Al proyecto recin creado, agregar las siguientes libreras en la carpeta WebContent/WEBINF/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
Ntese que estamos agregando la librera de componentes PrimeFaces.
Pg. 2
Modificar el archivo de configuracin 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> <paramname>javax.faces.DATETIMECONVERTER_DEFAULT_TIMEZONE_IS_SYSTEM_TIMEZ ONE</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>
Pg. 3
Crear una pgina 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 pgina: http://localhost:8080/jsf_primefaces1/test.jsf
Pg. 4
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"> Patrn de diseo MVC. Especificacin JSF e implementaciones. Configuracin del flujo de pginas. </p:tab> <p:tab title="Spring MVC " id="tab2"> Framework Spring. Bean container. Configuracin de Spring MVC. </p:tab> <p:tab title="JPA" id="tab3"> Fundamentos de Objet Relational Mapping (ORM). Especificacin JPA. Implementaciones de JPA. Configuracin de los JPA Entities. Integracin de Hibernate con Spring. </p:tab> <p:tab title="EJB" id="tab4"> Implementacin de EJB Session Beans statefull y stateless. </p:tab> </p:accordionPanel> </h:body> </html>
Pg. 5
Themes Es posible configurar el diseo de los controles, para esto seguir los siguientes pasos: - Descargar algn tema de su eleccin de: http://www.primefaces.org/themes.html - Por ejemplo, descargar trontastic-1.0.1.jar y copiarlo a la carpeta WebContent/WEBINF/lib - Configurar el tema en el web.xml, agregar la siguiente configuracin: <context-param> <param-name>primefaces.THEME</param-name> <param-value>trontastic</param-value> </context-param> Reiniciar el Tomcat y comprobar el nuevo diseo.
Pg. 6
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 <p:menuitem <p:menuitem <p:menuitem </p:breadCrumb> </h:body> </html> value="Inicio" url="acordion.jsf" /> value="Biblioteca virtual" url="acordion.jsf" /> value="Libros" url="acordion.jsf" /> value="Reservas" url="acordion.jsf" />
Pg. 7
AutoComplete Persona.java package 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.java package 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("rcondezo@gmail.com"); Persona p2 = new Persona(); p2.setCodPersona("502"); p2.setApePaterno("Perez"); p2.setApeMaterno("Lopez"); p2.setNombres("Juan"); p2.setDireccion("Lima 21"); p2.setCorreo("jperez@gmail.com"); Persona p3 = new Persona(); p3.setCodPersona("503"); p3.setApePaterno("Rodriguez"); p3.setApeMaterno("Quispe");
Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe Pg. 8
p3.setNombres("Luis"); p3.setDireccion("Lima 3"); p3.setCorreo("lflores@gmail.com"); personas.add(p1); personas.add(p2); personas.add(p3); } public List<Persona> buscar(String consulta) { System.out.println(consulta); // Lgica 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-beanclass> <managed-bean-scope>request</managed-bean-scope> </managed-bean>
Pg. 9
Crear la pgina: 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} itemValue="#{p.codPersona}" maxResults="5" listener="#{personasBean.elegido}" </h:form> </h:body> </html>
#{p.nombres}" />
Pg. 10
Calendar Crear la clase FechaBean: FechaBean.java package 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 pattern="yy/M/d"/> </h:body> </html> value="#{fechaBean.fecha}" showOn="button" locale="es"
Pg. 11
Captcha Este componente trabaja con una llave pblica y otra privada que se crean ingresando a
https://www.google.com/recaptcha/
Esas claves pblica y privada deben ser configuradas en el web.xml: <context-param> <param-name>primefaces.PRIVATE_CAPTCHA_KEY</param-name> <param-value>6LeiyMYSAAAAAGILocfugZnJyHp0X4s6LEpS5CY4</paramvalue> </context-param> <context-param> <param-name>primefaces.PUBLIC_CAPTCHA_KEY</param-name> <paramvalue>6LeiyMYSAAAAAG6ljSyWF74UTZsBBLmeEmNgnIea</param-value> </context-param> Crear la pgina: 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>
Pg. 12
Pie Chart Crear las siguientes clases: VentasBean.java package 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 pgina: 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>
Pg. 13
LineChart PBIBean.java package 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, anual.set(2001, anual.set(2002, anual.set(2003, anual.set(2004, anual.set(2005, anual.set(2006, anual.set(2007, anual.set(2008, anual.set(2009, anual.set(2010, } public CartesianChartModel getPbis(){ return pbis; } } 3.0); 0.2); 5.0); 4.0); 5.1); 6.7); 7.6); 8.9); 9.7); 0.9); 8.78);
pbis.addSeries(anual);
Pg. 14
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 pgina: 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>
Pg. 15
DataGrid Producto.java package 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.java package 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 plstico", 150)); productos.add(new Producto(503, "Avin", "Control remoto", 150)); productos.add(new Producto(504, "Coche", "De pltisco", 150)); productos.add(new Producto(505, "Helicoptero", "Usa pilas", 150)); productos.add(new Producto(506, "Motocicleta", "Mediana", 150)); } public List<Producto> getProductos(){ return productos; } }
Pg. 16
Registrar en el faces-config.xml: <managed-bean> <managed-bean-name>productosBean</managed-bean-name> <managed-bean-class>proyecto.bean.ProductosBean</managed-beanclass> <managed-bean-scope>request</managed-bean-scope> </managed-bean> Disear la pgina: 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 parmetro: paginator="true" 2 pies y el a utocompletar
Pg. 17
DataTable Seguir los pasos del manual de usuario de PrimeFaces. Conclusiones: En la presente sesin, se detall la implementacin del framework JSF y PrimeFaces.
Pg. 18

Java Web Laboratorio

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Java Web Laboratorio

Încărcat de

Drepturi de autor:

Formate disponibile

GUA DE LABORATORIO 2

Tecsup JSF y componentes

Equipos, Materiales, Programas y Recursos:

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Ntese que estamos agregando la librera de componentes PrimeFaces.

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

Tecsup JSF y componentes

Dpto. de Informtica David Rodrguez drodriguez@tecsup.edu.pe

S-ar putea să vă placă și