Taller de Sistemas de Información 2. Desarrollo Web

Taller de Sistemas de Información 2 Desarrollo Web

Como funciona la web? Cuando navegamos la web, queremos acceder a un documento en algún lugar (de la web), para el cual disponemos de una URL (su dirección) Debido a que el documento no se encuentra en el mismo lugar donde esta el navegador, necesitamos que la computadora donde esta el documento, ejecute un software especial denominado web server

HTTP Request Todos los requests tienen esta estructura [METH] [REQUEST-URI] HTTP/[VER] [fieldname1]: [field-value1] [fieldname2]: [field-value2] [Cuerpo del request, si existe] METH representa el método HTTP utilizado GET, POST, PUT, TRACE, HEAD, DELETE

HTTP Response El server retorna una fila con el status code, una serie de headers, una línea en blanco y luego el documento solicitado HTTP/1.0 code text Field1: Value1 Field2: Value2...Contenido del documento...

Programación server side Programa

Aplicaciones web Una aplicación web es una extensión dinámica de un servidor web (a través de un servidor de aplicaciones) Pueden ser de dos tipos Orientadas a presentación Generan interfaces web en múltiples lenguajes (HTML, XHTML, XML, etc.) Las respuestas contienen contenido dinámico generado por el servidor Orientadas a servicios Este tipo de aplicaciones implementan el endpoint de un servicio web Pueden exponer servicios web tipo REST o tipo SOAP

Aplicaciones web En la plataforma Java EE, los componentes web proveen las extensiones a los servidores web tradicionales Existen diversos tipos de componentes Servlets Paginas web implementadas con Java Server Faces Paginas web implementadas con Java Server Pages Endpoints de servicios web REST / SOAP

Aplicaciones web Los componentes web funcionan gracias a los servicios de un runtime denominado web container Este provee servicios como Despacho y ruteo de requests Seguridad Concurrencia Gestión del ciclo de vida Como en el caso de los componentes de negocio, los aspectos de configuración de las aplicaciones pueden ser definidos a través de anotaciones o de deployment descriptors

Módulos web Los componentes web y los recursos estáticos como imágenes y documentos, se denominan recursos web Un modulo web, es la unidad mínima que podemos instalar en un web container Un modulo web, corresponde o equivale a una aplicación web Un conjunto de recursos que colaboran para brindar una determinada funcionalidad Componentes de diverso tipo que participan en dichas funcionalidades

Estructura de un modulo web

Servlets Son componentes que ejecutan en el servidor Su objetivo principal es procesar las solicitudes HTTP que son recibidas por el servidor web Como parte de este proceso, pueden: Generar contenido HTML dinámicamente Rutear las solicitudes en el servidor de aplicaciones Ejecutan en el container como los demás componentes web

@WebServlet Especifica la configuración necesaria para una clase de un Servlet

Ciclo de vida de un servlet Cargar la clase del servlet Creamos una instancia de un servlet SOLO UNA Se invoca el método init() Se invoca el método service() Delega a los métodos doxxx Se invoca el método destroy() Solo cuando el servlet es desalocado

Interactuando con el Servlet <form method= POST action= /Usuarios/loginServlet > Nombre: <input type= text name= firstname /> Apellido <input type= text name= lastname /> </form>

Interactuando con el Servlet Login.html HTTP Request METH POST firstname= Pablo lastname= Gomez LoginServlet Pablo Gomez HTTP Response Pablo Gomez

Web Contexts Los web contexts permiten que los componentes web puedan compartir e intercambiar información Supongamos que tenemos una aplicación web con un carrito de compras Un servlet se puede encargar de actualizar el contenido del objeto carrito Otro servlet genera el HTML necesario para mostrar el contenido de dicho carrito Tenemos varios contextos posibles Application context Session context Request context

Web Contexts Application Server Web Application 1 Web Application 2

Web Contexts Application Server Web Application 1 Web Application 2 Web Context

Web Contexts Application Server Web Application 1 Web Application 2 Web Context Servlet 1

Web Contexts Application Server Web Application 1 Web Application 2 Web Context Servlet 1

Web Contexts Application Server Web Application 1 Web Application 2 Web Context Servlet 2

Web Contexts Application Server Web Application 1 Web Application 2 Web Context Servlet 2

ApplicationContext public class HolaMundoServlet extends HttpServlet { public void doget( HttpServletRequest request, HttpServletResponse response) { ServletContext ctx = getservletcontext(); ctx.setattribute("fechaproceso", new Date()); } }... construccion de la respuesta...

ApplicationContext public class ChauMundoServlet extends HttpServlet { public void doget( HttpServletRequest request, HttpServletResponse response) { } } ServletContext ctx = getservletcontext(); Date fecha = (Date)ctx.getAttribute("fechaProceso");... construccion de la respuesta...

Session Context HttpSession es el objeto que representa a la sesión del usuario Puede ser obtenido a partir del objeto Request en cada servlet HttpSession session = request.getsession(); Provee los métodos: Object getattribute(string key); void setattribute(string key, Object value);

Session Context Ejemplos: Carrito carrito = new Carrito(); HttpSession session = request.getsession(); session.setattribute( carrito, carrito); En otro servlet... Carrito carrito = (Carrito)session.getAttribute( carrito );

Request Context HttpServletRequest es el objeto que representa a la solicitud enviada desde la pagina Es pasado como parámetro a los métodos doxxx del Servlet Provee los mismos métodos que los anteriores contextos, para almacenar información: Object getattribute(string key); void setattribute(string key, Object value);

Listeners Los listeners son un tipo especial de código que sirve para responder a los distintos eventos que se pueden generar durante el ciclo de vida de una aplicación Web Los eventos mencionados se pueden categorizar en: Context events Context attribute events Session events Session attribute events

Filtros Permite interceptar solicitudes HTTP que son enviadas a un Servlet

Filtros Las solicitudes pueden ser reenviadas o bloqueadas directamente en el filtro

Filtros

Configuración basada en anotaciones

Concurrencia Típicamente, múltiples solicitudes pueden ser enviadas al mismo servlet Esto implica que debemos considerar la concurrencia cuando trabajamos con Servlets, garantizando que sea thread-safe Se deben seguir estas reglas El método de servicio no debe acceder a variables miembro (a menos que sean thread safe), ni para modificar ni para reasignar Lo mismo aplica para variables estáticas (en realidad es peor) Las variables locales son siempre thread safe, a menos que apunte a un objeto compartido. Por ejemplo una referencia a un hashmap estático.

Pagina JSP Dentro de Java EE tenemos una mejor herramienta para resolver este problema La pagina JSP permite generar contenido HTML dinámico, como el Servlet, pero de una forma mas orientada al documento HTML Se pueden ver como el enfoque contrario al Servlet Son código HTML con Java embebido

Deployment de paginas JSP Las paginas JSP se sitúan en un proyecto JavaEE en el mismo lugar que las paginas HTML, esto es, fuera de la carpeta WEB-INF Esto permite que un usuario desde afuera, pueda acceder a una pagina JSP directamente, haciendo por ejemplo: http://localhost:8080/app/hola.jsp http://localhost:8080/app/jsp/hola.jsp Las paginas también pueden ser colocadas dentro de la carpeta WEB- INF, si queremos que no sean accesibles directamente desde el browser

Un ejemplo que genera una tabla dinámicamente

Java Server Faces Es un framework de componentes que ejecuta en el lado del servidor Consiste en dos grandes partes Un API que permite representar componentes, manejar su estado, manejar eventos, realizar validaciones a nivel server side, convertir datos, definir navegaciones entre paginas, soportar internacionalización, etc. Bibliotecas de TAGs para agregar componentes a las paginas web, así como conectar estos a objetos del lado del servidor JSF provee un modelo definido y claro de programación para el desarrollo de interfaces web en Java EE

Java Server Faces Composición Un conjunto de paginas web, las cuales pueden tener incluidos componentes Un conjunto de tags que incluyen componentes en las paginas web Un conjunto de objetos, server side, gestionados por el container, denominados Managed Beans que actúan como soporte de las paginas donde están los componentes JSF Un deployment descriptor (web.xml) (opcional) Un archivo de configuración (faces-config.xml) (opcional) Un conjunto de objetos de soporte para facilitar el desarrollo de la aplicación web (opcional) Un conjunto de objetos necesarios para integrar con EJB

Ciclo típico

Java Server Faces La pagina web myfacelet.xhtml es construida usando xhtml y tags de JSF Estos tags permiten agregar componentes en la vista, representada por myview Esta es la representación server side de la pagina que solicitamos La pagina puede referenciar también Listeners de eventos, validadores de datos, conversores de datos Los componentes (JavaBeans, EJBs, Web services, etc.) que capturan los datos y los procesan según lo que tenga que realizar la aplicación

Ventajas

Implementación JSF es parte de la especificación Java EE Es necesario contar con una implementación de dicha especificación Reference Implementation, de Oracle MyFaces, de Apache Un servidor de aplicaciones con soporte para JSF, debe incorporar estas bibliotecas Wildfly, Glassfish, JBoss

Implementación Complementando a la implementación tenemos bibliotecas de extensión Generalmente agregan mas controles y componentes Permiten customizar mas la apariencia Algunos ejemplos Richfaces Primefaces

Como funciona JSF?

Como funciona JSF? Cada vez que se accede a la misma, se realizan una serie de pasos estandarizados En el servidor, se construye un árbol de componentes que concuerda con la estructura de componentes presentada en la pagina XHTML Una vez que este árbol esta instanciado, es posible interactuar con el, modificando propiedades que posteriormente se reflejaran nuevamente en la interfaz de usuario

Como funciona JSF?

Ciclo de vida La secuencia de eventos que es disparada cada vez que se solicita una pagina JSF Consiste en una serie de etapas bien diferenciadas que ocurren transparentemente al desarrollador

Ciclo de vida Realiza todo el procesamiento a nivel de backend mencionado anteriormente Si no fuera realizado automáticamente, debería programarse manualmente El ciclo de vida toma los requests provenientes del cliente, y los sincroniza con un conjunto de componentes de UI mantenidos serverside

Fases del ciclo de vida El ciclo de vida se encuentra dividido en fases, cada una de las cuales se encarga de una tareas especifica del proceso server-side Restore View Apply Request Values Process Validations Update Model Values Invoke Application Render Response

Restore View La Faces View, es una representación server side de los componentes que forman la interfaz de usuario Es un árbol de componentes de UI Es tarea de esta etapa, restaurar este árbol de componentes de una interacción anterior, o crear un nuevo árbol para un nuevo request

Apply Request Values El objetivo de este paso es procesar los diferentes parámetros que puedan venir dentro del request Cada componente de la View esta listo en este momento para recibir una actualización de los valores que puedan venir del cliente Estos valores siempre llegan de la forma name-value, donde el name y el value son de tipo String

Process Validations Esta etapa se encarga de la validación y conversión de los datos Los componentes pueden tener asociados validadores y convertidores Todo componente que falle en su validación Tendrá su atributo valid en false Tendrá un mensaje asociado (FacesMessage) el cual sera encolado en el FacesContext Cuando la respuesta sea enviada, estos mensajes podrán ser desplegados

Update Model Values Asumiendo que la validación y conversión fue superada, es hora de colocar la información en el modelo Este proceso se realiza para los objetos que han sido asociados (value binding) a los valores de los componentes de UI Esta es una de las etapas mas interesantes, ya que aquí es donde se produce parte de la magia de JSF

Invoke Application Todas las etapas anteriores corresponden a una parte de las tareas típicas con una aplicación web La otra parte consiste en tomar los datos recibidos y hacer algo útil con estos, como por ejemplo invocar un método externo para procesar los datos recibidos En esta etapa, los custom action code son invocados Action Methods Action Listener Methods

Invoke Application En esta etapa también ocurren las navegaciones a otras paginas Cuando los Action Methods devuelven un String con el outcome de una regla de navegación para la pagina actual, entonces se realiza el proceso de navegación a otra pagina de la aplicación con el nombre de la pagina a la que queremos navegar (usando navegación implícita, como los ejemplos anteriores)

Render Response Es la etapa final del proceso, cuando la respuesta es construida y entregada al cliente En esta etapa también se almacena el estado de la View, de forma de poder restaurarla en subsiguientes requests En esta etapa es donde se realiza la unión del código estático en la vista, junto con el código dinámico de la misma En general el desarrollador no debe intervenir en esta etapa

Render Response

Actions y ActionListeners Los componentes que disparan eventos en JSF, son los commandbuttons (botones) y los commandlinks Ambos tienen los atributos actionlistener y action

Immediate Es un atributo muy importante del JSF, que afecta como funciona el ciclo de vida de un request, brindando mas flexibilidad según sea necesario Un ejemplo clásico se da cuando queremos agregar a un formulario de registro de información un botón de cancelación

Immediate Utilizar el componente sin el atributo immediate, hace que el botón se comporte como un componente típico que dispara el ciclo de vida de JSF Sin embargo, consideremos el caso en que queremos irnos de la pagina, sin realizar las validaciones Si Immediate esta en true, entonces el ciclo de vida se saltea cualquier etapa de validación y conversión, navegando directamente a donde nos interesa <h:commandbutton value="cancel" action="main" immediate="true" />

Managed Bean

Managed Bean

Managed Bean Para acceder a las propiedades de los beans, utilizamos el Expression Language de JSF, muy similar (idéntico cambiando $ por #) al utilizado para JSP Por ejemplo: <h:outputtext value="#{userbean.firstname}" /> También podemos poner directamente en la pagina la expresión EL <td>#{userbean.firstname}</td>

Managed Properties

Interdependencia En el caso de usar anotaciones @ManagedProperty(value="#{addressBean}") private Address homeaddress; @ManagedProperty(value="#{addressBean}") private Address shippingaddress; Y para usarlo desde EL <h:inputtext value="#{userbean.homeaddress.street}"/>

Scopes none o @NoneScoped Son instanciados en demanda por otro managed bean Seguirán vivos en el sistema, mientras el bean que los referencie siga vivo request o @RequestScoped Las instancias de los managed beans con este scope existirán mientras el HTTP request del pedido actual exista view o @ViewScoped Las instancias de los managed beans estarán asociadas a la vista actual Si el usuario navega fuera de la vista actual, los beans registrados serán eliminados session o @SessionScoped Los managed beans estaran asociados a la sesión del usuario application o @ApplicationScoped Como antes, pero las instancias se almacenan en el application scope

Value Expressions Son la forma más común de uso de las expresiones EL Permiten obtener valores evaluados dinámicamente o establecer el valor de una propiedad de un bean, usando siempre una expresión compacta Por ejemplo: <h:outputtext value="#{userbean.firstname}"/> <h:inputtext value="#{userbean.firstname}"/>

Method Expressions Son utilizadas para invocar métodos públicos no estáticos de los managed beans Por ejemplo: <h:commandbutton value="confirm action="#{userbean.addconfirmeduser}" /> Los únicos operadores validos para las method expressions son el punto y los corchetes (. y []) EL no provee un mecanismo para pasar parámetros, a fin de mantener el lenguaje simple

Method Expressions

Method Expressions

Method Expressions Podemos también invocar métodos arbitrarios, pasando argumentos, siempre y cuando devuelvan un String

Modelo de navegación Es uno de los aspectos mas elegantes de JSF Permite especificar el flujo de paginas completo de la aplicación Tenemos dos tipos de Navegación Navegación implícita Navegación basada en reglas XML

Navegación implícita Consiste en poner directamente en las paginas JSF los nombres de las paginas El sistema de navegación de JSF busca por paginas xhtml con el mismo nombre que las etiquetas puestas en los eventos

Navegación implícita Cuando se presiona el botón Register, el sistema de navegación busca por una pagina de nombre confirm.xhtml en la aplicación En la pagina confirm, tenemos lo siguiente: <h:commandbutton value="edit" action="register" /> <h:commandbutton value="confirm" action="#{userbean.addconfirmeduser}" /> Si presionamos Edit, volvemos a la pagina register.xhtml

Navegación implícita

Navegación basada en reglas

Reglas de navegación <navigation-rule> <from-view-id>/page1.xhtml</from-view-id> <navigation-case> <from-outcome>gotopage2</from-outcome> <to-view-id>/page2.xhtml</to-view-id> </navigation-case> </navigation-rule>

Reglas de navegación Para que puede ser útil tener el <from-action> y el <from-outcome> en la regla de navegación si con el outcome solamente nos basta? Que sucedería si queremos agregar un segundo botón de login, los cuales invocan a diferentes métodos, retornan el mismo outcome pero navegan a diferentes métodos? No podemos resolverlo sin el from-action...

Componentes de UI El árbol de componentes creado por JSF al momento de ejecutar el ciclo de vida de un request, se denomina View Esto permite que el programador trabaje en una modalidad mas tradicional, concentrado en el modelo de objetos, dejando que JSF se encargue de sincronizar el estado de ese árbol entre el servidor y el browser Por ejemplo...

Componentes HTML

Componentes HTML