Sesión 4

Desarrollo de Componentes
Web con Servlets y JSP
Contenidos
Tecnologías de aplicaciones web
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
Tecnologías de aplicaciones web
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
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.
Tecnologías de aplicaciones web
Ejecución de programas CGI
Tecnologías de aplicaciones web
Ejecución de programas CGI
Tecnologías de aplicaciones web
Ejecución de servlets Java
Tecnologías de aplicaciones web
Java Servlets
Tecnologías de aplicaciones web
Tecnología JavaServer Pages
Comparación entre servlets y componentes JSP
JSP: Proceso de compilación
Comparación entre servlets y componentes JSP
Ejemplo: de JSP a Servlet
(Tomcat)
Tecnologías de aplicaciones web
Arquitectura web: capas
Tecnologías de aplicaciones web
Arquitectura web: MVC
Tecnologías de aplicaciones web
Arquitectura del modelo 2
Tecnologías de aplicaciones web
Ejemplo de arquitectura Java
EE
Contenidos
Desarrollo de componentes visuales
Tipos de componentes
visuales
Presentación de datos
Formularios de datos
Los formularios de entrada de datos también se consideran
componentes visuales.
Ayudas de navegación
Incluye todos los datos presentados en una pantalla visible.
Existen numerosas formas de presentación, como gráficos,
hojas de cálculo, listados, etc.
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.
Desarrollo de componentes visuales
Caso de ejemplo de liga de
fútbol
Desarrollo de componentes visuales
Modelo de análisis de un caso
de uso
Desarrollo de componentes visuales
Páginas de List Leagues
Inicial
Lista de ligas
Ej: Ligas v.0
Desarrollo de componentes visuales
Protocolo de
transferencia de
hipertexto
(HTTP)
Desarrollo de componentes visuales
Solicitud HTTP: método GET
Desarrollo de componentes visuales
Respuesta HTTP
Desarrollo de componentes visuales
Arquitectura de contenedor
web
Desarrollo de componentes visuales
Proceso de solicitud y
respuesta
1. El navegador se conecta al contenedor
web
2. El contenedor web crea dos objetos
con los flujos de entrada/salida
3. El contenedor web ejecuta el servlet
4. El servlet utiliza el flujo de salida para
generar la respuesta
Desarrollo de componentes visuales
1º: El navegador se conecta al
contenedor web
Desarrollo de componentes visuales
2º: Contenedor web crea dos
objetos con flujos entrada/salida
Desarrollo de componentes visuales
3º: El contenedor web ejecuta
el servlet
Desarrollo de componentes visuales
4º: El servlet utiliza el flujo de
salida para generar la respuesta
Desarrollo de componentes visuales
Diagrama de secuencia de una
solicitud HTTP GET
Utilización de las API de petición y respuesta
Utilización de las API de
petición y respuesta
WebContainer
ContentType[W]
Attributes[R/W/D]
Writer[W]
Parameters[R]
OutputStream[W]
Session[R/W/D]
Cookies[W]
Cookies [R]
Redirect[W]
HttpServeltRequest
HttpServletResponse
service()
service
()
Desarrollo de componentes visuales
Desarrollo de un servlet de
HTTP simple
Ej: Ligas v.1
Desarrollo de componentes visuales
La API de HttpServlet
Desarrollo de componentes visuales
Estructura física de la
aplicación: fichero WAR
Estructura lógica
Desarrollo de componentes visuales
Configuración de la aplicación:
web.xml
Desarrollo de componentes visuales
Configuración de la aplicación:
web.xml
Contenidos
Desarrollo de componentes controladores
Tipos de componentes
controladores
Procesan la entrada del usuario
Permiten navegar por la pantalla
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.
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.
Desarrollo de componentes controladores
Add a New League :
Modelo de análisis
Desarrollo de componentes controladores
Add a New League:
Modelo de análisis
Desarrollo de componentes controladores
Éxito
Success
Desarrollo de componentes controladores
Error
Error
Desarrollo de componentes controladores
Estructura de la solución
Jerarquía física
Jerarquía lógica
Desarrollo de componentes controladores
Solicitud de método HTTP GET
Desarrollo de componentes controladores
Solicitud de método HTTP
POST
Desarrollo de componentes controladores
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.
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 componentes controladores
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.
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.
Desarrollo de componentes controladores
Controlador AddLeague
Ej: Ligas v.2
Desarrollo de componentes controladores
Distribución (dispatch) desde
el controlador a una vista
Desarrollo de componentes controladores
Ámbito de solicitud (Request)
Ej: Ligas v.2
Ej: Ligas v.2.1
Desarrollo de componentes controladores
Uso de un distribuidor de
solicitudes
Contenidos
Desarrollo de formularios dinámicos
Ciclo de vida de un servlet
Desarrollo de formularios dinámicos
1º Carga de clases de servlet
Desarrollo de formularios dinámicos
Una instancia por definición de
servlet
Desarrollo de formularios dinámicos
2º: Método de ciclo de vida
init()
Desarrollo de formularios dinámicos
3º: Método de ciclo de vida
service()
Desarrollo de formularios dinámicos
Método de ciclo de vida
destroy()
Desarrollo de formularios dinámicos
Uso de parámetros de
inicialización
Ej: Ligas v.2.1
Desarrollo de formularios dinámicos
Modelo de arquitectura de Add
League (fase 1)
Ej: Ligas v.2.1
Desarrollo de formularios dinámicos
La API de ServletConfig
Desarrollo de formularios dinámicos
Configuración de parámetros
de inicialización
Desarrollo de formularios dinámicos
Manejo de errores en un
formulario web
Desarrollo de formularios dinámicos
Capturas de pantalla de
manejo de errores
Ej: Ligas v.3
Ej: Ligas v.3.1
Desarrollo de formularios dinámicos
Modelo de arquitectura de Add
League (fase 2)
Ej: Ligas v.3.1
Desarrollo de formularios dinámicos
Estructura de la aplicación
Estructura física
Desarrollo de formularios dinámicos
Cómo volver a rellenar
formularios web
Contenidos
Compartición de recursos mediante el contexto de servlet
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
Compartición de recursos mediante el contexto de servlet
Modelo de arquitectura de la
liga de fútbol
Ej: Ligas v.4
Compartición de recursos mediante el contexto de servlet
Desarrollo de un receptor de
eventos de contexto de servlet
Ej: Ligas v.4.1
Compartición de recursos mediante el contexto de servlet
Modificaciones:
web.xml,
estructura
Diseño de la capa de negocio
Caso de uso:
registro en una liga
Diseño de la capa de negocio
Diagrama de colaboración
Diseño de la capa de negocio
Diagrama de secuencia
Diseño de la capa de negocio
Diagrama de despliegue
Ej: Ligas v.5
Diseño de la capa de negocio
Entidades de dominio
Diseño de la capa de negocio
Diseño de componentes de
servicio
Las operaciones CRUD relativas a
entidades no las puede realizar el
componente de entidad en sí
Diseño de la capa de negocio
Servicio de fachada
Menor acoplamiento
Contenidos
Desarrollo de aplicaciones web mediante Struts
Patrón MVC hasta ahora
Desarrollo de aplicaciones web mediante Struts
MVC en Framework Struts
Un solo servlet
Ej: Ligas v.6
Desarrollo de aplicaciones web mediante Struts
Patrón Frontal Controller
Todas las peticiones *.do pasan por el
Action Servlet Struts
Desarrollo de aplicaciones web mediante Struts
Estructura MVC de Struts
Servlet de controlador de infraestructura
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).
Clases básicas
Struts suministra la clase ActionServlet.
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.
Desarrollo de aplicaciones web mediante Struts
Procesamiento de solicitudes
de Struts
Desarrollo de aplicaciones web mediante Struts
API de clases Action de Struts
Desarrollo de aplicaciones web mediante Struts
Configuración del controlador
de infraestructura
Desarrollo de aplicaciones web mediante Struts
Archivos JAR
de Struts
Contenidos
Desarrollo de aplicaciones web mediante gestión de sesión
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
Desarrollo de aplicaciones web mediante gestión de sesión
Pantallas, formularios,
servlets, actions, forwards…
Desarrollo de aplicaciones web mediante gestión de sesión
API de sesión
Desarrollo de aplicaciones web mediante gestión de sesión
Interfaz HttpSession
Timeout
Deprecated methods
Creación / Cierre
Desarrollo de aplicaciones web mediante gestión de sesión
Timeout de sesión
Configurado en web.xml
Manejado por API
Desarrollo de aplicaciones web mediante gestión de sesión
API de Cookie
Desarrollo de aplicaciones web mediante gestión de sesión
Gestión de sesión mediante
cookies Nombre estandarizado
En primera conexión
En resto de conexiones…
Desarrollo de aplicaciones web mediante gestión de sesión
Uso de reescritura de URL
para gestión de sesión
Contenidos
Uso de filtros en aplicaciones web
Procesado de peticiones
Uso de filtros en aplicaciones web
Aplicación de filtros a
solicitudes entrantes
Ej: Ligas v.8
Uso de filtros en aplicaciones web
Cadenas de filtros
Uso de filtros en aplicaciones web
Uso modular de filtros
Uso de filtros en aplicaciones web
Aplicación de filtros a
solicitudes en dispatch
Uso de filtros en aplicaciones web
API de filtro
Uso de filtros en aplicaciones web
Configuración
en web.xml
Precedencia en la aplicación
Contenidos
Integración de aplicaciones web con bases de datos
Objetos de
dominio y
tablas
Integración de aplicaciones web con bases de datos
Patrón de objeto de acceso a
datos (DAO)
Oculta la gestión
del SQL las
clases de
Servicio
Integración de aplicaciones web con bases de datos
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
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.
Integración de aplicaciones web con bases de datos
Uso de una fuente de datos y
la API JNDI
Contenidos
Desarrollo de páginas JSP
Tecnología JavaServer Pages
Los diseñadores web diseñan sin saber
Java
Programadores escriben código sin
preocuparse por el diseño web
Desarrollo de páginas JSP
Tecnología JavaServer Pages
Desarrollo de páginas JSP
Cómo se procesa una página
de JSP
Desarrollo de páginas JSP
Cómo se procesa una página
de JSP
Desarrollo de páginas JSP
Desarrollo e implementación
de páginas de JSP
Jerarquía de implementación
Jerarquía lógica
Desarrollo de páginas JSP
Elementos de secuencia de
comandos de JSP
Las secuencias de comandos están desaconsejadas
Desarrollo de páginas JSP
Elementos en las páginas JSP
Desarrollo de páginas JSP
Formas sintácticas de las
etiquetas JSP
Desarrollo de páginas JSP
Forma general: <%@ directive { attr=”value” }* %>
Directivas JSP
Las directivas son mensajes al contenedor
de JSP
Ejemplos:
Elemento
Descripción
<%@ page ... %>
Permite importar clases Java, especificar el
tipo de la respuesta (“text/html” por omisión),
etcétera
<%@ include ... %>
Permite incluir otros ficheros antes de que la
página sea traducida a un servlet
<%@ taglib ... %>
Declara una biblioteca de etiquetas con
acciones personalizadas para ser utilizadas en
la página
Desarrollo de páginas JSP
Directiva page
Desarrollo de páginas JSP
Directiva import
Inserta el texto de otro recurso en
tiempo de compilación
Desarrollo de páginas JSP
Ejemplo: directiva include
Desarrollo de páginas JSP
Elementos de “scripting”
Elemento
Descripción
<% ... %>
Scriptlet.. se usa para meter código Java dentro
Scriptlet
<%= ... %>
Expresión. Permite acceder al valor devuelto por
Expresión.
una expresión en Java e imprimirlo en OUT
<%! ... %>
Declaración. Usada para declarar variables y
Declaración.
métodos en la clase correspondiente a la página
Comentario. Comentario ignorado cuando se
Comentario.
<%
<%--- … ---%>
%> traduce la página JSP en un servlet.
(comentario en el HTML <!-<!-- comment )
Desarrollo de páginas JSP
Ejemplo: expresión, saludo.jsp
<%=
expresión
Nota: Si se necesita usar los
caracteres "%>" dentro de un
scriptlet, hay que usar "%\>" y
“<\%”
Desarrollo de páginas JSP
Ejemplo: scriptlet, saludo.jsp
<%
Desarrollo de páginas JSP
Ejemplo: declaración,
saludo.jsp
<%!
Desarrollo de páginas JSP
JSP: Objetos predefinidos
El código java incrustado en JSP tiene
acceso a los mismos objetos
predefinidos que tenían los servlets
Aquí se llaman como sigue:
request
response
pageContext
session
application
out
config
Se puede acceder a
ellos directamente
desde los “scriptlets”
Desarrollo de páginas JSP
Acciones JSP
Etiquetas XML que tienen
procesamiento asociado
Desarrollo de páginas JSP
<jsp:useBean
Desarrollo de páginas JSP
<jsp:useBean id=“”
Desarrollo de páginas JSP
Ambitos JSP
Desarrollo de páginas 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
<super:doMagic>
...
</super:doMagic>
Identifica la librería por su URI
Syntax
Le asocia un prefijo para usar en el
código de la JSP
<%@ taglib ( uri=”tagLibraryURI” | tagdir=”tagDir” ) prefix=”tagPrefix” %>
Bibliotecas de etiquetas personalizadas
Ejemplo de uso de JSTL y EL
Ej: Ligas v.9
Contenidos
Desarrollo de páginas JSP con etiquetas personalizadas
Roles de trabajo de Java EE
en aplicaciones Web
Diseñadores de web
Desarrolladores de componentes web
Desarrolladores de componentes de
negocio
Las etiquetas personalizadas permiten
desarrollar por completo una página de
JSP sin utilizar código Java
Desarrollo de páginas JSP con etiquetas personalizadas
JSP con bibliotecas de etiquetas
personalizadas
Ej: Ligas v.9
Con scriplet
Con etiquetas
Desarrollo de páginas JSP con etiquetas personalizadas
Qué es una biblioteca de
etiquetas personalizadas
Desarrollo de páginas JSP con etiquetas personalizadas
Etiquetas JSTL
Desarrollo de páginas JSP con etiquetas personalizadas
Acciones básicas
Desarrollo de páginas JSP con etiquetas personalizadas
Acciones básicas++
Desarrollo de páginas JSP con etiquetas personalizadas
Procesamiento de XML
Desarrollo de páginas JSP con etiquetas personalizadas
Acciones de formato
Desarrollo de páginas JSP con etiquetas personalizadas
Acciones de formato
Desarrollo de páginas JSP con etiquetas personalizadas
Acceso a base de datos
relacional
Desarrollo de páginas JSP con etiquetas personalizadas
Funciones
Desarrollo de páginas JSP con etiquetas personalizadas
Funciones
Contenidos
Desarrollo de aplicaciones web mediante formularios de acción de Struts
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
Desarrollo de aplicaciones web mediante formularios de acción de Struts
Repaso de los elementos de
vista
Desarrollo de aplicaciones web mediante formularios de acción de Struts
Jsp, actions, forwards…
Desarrollo de aplicaciones web mediante formularios de acción de Struts
Desarrollo de una clase
ActionForm
Un objeto representa
al formulario
Desarrollo de aplicaciones web mediante formularios de acción de Struts
Biblioteca de etiquetas html de
Struts
Contenidos
Creación de componentes de presentación reutilizables
Diseños de página complejos
Creación de componentes de presentación reutilizables
Maquetación con tablas
@copyright
Creación de componentes de presentación reutilizables
Organización de segmentos de
presentación
Creación de componentes de presentación reutilizables
Inclusión de segmentos en
páginas de JSP
La directiva include
La acción estándar jsp:include
Creación de componentes de presentación reutilizables
Uso de la acción estándar
jsp:param
Creación de componentes de presentación reutilizables
Segmento banner.jsp
Creación de componentes de presentación reutilizables
Desarrollo de diseños con
Struts Tiles
layoutPage.jsp
Creación de componentes de presentación reutilizables
Rediseño con Tiles
index.jsp
thakyou.jsp
Ligas v.x
Resumen 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.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