{"id":115,"date":"2016-07-19T18:53:41","date_gmt":"2016-07-19T23:53:41","guid":{"rendered":"http:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/?page_id=115"},"modified":"2016-08-30T17:27:43","modified_gmt":"2016-08-30T22:27:43","slug":"laboratorio-2-jsf","status":"publish","type":"page","link":"https:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/laboratorios\/laboratorio-2-jsf\/","title":{"rendered":"Laboratorio 2 &#8211; JSF"},"content":{"rendered":"<h2>Objetivos<\/h2>\n<p>Desarrollar el nivel de presentaci\u00f3n de una aplicaci\u00f3n empresarial utilizando el framework JavaServer Faces (JSF). Esto incluye:<\/p>\n<ul>\n<li>Experimentar el uso de una implementaci\u00f3n de un framework basado en el patr\u00f3n de IoC (Inversion of Control). En este tipo de frameworks se define un modelo de componentes y por medio de metadata se configura el acceso a recursos (e.g., bases de datos), los atributos de calidad (e.g., navegabilidad, seguridad) y otros servicios (e.g., persistencia). El framework que utilizamos es JEE. En particular en este taller exploramos el modelo de componentes Web provisto por la plataforma JSF, que hace parte de JEE.<\/li>\n<li>Aprender a utilizar una herramienta de desarrollo para aplicaciones basadas en JSF.<\/li>\n<li>Utilizar el patr\u00f3n MVC junto con un framework de componentes para el desarrollo de interfaces gr\u00e1ficas para aplicaciones empresariales.<\/li>\n<li>Desarrollar Managed Beans, que juegan el rol de modelo en el patr\u00f3n MVC, para manejar los datos y la navegaci\u00f3n de una aplicaci\u00f3n JSF (Nota: Estos modelos est\u00e1n acoplados con la vista por lo menos a nivel de navegaci\u00f3n).<br \/>\nUtilizar Mock objects para facilitar las pruebas e integraci\u00f3n de componentes.<\/li>\n<\/ul>\n<h2>Herramientas<\/h2>\n<ul>\n<li>Para el desarrollo de todos los talleres del curso se utilizar\u00e1 Netbeans 8.0.2, el cual se puede descargar de la siguiente direcci\u00f3n: <a href=\"https:\/\/netbeans.org\/downloads\/\">https:\/\/netbeans.org\/downloads\/<\/a><\/li>\n<li>El servidor de aplicaciones a usar es <a href=\"https:\/\/glassfish.java.net\/docs\/4.0\/quick-start-guide.pdf\">GlassFish Server Open Source Edition 4.1 (Java EE 7)<\/a>, el cual se puede descargar de la siguiente direcci\u00f3n <a href=\"https:\/\/glassfish.java.net\/download.html\">link<\/a>.<\/li>\n<li><a href=\"http:\/\/netbeans.org\/kb\/docs\/web\/jsf20-intro.html\">Tutorial de introducci\u00f3n a JSF 2.X con Netbeans<\/a><\/li>\n<li><a href=\"http:\/\/www.primefaces.org\/showcase\/index.xhtml\">Primefaces Demo<\/a><\/li>\n<li><a href=\"http:\/\/primefaces.org\/documentation\">Primefaces documentation<\/a><\/li>\n<\/ul>\n<h2>Caso de Estudio de Ejemplo<\/h2>\n<p>En esta primera parte el objetivo es familiarizarse con la tecnolog\u00eda JSF y los requerimientos para desarrollar la capa web de una aplicaci\u00f3n JEE. En segundo lugar se desarrollar\u00e1 la capa web para todos los requerimientos de Muebles de los Alpes.<\/p>\n<ol>\n<li>Para familiarizarse con las actividades necesarias para crear una aplicaci\u00f3n con interfaz web debe seguir y completar antes de este taller el tutorial de JSF 2.x que se encuentra en el siguiente enlace <a href=\"http:\/\/netbeans.org\/kb\/docs\/web\/jsf20-intro.html\">Introduction to JavaServer Faces 2.x<\/a><\/li>\n<li>Si usted ya est\u00e1 familiarizado con la plataforma JEE y ya conoce los principios b\u00e1sicos de la plataforma JSF, el siguiente paso consiste en descargar el <a href=\"http:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-content\/uploads\/sites\/99\/2016\/07\/Lab2-MueblesDeLosAlpes.zip\">c\u00f3digo<\/a>, que presenta el esqueleto de un programa desarrollado para cumplir con los requerimientos del proyecto \u201cMuebles los Alpes\u201d, el cual ser\u00e1 utilizado con dos prop\u00f3sitos: (1) servir\u00e1 de introducci\u00f3n para reafirmar los conceptos de JSF vistos en clase; (2) servir\u00e1 como ejemplo para la elaboraci\u00f3n de la segunda parte de este laboratorio.<\/li>\n<li>Inspeccione el c\u00f3digo descargado:\n<ol>\n<li>La aplicaci\u00f3n es una aplicaci\u00f3n empresarial. En JEE estas aplicaciones tienen generalmente dos partes. La primera parte corresponde a un modulo \u201cwar\u201d que contiene los componentes de la aplicaci\u00f3n WEB, que son ejecutados por el contenedor Web. La segunda parte es un modulo \u201cejb\u201d que contiene los componentes que implementan la l\u00f3gica de negocio y que son ejecutados en el contenedor de EJB. Esta arquitectura permite gran flexibilidad, por ejemplo, permite desplegar la interface gr\u00e1fica y la l\u00f3gica de aplicaciones en m\u00e1quinas distintas.<\/li>\n<li>Al abrir el proyecto usted encuentra tres carpetas dentro del mismo:\n<ol>\n<li>La carpeta <em>Configuration Files<\/em> que almacena el <em>MANIFEST.MF<\/em>.<\/li>\n<li>La carpeta <em>Server Resources<\/em> que se encuentra vac\u00eda.<\/li>\n<li>La carpeta <em>Java EE Modules<\/em> que contiene los m\u00f3dulos EJB y WAR del proyecto. Necesita abrir ambos m\u00f3dulos haciendo doble clic sobre los mismos. El m\u00f3dulo <em>MueblesDeLosAlpes-war<\/em> es el que contiene las p\u00e1ginas, los Managed Beans y los archivos de configuraci\u00f3n <em>(faces-config.xml<\/em> y <em>web.xml<\/em>) de la interfaz web. El m\u00f3dulo de <em>MueblesDeLosAlpes-ejb<\/em> contiene los mocks de l\u00f3gica de negocio y persistencia, las excepciones y las pruebas unitarias.<\/li>\n<\/ol>\n<\/li>\n<li>El archivo <em>web.xml<\/em>, que se encuentra en la ruta <em>Web Pages\/WEB-INF\/<\/em>, es el archivo descriptor de despliegue, es decir, contiene toda la informaci\u00f3n que necesita el contenedor para hacer el despliegue de la aplicaci\u00f3n web. Esta informaci\u00f3n contiene la descripci\u00f3n de los servlets, inicializaci\u00f3n de par\u00e1metros, frameworks a utilizar, entre otras cosas. M\u00e1s informaci\u00f3n en <a href=\"http:\/\/www.oracle.com\/technetwork\/java\/javaee\/tech\/index.html\">Configurando la aplicaci\u00f3n<\/a>.<\/li>\n<li>JSF es un framework de componentes basado en el patr\u00f3n MVC. En este framework el controlador es implementado por el servlet principal de JSF (FacesServlet), la vista es implementada por las p\u00e1ginas, y el modelo es implementado por los Managed Beans.<\/li>\n<li>El controlador est\u00e1 incluido en la plataforma JSF y lo \u00fanico que debemos asegurar es que la aplicaci\u00f3n est\u00e9 bien <a href=\"http:\/\/www.oracle.com\/technetwork\/java\/javaee\/tech\/index.html\">configurada<\/a>.<\/li>\n<li>Las vistas se implementan en p\u00e1ginas \u201cxhtml\u201d usando las librer\u00edas de tags b\u00e1sicos HTML y core de JSF.<\/li>\n<li>Los modelos se implementan con managed-beans, que son POJOS enriquecidos con metadata.<\/li>\n<li>Existen cuatro tipos de alcance (scope) para los managed-beans:\n<ol>\n<li><strong>Request:<\/strong> Es un bean de vida corta. Es decir, se crea cuando se instancia un HTTP Request y dura \u00fanicamente durante el tiempo que sea necesario para resolver dicho HTTP Request.<\/li>\n<li><strong>Session:<\/strong> Este bean persiste a lo largo de toda la sesi\u00f3n. Una sesi\u00f3n termina por decisi\u00f3n del contenedor (por medio de un time-out configurable) o manualmente (opci\u00f3n para el desarrollador).<\/li>\n<li><strong>Application:<\/strong> Los beans con este alcance persisten durante el tiempo que persiste la aplicaci\u00f3n en el contenedor.<\/li>\n<li><strong>View:<\/strong> Persiste mientras una p\u00e1gina es re-desplegada. Es particularmente \u00fatil para p\u00e1ginas que usan AJAX.<\/li>\n<\/ol>\n<\/li>\n<li>Existen tres formas de crear managed-beans:\n<ol>\n<li>Manualmente con anotaciones (recomendada): Para esto se debe agregar una nueva clase en el proyecto que represente al bean. La clase entonces puede ser anotada con el siguiente c\u00f3digo:\n<pre class=\"code\">@ManagedBean\r\n@SessionScoped\r\npublic class Hello {...}<\/pre>\n<p>o tambi\u00e9n dando un nombre espec\u00edfico:<\/p>\n<pre class=\"code\">@ManagedBean(name=\"hello\")\r\n@SessionScoped\r\npublic class Hello {...}<\/pre>\n<\/li>\n<li>Manualmente por medio del archivo<em> faces-config.xml<\/em>: Para esto se debe agregar una nueva clase en el proyecto que represente al bean. Posteriormente, debe modificarse el archivo <em>faces-config.xml<\/em> con la referencia al nuevo bean. Espec\u00edficamente, debe insertarse el siguiente bloque de c\u00f3digo:\n<pre><span style=\"color: blue\">&lt;managed-bean&gt;\r\n    &lt;managed-bean-name&gt;<\/span>NuevoBean<span style=\"color: blue\">&lt;\/managed-bean-name&gt;<\/span>\r\n    <span style=\"color: blue\">&lt;managed-bean-class&gt;<\/span>com.losalpes.beans.NuevoBean<span style=\"color: blue\">&lt;\/managed-bean-class&gt;<\/span>\r\n    <span style=\"color: blue\">&lt;managed-bean-scope&gt;<\/span>request<span style=\"color: blue\">&lt;\/managed-bean-scope&gt;\r\n&lt;\/managed-bean&gt;<\/span><\/pre>\n<\/li>\n<li>Mediante asistente de creaci\u00f3n de NetBeans:<br \/>\nSe abre el asistente de creaci\u00f3n mediante clic derecho sobre el proyecto WAR. Luego clic en <em>New<\/em> y selecci\u00f3n de la opci\u00f3n <em>Other<\/em>.<\/li>\n<li><a href=\"http:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-content\/uploads\/sites\/99\/2016\/07\/managedbean1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-158 aligncenter\" src=\"http:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-content\/uploads\/sites\/99\/2016\/07\/managedbean1-300x171.png\" alt=\"managedbean1\" width=\"547\" height=\"319\" \/><\/a>\n<ol>\n<li>El archivo <em>project.xml<\/em> ubicado en el proyecto WEB de la aplicaci\u00f3n contiene la configuraci\u00f3n de todas las librer\u00edas y proyectos referenciados desde el nivel WEB.<\/li>\n<li>Los paquetes <em>dist<\/em> de <em>MueblesDeLosAlpes-war<\/em> y <em>MueblesDeLosAlpes-ejb<\/em> contienen todos los archivos compilados que hacen parte del despliegue de la aplicaci\u00f3n y los archivos XML que hacen la compilaci\u00f3n mediante ANT.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h2>Desarrollo del laboratorio<\/h2>\n<p>Usted debe desarrollar los elementos necesarios para crear la capa de presentaci\u00f3n para cumplir con los requerimientos expuestos en el <a href=\"https:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/caso-de-estudio\/\">enunciado<\/a>, a partir del <a href=\"http:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-content\/uploads\/sites\/99\/2016\/07\/Lab2-MueblesDeLosAlpes.zip\">c\u00f3digo<\/a>. No se debe desarrollar la creaci\u00f3n de muebles porque est\u00e1 definida como ejemplo en este taller. Sin embargo, es necesario en la consulta de clientes tener los filtros de b\u00fasqueda definidos en la especificaci\u00f3n.<\/p>\n<ol>\n<li>Creaci\u00f3n, actualizaci\u00f3n, consulta y eliminaci\u00f3n de clientes.<\/li>\n<li>Proceso de compra de un producto a trav\u00e9s de la p\u00e1gina web.<\/li>\n<li>Generar reportes sobre las ventas diarias.<\/li>\n<\/ol>\n<p>Para lograr esto, usted debe:<\/p>\n<ul>\n<li>Definir las p\u00e1ginas JSF requeridas en el proyecto.<\/li>\n<li>Definir los Managed Beans necesarios.<\/li>\n<li>Definir los mocks de los objetos de negocio para que su interfaz funcione (para el taller 3 ser\u00e1n reemplazados por EJB de session).<\/li>\n<li>La navegaci\u00f3n quemada en el c\u00f3digo de los managed-beans o de las p\u00e1ginas xhtml, presenta una seria desventaja para el mantenimiento de la aplicaci\u00f3n. Sin embargo, si usted utiliza las cadenas como elementos de un esquema de nombres y utiliza el archivo de <em>faces-config.xml<\/em> puede crear un poderoso y flexible mecanismo de desacoplamiento. Modifique su aplicaci\u00f3n para desacoplar la navegaci\u00f3n en un archivo de configuraci\u00f3n <em>faces-config.xml<\/em>. Puede ayudarse de la informaci\u00f3n contenida en este <a href=\"http:\/\/www.oracle.com\/technetwork\/java\/javaee\/tech\/index.html\">link<\/a>.<\/li>\n<\/ul>\n<h2>Entregables<\/h2>\n<p>La entrega del laboratorio se debe hacer por Sicuaplus y consiste en un archivo .zip con la siguiente estructura de directorios interna:<\/p>\n<ul>\n<li>laboratorio2\\Lab2-MueblesDeLosAlpes-ejb\\ (completo)<\/li>\n<li>laboratorio2\\Lab2-MueblesDeLosAlpes-war\\ (completo)<\/li>\n<\/ul>\n<h2>Evaluaci\u00f3n<\/h2>\n<p>La evaluaci\u00f3n de este taller se har\u00e1 de acuerdo con la siguiente <a href=\"http:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-content\/uploads\/sites\/99\/2016\/07\/plantillalaboratorio.xlsx\">plantilla de calificaci\u00f3n<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Objetivos Desarrollar el nivel de presentaci\u00f3n de una aplicaci\u00f3n empresarial utilizando el framework JavaServer Faces (JSF). Esto incluye: Experimentar el uso de una implementaci\u00f3n de un framework basado en el patr\u00f3n de IoC (Inversion of Control). En este tipo de &hellip; <a class=\"more-link\" href=\"https:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/laboratorios\/laboratorio-2-jsf\/\">Sigue leyendo <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":107,"featured_media":0,"parent":111,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-115","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-json\/wp\/v2\/pages\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-json\/wp\/v2\/users\/107"}],"replies":[{"embeddable":true,"href":"https:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-json\/wp\/v2\/comments?post=115"}],"version-history":[{"count":8,"href":"https:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-json\/wp\/v2\/pages\/115\/revisions"}],"predecessor-version":[{"id":337,"href":"https:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-json\/wp\/v2\/pages\/115\/revisions\/337"}],"up":[{"embeddable":true,"href":"https:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-json\/wp\/v2\/pages\/111"}],"wp:attachment":[{"href":"https:\/\/cursos.virtual.uniandes.edu.co\/csof5302\/wp-json\/wp\/v2\/media?parent=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}