UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS COORDINACIÓN DE COMPUTACIÓN Y MÓVILES Ciclo II Desarrollo de Aplicaciones con Web Frameworks Guía de Laboratorio No. 9 Primefaces I. OBJETIVOS. Que el estudiante utilice controles avanzados de JSF y los disponibles de Primefaces Que el estudiante cree aplicaciones con JSF, JPA y EJB. Que el estudiante utilice JPQL para realizar consultas simples y con parámetros. II. INTRODUCCION PrimeFaces http://www.primefaces.org/ es una librería de componentes para JavaServer Faces (JSF) de código abierto que cuenta con un conjunto de componentes enriquecidos que facilitan la creación de las aplicaciones web. Primefaces está bajo la licencia de Apache License V2. Una de las ventajas de utilizar Primefaces, es que permite la integración con otros componentes como por ejemplo RichFaces o Bootsfaces. Propiedades: • Conjunto de componentes ricos (Editor de HTML, autocompletar, cartas, gráficas o paneles, entre otros). • Soporte de ajax con despliegue parcial, lo que permite controlar qué componentes de la página actual se actualizarán y cuáles no. • Muchos temas prediseñados. • Componente para desarrollar aplicaciones web para teléfonos móviles, especiales para iPhones, Palm, Android y teléfonos móviles Nokia. Pros y contras: En cuanto a la experiencia de los usuarios finales los componentes de Primefaces son amigables al usuario además que cuentan con un diseño innovador. Pero en lo que respecta al programador, es que sus desarrolladores no respetan un principio básico del desarrollo de componentes: la compatibilidad hacia atrás, es decir, un componente de una nueva versión
23
Embed
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS …...ventajas de utilizar Primefaces, es que permite la integración ... (Editor de HTML, autocompletar, cartas, gráficas o paneles, entre
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS
COORDINACIÓN DE COMPUTACIÓN Y MÓVILES
Ciclo II Desarrollo de Aplicaciones con Web Frameworks
Guía de Laboratorio No. 9 Primefaces
I. OBJETIVOS.
Que el estudiante utilice controles avanzados de JSF y los disponibles de Primefaces
Que el estudiante cree aplicaciones con JSF, JPA y EJB. Que el estudiante utilice JPQL para realizar consultas simples y con parámetros.
II. INTRODUCCION
PrimeFaces http://www.primefaces.org/ es una librería de componentes para JavaServer Faces (JSF) de código abierto que cuenta con un conjunto de componentes enriquecidos que facilitan la creación de las aplicaciones web. Primefaces está bajo la licencia de Apache License V2. Una de las ventajas de utilizar Primefaces, es que permite la integración con otros componentes como por ejemplo RichFaces o Bootsfaces.
Propiedades:
• Conjunto de componentes ricos (Editor de HTML, autocompletar, cartas, gráficas o paneles, entre otros).
• Soporte de ajax con despliegue parcial, lo que permite controlar qué componentes de la página actual se actualizarán y cuáles no.
• Muchos temas prediseñados.
• Componente para desarrollar aplicaciones web para teléfonos móviles, especiales para iPhones, Palm, Android y teléfonos móviles Nokia.
Pros y contras: En cuanto a la experiencia de los usuarios finales los componentes de Primefaces son amigables al usuario además que cuentan con un diseño innovador. Pero en lo que respecta al programador, es que sus desarrolladores no respetan un principio básico del desarrollo de componentes: la compatibilidad hacia atrás, es decir, un componente de una nueva versión
de Primefaces por lo general no es compatible al 100% con una aplicación desarrollada con la versión previa a la misma Puede consultar las implementaciones y ejemplos de los controles en el showcase oficial:
http://primefaces.org/showcase/
III. PROCEDIMIENTO
Paso 1: Inicie netbeans y wampserver. Procure tener disponible el servidor Glassfish. Paso 2. Crear base de datos con el script que se le proporciona a continuación Esquema:
Script:
create database poo2_capacitaciones; use poo2_capacitaciones; create table empleado( cod_empleado varchar(20) primary key, nombre varchar(50), apellido varchar(50), telefono varchar(9)); create table categorias( id_categoria int auto_increment primary key,
Paso 3: Crear un nuevo proyecto denominado Capacitaciones. Utilice el contenedor de aplicaciones Glassfish. Agregue el soporte de JSF 2.2. Paso 4: Crear EntityClases from Database de la manera acostumbrada. (En Netbeans seleccione Nuevo->Persistencia-> EntityClases from Database). Defina el paquete donde se almacenará los EntityClases con el nombre de sv.edu.udb.model
La Unidad de Persistencia debe llamarse CapacitacionesPU
Paso 5: Descargar Primefaces del sitio oficial. http://www.primefaces.org/downloads Debe seleccionar la versión Community (no es necesario registrarse en el sitio)
Agregarlo a las librerías del proyecto, la versión para ésta guía es la 6.2 Adicionalmente agregar las librerías de MySQL y Bootsfaces Incluir los recursos (imágenes). Deberán agregarse dentro de la carpeta Web Pages de Netbeans.
Paso 6: Vamos a crear los respectivos Facades que realizarán las operaciones básicas de un CRUD. En netbeans busque “Session Beans for Entity Classes”.
Seleccione las EntityClasses creadas previamente.
Establezca el paquete sv.edu.model.facade para guardar las clases.
Paso 7: Agregar la clase JSFUtil.java en el paquete sv.edu.udb.util. El objetivo de la clase es mostrar mensajes globales. package sv.edu.udb.util; import javax.faces.application.FacesMessage; import javax.faces.context.FacesContext; public class JSFUtil { public static void addGlobalErrorMessage(String message){ FacesContext context = FacesContext.getCurrentInstance(); context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, message,"Error")); } public static void addGlobalMessage(String message){ FacesContext context = FacesContext.getCurrentInstance(); context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, message,"Info")); } } Paso 8: A continuación vamos a modificar dos de los facades agregados, para incorporarles funciones adicionales: EmpleadoFacade.java
@Override protected EntityManager getEntityManager() { return em; } public EmpleadoFacade() { super(Empleado.class); } /* INICIO DE LAS MODIFICACIONES */ /** * Listado de empleados por Capacitacion * @param idCapacitacion * @return */ public List<Empleado> empleadoPorCapacitacion(int idCapacitacion){ Query query = em.createQuery("SELECT C.codEmpleado FROM CapacitacionEmpleado C where C.idCapacitacion.idCapacitacion = :idCapacitacion"); query.setParameter("idCapacitacion", idCapacitacion); return query.getResultList(); } /* FIN DE LAS MODIFICACIONES */ }
@Override protected EntityManager getEntityManager() { return em; } public CapacitacionEmpleadoFacade() { super(CapacitacionEmpleado.class); } /* INICIO DE LAS MODIFICACIONES */ /** * Para agregar un listado de empleados a una capacitación. * Recibe Un listado de códigos de empleados * Verifica que previamente no haya sido ingresado en la capacitación * y lo inserta en la tabla capacitacion_empleado * @param codigosEmpleados * @param idCapacitacion */ public void agregarEmpleadosACapacitacion(String [] codigosEmpleados, int idCapacitacion){ for(String codigo:codigosEmpleados){ Query query = em.createQuery("SELECT count(CE) FROM CapacitacionEmpleado " + " CE where CE.codEmpleado.codEmpleado = :codEmpleado " + " and CE.idCapacitacion.idCapacitacion = :idCapacitacion"); query.setParameter("codEmpleado", codigo); query.setParameter("idCapacitacion", idCapacitacion); Long validacionEmpleadoInscrito = (Long) query.getSingleResult(); if(validacionEmpleadoInscrito > 0){ JSFUtil.addGlobalErrorMessage("El empleado ya ha sido registrado:" + codigo); continue; } Empleado empleado = new Empleado(); empleado.setCodEmpleado(codigo); Capacitaciones capacitacion = new Capacitaciones(); capacitacion.setIdCapacitacion(idCapacitacion); CapacitacionEmpleado capacitacionEmpleado = new CapacitacionEmpleado(); capacitacionEmpleado.setCodEmpleado(empleado); capacitacionEmpleado.setIdCapacitacion(capacitacion);
capacitacionEmpleado.setFechaInscripcion(new Date()); this.create(capacitacionEmpleado); } JSFUtil.addGlobalMessage("Empleados agregados al curso."); } /* FIN DE LAS MODIFICACIONES */ }
Esquema del proyecto visto desde Netbeans:
Paso 9: Crear el fichero dock.xhtml que contendrá los enlaces a los módulos de la aplicación. Debe encontrarse en la carpeta resources proporcionada por el docente.
@RequestScoped public class CapacitacionesMB { @EJB CapacitacionesFacade capacitacionesFacade; @EJB CategoriasFacade categoriasFacade; private Capacitaciones capacitaciones;//<--Gegenerar Setters y Getters private Categorias categorias;//<--No tiene setter y getter public CapacitacionesMB(){ capacitaciones = new Capacitaciones(); categorias = new Categorias(); capacitaciones.setIdCategoria(categorias); } public List<Categorias> getListaCategorias(){ return categoriasFacade.findAll(); } public List<Capacitaciones> getListaCapacitaciones(){ return capacitacionesFacade.findAll(); } public String guardarCapacitacion(){ capacitacionesFacade.create(capacitaciones); capacitaciones = new Capacitaciones(); capacitaciones.setIdCategoria(categorias); JSFUtil.addGlobalMessage("Capacitacion Agregada"); return ""; } public String modificarCapacitacion(){ capacitacionesFacade.edit(capacitaciones); return ""; } /** * @return the capacitaciones */ public Capacitaciones getCapacitaciones() { return capacitaciones; } /**
* @param capacitaciones the capacitaciones to set */ public void setCapacitaciones(Capacitaciones capacitaciones) { this.capacitaciones = capacitaciones; } }
Nota: Si al ejecutar el ejercicio tiene un mensaje parecido a este:
Deshabilite las validaciones (Not null, Size) en cada uno de los EntityClases:
Paso 11: Editar index.xhtml. Se encargará de agregar nuevas capacitaciones al sistema.
return ""; } public String[] getCodigosEmpleadosSeleccionado() { return codigosEmpleadosSeleccionado; } public void setCodigosEmpleadosSeleccionado(String[] codigosEmpleadosSeleccionado) { this.codigosEmpleadosSeleccionado = codigosEmpleadosSeleccionado; } /** * @return the idCapacitacion */ public Integer getIdCapacitacion() { return idCapacitacion; } /**
* @param idCapacitacion the idCapacitacion to set */ public void setIdCapacitacion(Integer idCapacitacion) { this.idCapacitacion = idCapacitacion; } }
Paso 15: Crear training.xhtml Éste contendrá un TabView que servirá para mantener 2 formularios en un Tab. El primero mostrará un listado de capacitaciones.
El segundo tab permitirá agregar empleados a las capacitaciones.
<p:outputPanel id="detalle" style="text-align:center;"> <p:dataList value="#{trainingMB.listaEmpleadosPorCapacitacion}" var="listaEmpleados" type="unordered" itemType="none" rowsPerPageLabel="5" styleClass="paginated"> <f:facet name="header"> Lista de empleados para esta capacitación </f:facet> <h:outputText value="#{listaEmpleados.nombre} #{listaEmpleados.apellido}" /> </p:dataList> </p:outputPanel> </p:dialog> <h:messages /> </p:tab> </p:tabView> </h:form> <ui:include src="/resources/dock.xhtml" /> </h:body> </html>
IV. Ejercicios Complementarios
Utilizando PrimeFaces, BootsFaces y EJB, cree una aplicación que permita registrar los sitios de interés de su localidad. Debe registrar las siguientes categorías:
• ID • Nombre
Y registre:
1. Parques 2. Centros Comerciales 3. Bibliotecas 4. Museos 5. Reserva Natural 6. Río 7. Balneario 8. Otros que considere necesarios.
Posteriormente debe registrar los sitios con los siguiente atributos:
• Id • Categoría_ID
• Nombre • Dirección • Fotografía (La fotografía puede ser un enlace url disponible en línea) • Coordenadas (latitud y longitud)
Finalmente debe mostrar un detalle del sitio de interés y mostrar un mapa con gmap https://www.primefaces.org/showcase/ui/data/gmap/basic.xhtml Tome en cuenta que para esto debe de agregar las coordenadas al mapa a partir de la información de la base de datos. Ejemplo: <?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://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core"> <h:head> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </h:head> <h:body> <f:view contentType="text/html"> <h1>Google Map</h1> <p:gmap center="13.7159035,-89.1536987" zoom="15" type="HYBRID" style="width:600px;height:400px" /> </f:view> </h:body> </html>
Nota: Investigue cómo obtener la api key javascript para sus mapas.