Sesion 4. Desarrollo de Componentes Web con Servlets y...

Desarrollo de ComponentesWeb con Servlets y JSP

ContenidosContenidos

Arquitectura cliente-servidor de HTTP

Tecnologías de aplicaciones web

Estructura de un sitio web

� Estructura lógica vs física del sitio


Localizador uniforme de recursos

Sitios web y aplicaciones web

� Un sitio web es una colección de archivos estáticos, páginas HTML, gráficos y otros archivos diversos.

� Una aplicación web es un sitio web con


� Una aplicación web es un sitio web con funcionalidad dinámica en el servidor. Una aplicación web ejecuta programas en el servidor.

� Un Servicio Web es un servicio que una aplicación ofrece a otra a través de World Wide Web y transferencia de datos en XML.

Ejecución de programas CGI


Ejecución de servlets Java


Java Servlets


Tecnología JavaServer Pages


JSP: Proceso de compilación

Comparación entre servlets y componentes JSP

Ejemplo: de JSP a Servlet (Tomcat)

Comparación entre servlets y componentes JSP

Arquitectura web: capas


Arquitectura web: MVC


Arquitectura del modelo 2


Ejemplo de arquitectura Java EE


Tipos de componentes visuales� Presentación de datos

� Incluye todos los datos presentados en una pantalla visible.� Existen numerosas formas de presentación, como gráficos, hojas de cálculo, listados, etc.

� Formularios de datos

Desarrollo de componentes visuales

� Formularios de datos� Los formularios de entrada de datos también se consideran componentes visuales.

� Ayudas de navegación� Este tipo de vistas incluye menús, hipervínculos, mapas del sitio, etc.

� Pantallas informativas o ventanas emergentes� Este tipo de vistas incluye texto de bienvenida, instrucciones, pantallas de ayuda, mensajes de error, cuadros de confirmación, etc.

Caso de ejemplo de liga de fútbol


Modelo de análisis de un caso de uso


Páginas de List Leagues

� Inicial


� Lista de ligas

Ej: Ligas v.0

Protocolo de


Protocolo de transferencia de hipertexto (HTTP)

Solicitud HTTP: método GET


Respuesta HTTP


Arquitectura de contenedor web


Proceso de solicitud y respuesta

1. El navegador se conecta al contenedor web

2. El contenedor web crea dos objetos


2. El contenedor web crea dos objetos con los flujos de entrada/salida

3. El contenedor web ejecuta el servlet4. El servlet utiliza el flujo de salida para

generar la respuesta

1º: El navegador se conecta al contenedor web


2º: Contenedor web crea dos objetos con flujos entrada/salida


3º: El contenedor web ejecuta el servlet


4º: El servlet utiliza el flujo de salida para generar la respuesta


Diagrama de secuencia de una solicitud HTTP GET


Attributes[R/W/D]

ContentType[W]

Writer[W]

WebContainer

Utilización de las API de petición y respuesta

Utilización de las API de petición y respuesta

HttpServeltRequest HttpServletResponse

serviceservice()()

Parameters[R]

Session[R/W/D]

Cookies [R]

OutputStream[W]

Cookies[W]

Redirect[W]

Desarrollo de un servlet de HTTP simple


Ej: Ligas v.1Ej: Ligas v.1

La API de HttpServlet


Estructura física de la aplicación: fichero WAR


Estructura lógicaEstructura lógica

Configuración de la aplicación: web.xml


Tipos de componentes controladores� Procesan la entrada del usuario

� La entrada de una solicitud HTTP se suministra mediante formularios web (o HTML). Estos formularios permiten al usuario introducir datos de texto, seleccionar botones de opción, casillas de verificación, listas desplegables, etc. En los formularios web se usa un botón de envío para enviar los datos al servidor web.

Desarrollo de componentes controladores

un botón de envío para enviar los datos al servidor web.� Permiten navegar por la pantalla

� En un nivel elemental, los hipervínculos de las páginas web son una forma de navegación en pantalla. Algunos mecanismos de navegación pueden requerir datos (como usar una lista desplegable) para seleccionar la próxima pantalla donde navegar.

� Preparan datos para componentes visuales� Algunos controladores sólo pueden preparar datos de negocio para presentarlos en una vista. Un buen ejemplo de ello son los informes.

Add a New League :Modelo de análisis


Add a New League:Modelo de análisis


Éxito


Success

Error


Error

Estructura de la solución


Jerarquía lógica

Jerarquía física

Solicitud de método HTTP GET


Solicitud de método HTTP POST


Métodos HTTP GET y POST� El método HTTP GET se utiliza cuando:

� El procesamiento de la solicitud es idempotente.� Esto significa que la solicitud no tiene efectos secundarios en el servidor.

La cantidad de datos del formulario es pequeña.


� La cantidad de datos del formulario es pequeña.� Se desea asignar un marcador a la solicitud.

� El método HTTP POST se utiliza cuando:� El procesamiento de la solicitud modifica el estado del servidor, como al almacenar datos en una base de datos.

� La cantidad de datos del formulario es grande.� El contenido de los datos no debe aparecer en la URL (por ejemplo, contraseñas).

Desarrollo de servlets controladores

1. Recuperar parámetros del formulario de la solicitud HTTP.

2. Efectuar las conversiones de datos de los parámetros del formulario.


2. Efectuar las conversiones de datos de los parámetros del formulario.

3. Verificar los parámetros del formulario.4. Ejecutar la lógica de negocio.5. Distribuir a los siguientes componentes visuales según los resultados de los pasos anteriores.

Controlador AddLeague


Ej: Ligas v.2

Distribución (dispatch) desde el controlador a una vista


Ámbito de solicitud (Request)


Ej: Ligas v.2

Ej: Ligas v.2.1

Uso de un distribuidor de solicitudes


Ciclo de vida de un servlet

Desarrollo de formularios dinámicos

1º Carga de clases de servlet


Una instancia por definición de servlet


2º: Método de ciclo de vida init()


3º: Método de ciclo de vida service()


Método de ciclo de vida destroy()


Uso de parámetros de inicialización


Ej: Ligas v.2.1

Modelo de arquitectura de Add League (fase 1)


Ej: Ligas v.2.1

La API de ServletConfig


Configuración de parámetros de inicialización


Manejo de errores en un formulario web


Capturas de pantalla de manejo de errores


Ej: Ligas v.3

Ej: Ligas v.3.1

Modelo de arquitectura de Add League (fase 2)


Ej: Ligas v.3.1

Estructura de la aplicación


Estructura física

Cómo volver a rellenar formularios web


Ejemplo de uso del contexto

Compartición de recursos mediante el contexto de servlet

Contexto de servlet� Un objeto ServletContext es la representación de tiempo de ejecución de la aplicación web


Modelo de arquitectura de la liga de fútbol


Ej: Ligas v.4

Desarrollo de un receptor de eventos de contexto de servlet


Ej: Ligas v.4.1


Modificaciones:web.xml, estructura

Caso de uso: registro en una liga

Diseño de la capa de negocio

Diagrama de colaboración


Diagrama de secuencia


Diagrama de despliegue


Ej: Ligas v.5

Entidades de dominio


Diseño de componentes de servicio

� Las operaciones CRUD relativas a entidades no las puede realizar el componente de entidad en sí


componente de entidad en sí

Servicio de fachada


Menor acoplamiento

Patrón MVC hasta ahora

Desarrollo de aplicaciones web mediante Struts

MVC en Framework Struts


Un solo servletUn solo servlet

Ej: Ligas v.6

Patrón Frontal Controller

� Todas las peticiones *.do pasan por el Action Servlet Struts


Estructura MVC de Struts� Servlet de controlador de infraestructura

� Struts suministra la clase ActionServlet. � Este servlet (y otras clases de soporte) leen el archivo de configuración de Struts para configurar las asignaciones entre los patrones URL y las clases de acción (controlador).


los patrones URL y las clases de acción (controlador).

� Clases básicas� La estructura Struts tiene numerosas clases. Al construir una aplicación, puede concentrarse en ampliar sólo algunas de ellas. En concreto, se hereda de la clase Action para crear componentes controladores.

� Archivos de configuración� Struts proporciona la definición de tipo de documento (DTD) del archivo struts-config.xml.

Procesamiento de solicitudes de Struts


API de clases Action de Struts


Configuración del controlador de infraestructura



Archivos JAR de Struts

Sesiones de contenedor web

� HTTP es un protocolo sin sesión� El contenedor se encarga de la gestión

Desarrollo de aplicaciones web mediante gestión de sesión

Caso de uso: Registrarse en una liga


Ej: Ligas v.7

Pantallas, formularios, servlets, actions, forwards…


API de sesión


Interfaz HttpSession


Timeout

Deprecated methods

Timeout

Creación / Cierre

Timeout de sesión

� Configurado en web.xml


� Manejado por API

API de Cookie


Gestión de sesión mediante cookies


En primera conexión

Nombre estandarizado

En resto de conexiones…

Uso de reescritura de URL para gestión de sesión


Procesado de peticiones

Uso de filtros en aplicaciones web

Aplicación de filtros a solicitudes entrantes


Ej: Ligas v.8

Cadenas de filtros


Uso modular de filtros


Aplicación de filtros a solicitudes en dispatch


API de filtro


Configuración en web.xml


Precedencia en la aplicación

Objetos de dominio y tablas

Integración de aplicaciones web con bases de datos

tablas

Patrón de objeto de acceso a datos (DAO)


Oculta la gestión del SQL las clases de Servicio

Ventajas del patrón DAO� La lógica de negocio y la lógica de acceso a datos están separadas.

� Los objetos de acceso a datos fomentan la reutilización y la flexibilidad al cambiar el sistema.

Se pueden crear nuevos servicios de negocio que reutilicen


� Se pueden crear nuevos servicios de negocio que reutilicen la lógica de acceso a datos en las clases DAO.

� Los desarrolladores que escriben otros servlets pueden reutilizar el mismo código de acceso a datos.

� Permite realizar cambios en tecnologías de cliente (frontend).

� Permite cambiar los componentes de la capa de web sin alterar la lógica de acceso a datos existente.

� Permite realizar cambios en tecnologías de BDD.

Uso de una fuente de datos y la API JNDI



� Los diseñadores web diseñan sin saber Java

� Programadores escriben código sin

Desarrollo de páginas JSP

� Programadores escriben código sin preocuparse por el diseño web

Cómo se procesa una página de JSP


Desarrollo e implementación de páginas de JSP


Jerarquía lógicaJerarquía de implementación

Elementos de secuencia de comandos de JSP


Las secuencias de comandos están desaconsejadas

Elementos en las páginas JSP


Formas sintácticas de las etiquetas JSP


Directivas JSP� Las directivas son mensajes al contenedor de JSP

� Ejemplos:ElementoElemento DescripciónDescripción

Forma general: <%@ directive { attr=”value” }* %>


ElementoElemento DescripciónDescripción

<%@ page ... %><%@ page ... %>

Permite importar clases Java, especificar el Permite importar clases Java, especificar el

tipo de la respuesta (“text/html” por omisión), tipo de la respuesta (“text/html” por omisión),

etcéteraetcétera

<%@ include ... %><%@ include ... %>Permite incluir otros ficheros antes de que la Permite incluir otros ficheros antes de que la

página sea traducida a un servletpágina sea traducida a un servlet

<%@ taglib ... %><%@ taglib ... %>

Declara una biblioteca de etiquetas con Declara una biblioteca de etiquetas con

accionesacciones personalizadas para ser utilizadas en personalizadas para ser utilizadas en

la páginala página

Directiva page


Directiva import

� Inserta el texto de otro recurso en tiempo de compilación


Ejemplo: directiva include


Elementos de “scripting”

ElementoElemento DescripciónDescripción

<% ... %><% ... %> ScriptletScriptlet. se usa para meter código Java dentro. se usa para meter código Java dentro

ExpresiónExpresión. Permite acceder al valor devuelto por . Permite acceder al valor devuelto por


<%= ... %><%= ... %>ExpresiónExpresión. Permite acceder al valor devuelto por . Permite acceder al valor devuelto por

una expresión en Java e imprimirlo en OUTuna expresión en Java e imprimirlo en OUT

<%! ... %><%! ... %>DeclaraciónDeclaración. Usada para declarar variables y . Usada para declarar variables y

métodos en la clase correspondiente a la páginamétodos en la clase correspondiente a la página

<%<%---- … … ----%>%>

ComentarioComentario. Comentario ignorado cuando se . Comentario ignorado cuando se

traduce la página JSP en un servlet.traduce la página JSP en un servlet.

(comentario en el HTML <!(comentario en el HTML <!---- commentcomment��))

Ejemplo: expresión, saludo.jsp

<%=


expresión

Nota: Si se necesita usar los caracteres "%>" dentro de un scriptlet, hay que usar "%\>" y “<\%”

Ejemplo: scriptlet, saludo.jsp

<%


Ejemplo: declaración, saludo.jsp

<%!


JSP: Objetos predefinidos

� El código java incrustado en JSP tiene acceso a los mismos objetos predefinidos que tenían los servlets


predefinidos que tenían los servlets� Aquí se llaman como sigue:

�� requestrequest

�� responseresponse

�� pageContextpageContext

�� sessionsession

�� applicationapplication

�� outout

�� configconfig

Se puede acceder a

ellos directamente

desde los “scriptlets”

Acciones JSP

� Etiquetas XML que tienen procesamiento asociado


<jsp:useBean


<jsp:useBean id=“”


Ambitos JSP


Directiva taglib� Declara que la página usa una librería de tags (acciones)

<%@ taglib uri=”http://www.mycorp/supertags” prefix=”super” %>...

Alias definido en web.xml


Syntax

<%@ taglib ( uri=”tagLibraryURI” | tagdir=”tagDir” ) prefix=”tagPrefix” %>

� Identifica la librería por su URI� Le asocia un prefijo para usar en el código de la JSP

...<super:doMagic>...</super:doMagic>

Alias definido en web.xml

Ejemplo de uso de JSTL y EL

Bibliotecas de etiquetas personalizadas

Ej: Ligas v.9

Roles de trabajo de Java EE en aplicaciones Web

� Diseñadores de web� Desarrolladores de componentes web� Desarrolladores de componentes de

Desarrollo de páginas JSP con etiquetas personalizadas

� Desarrolladores de componentes de negocio

� Las etiquetas personalizadas permiten desarrollar por completo una página de JSP sin utilizar código Java

JSP con bibliotecas de etiquetaspersonalizadas


Ej: Ligas v.9

Con etiquetasCon scriplet

Qué es una biblioteca de etiquetas personalizadas


Etiquetas JSTL


Acciones básicas


Acciones básicas++


Procesamiento de XML


Acciones de formato


Acceso a base de datos relacional


Funciones


Componentes de aplicación de Struts

Desarrollo de aplicaciones web mediante formularios de acción de Struts

Repaso de los elementos de modelo


Ej: Ligas v.9

Repaso de los elementos de vista


Jsp, actions, forwards…


Desarrollo de una clase ActionForm


Un objeto representa al formulario

Biblioteca de etiquetas html deStruts


Diseños de página complejos

Creación de componentes de presentación reutilizables

Maquetación con tablas


@copyright

Organización de segmentos de presentación


Inclusión de segmentos en páginas de JSP

� La directiva include


� La acción estándar jsp:include

Uso de la acción estándar jsp:param


Segmento banner.jsp


Desarrollo de diseños con Struts Tiles


layoutPage.jsp

Rediseño con Tiles


index.jsp

thakyou.jsp

Ligas v.xResumen de versiones� V.0: contenido estático� V.1: lista de ligas dinámica� V.2: añadir ligas, formulario estático� V.2.1: form con servlet, lista estaciones en servelt-param� V.3: gestión de errores de formulario, doPost y doGet� V.3: gestión de errores de formulario, doPost y doGet� V.3.1: no se pierden datos en formulario erróneo� V.4: cargar ligas de contexto de aplicación� V.4.1: cargar datos de fichero� V.5: capa de servicio� V.6: añade Struts� V.7: gestión de la sesión� V.8: filtro� V.9: vista con jsp, tags jsp y formularios Struts

Sesion 4. Desarrollo de Componentes Web con Servlets y...

Documents

Transcript of Sesion 4. Desarrollo de Componentes Web con Servlets y...