PROGRAMACION III

Report as inappropriate Your report has been received
Shared by: HC120730111754
Tags
Stats
views:: 113
posted:: 7/30/2012
language:
pages:: 19
Public Domain
Document Sample
							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 – drodriguez@tecsup.edu.pe                    Pág. 1
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 – drodriguez@tecsup.edu.pe                     Pág. 2
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_TIMEZO
NE</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 – drodriguez@tecsup.edu.pe                         Pág. 3
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 – drodriguez@tecsup.edu.pe               Pág. 4
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 – drodriguez@tecsup.edu.pe                   Pág. 5
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 – drodriguez@tecsup.edu.pe                   Pág. 6
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 – drodriguez@tecsup.edu.pe                         Pág. 7
Tecsup                                                              JSF y componentes



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");
                 p3.setNombres("Luis");
Dpto. de Informática – David Rodríguez – drodriguez@tecsup.edu.pe              Pág. 8
Tecsup                                                                      JSF y componentes




                 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);
                 // 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 – drodriguez@tecsup.edu.pe                      Pág. 9
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 – drodriguez@tecsup.edu.pe                  Pág. 10
Tecsup                                                                           JSF y componentes



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          value="#{fechaBean.fecha}"       showOn="button"   locale="es"
pattern="yy/M/d"/>
</h:body>
</html>




Dpto. de Informática – David Rodríguez – drodriguez@tecsup.edu.pe                          Pág. 11
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 – drodriguez@tecsup.edu.pe                Pág. 12
Tecsup                                                                    JSF y componentes



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 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 – drodriguez@tecsup.edu.pe                   Pág. 13
Tecsup                                                              JSF y componentes



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, 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 – drodriguez@tecsup.edu.pe             Pág. 14
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 – drodriguez@tecsup.edu.pe               Pág. 15
Tecsup                                                                          JSF y componentes



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 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 – drodriguez@tecsup.edu.pe                          Pág. 16
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 – drodriguez@tecsup.edu.pe                     Pág. 17
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 – drodriguez@tecsup.edu.pe                     Pág. 18