Vous êtes sur la page 1sur 19

Curso: "Java EE Avanzado" 2018

“Servlet MVC: Separación de Capas”

Módulo 1 / parte 4

© Todos los logos y marcas utilizados en este


documento, están registrados y pertenecen a
sus respectivos dueños.

MATERIAL ADQUIRIDO POR EDUARDO KLAGGES SAZO | Servlet MVC Workshop 1


Curso: "Java EE Avanzado" 2018

Objetivo
El objetivo de esta práctica es implementar la separación de capas usando el patrón de Arquitectura
MVC (Modelo, Vista y Controlador) en Servlets utilizando NetBeans IDE.

| Servlet MVC Workshop 2


Curso: "Java EE Avanzado" 2018

Antes de empezar, cómo funciona rápidamente un MVC

Separar las distintas capas con sus roles bien definidos, implementando el patrón de arquitectura de
software MVC (Modelo, Vista y Controlador) es fundamental para el desarrollo de aplicaciones
escalables, flexibles y de fácil mantención. Donde el Modelo es la representación específica de los datos
con la cual el sistema opera (generalmente bases de datos, pero pueden ser otras fuentes de datos
como Web Services etc), la Vista presenta los datos en un formato adecuado para interactuar,
usualmente cumpliendo con la "interfaz de usuario" y finalmente el Controlador que responde a
eventos, generalmente peticiones de los usuarios (presionando un link, ejecutando un formulario, etc), e
interactúa a su vez con el Modelo y la Vista (para pedirle información o para representar la información,
respectivamente).

El patrón MVC podría considerarse una "especialización" de una típica "arquitectura de 3 capas" pero
con una lógica de funcionamiento más ajustada a entornos web, donde se intenta -por lo general–
concentrar todas las peticiones del exterior a través de un solo punto de entrada (clásicos sistemas
"modulares")

En este nuevo diseño tendremos que todas las


peticiones del usuario se dirigirán hacia un Controller
("Controlador") que se encargará de decidir si solicita
información de la "lógica de negocio" al Model
("Modelo") y/o pasa a la View ("Vista") para que se
encargue de generar la interfaz de usuario.

Nota: se recomienda la lectura de la explicación


escrita en Wikipedia

Aquí se puede visualizar un diagrama que muestra la


relación con sus componentes (más adelante entraremos en detalles, por ahora solo veremos lo básico
y esencial para entender el funcionamiento del patrón).

Aclaración importante: los patrones de diseño son "la mejor solución encontrada para resolver un
problema genérico y recurrente", pero, la solución es una "guía" y no un "manual" para resolver un

| Servlet MVC Workshop 3


Curso: "Java EE Avanzado" 2018
problema específico, ya que cada contexto tendrá sus particularidades. Servlet "implementa su versión"
del patrón de diseño, por lo tanto no significará nunca que lo que veamos de Servlet es sinónimo puro
de MVC, en realidad veremos que existen muchos frameworks que implementan su propia versión del
patrón, y todas estarán correctas.

Un patrón de diseño es solo eso, una guía.

Ejercicio 1: Copiar y modificar la aplicación del workshop anterior hola-mundo-servlet:


1. Iniciamos NetBeans IDE.
2. Copiamos el proyecto con un nuevo nombre (Lo clonamos )
• Seleccionamos el proyecto hola-mundo-servlet.
• Clic Derecho->Seleccionamos Copy (ver Figura de abajo)
• En el campo Proyect Name ingresamos hola-mundo-servlet-mvc
• Clic en Copy

• Desplegamos el nuevo proyecto para modificar el Servlet SaludarServlet:


hola-mundo-servlet-mvc -> Source Packages - >saludar
• Abrir con doble clic la clase SaludarServlet.

| Servlet MVC Workshop 4


Curso: "Java EE Avanzado" 2018
• Remplazamos el contenido del método processRequest por el siguiente, tal como se muestra en
el código de abajo:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)


throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

// Get a session
HttpSession session = request.getSession();

/* Asignamos valores a la vista jsp, mediante el contexto Request*/


request.setAttribute("saludo", "Hola, mi nombre es Zsamer. ¿Cuál es tu nombre?");
request.setAttribute("titulo", "Servlet SaludarServlet");

/* El Servlet selecciona la vista saludar.jsp y


reenvia los atributos dentro de la misma petición HTTP
*/
getServletContext().getRequestDispatcher("/saludar.jsp").forward(request, response);

• Guardamos los cambios (Ctrl + S).


• Ahora creamos la vista saludar.jsp:
o Clic derecho en Web Pages -> New -> Other
o Escoger Web bajo Categorías (Categories) y seleccionar JSP bajo File Types.
o Clic en Next.

o En File Name ingresamos saludar, para dar el nombre al archivo jsp.

| Servlet MVC Workshop 5


Curso: "Java EE Avanzado" 2018
o Clic en Finish.
o Ver figura de abajo.

• Modificamos en contenido que viene por defecto según el código de abajo:

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%
String saludo = (String) request.getAttribute("saludo");
String titulo = (String) request.getAttribute("titulo");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><%=titulo%></title>
</head>
<body>
<h2><%=saludo%></h2>
<form action="ResponderServlet" method="post">
<input type="text" name="nombre" size="25">
<p>&nbsp;</p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
• Ahora modificamos el segundo servlet ResponderServlet

| Servlet MVC Workshop 6


Curso: "Java EE Avanzado" 2018
o Desplegamos el proyecto hola-mundo-servlet-mvc para modificar el Servlet
SaludarServlet: hola-mundo-servlet-mvc -> Source Packages - >saludar
o Abrir con doble clic la clase ResponderServlet.
o Remplazamos el contenido del método processRequest por el siguiente, tal
como se muestra en el código de abajo:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)


throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

// obtenemos el parámetro de la petición


String nombre = request.getParameter("nombre");

/* Asignamos la variable nombre a la vista jsp, mediante el contexto Request*/


request.setAttribute("nombre", nombre);

// Cierra el HttpSession
request.getSession().invalidate();

/* El Servlet selecciona la vista respuesta.jsp y


reenvia los atributos dentro de la misma petición HTTP
*/
getServletContext().getRequestDispatcher("/respuesta.jsp").forward(request, response);

o Guardamos los cambios (Ctrl + S).


o Ahora creamos la vista respuesta.jsp:
o Clic derecho en Web Pages -> New -> Other
o Escoger Web bajo Categorías (Categories) y seleccionar JSP bajo File Types.
o Clic en Next.

| Servlet MVC Workshop 7


Curso: "Java EE Avanzado" 2018

o En File Name ingresamos respuesta, para dar el nombre al archivo jsp.


o Clic en Finish.
o Ver figura de abajo.

| Servlet MVC Workshop 8


Curso: "Java EE Avanzado" 2018
• Modificamos en contenido que viene por defecto según el código de abajo:

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<%
String nombre = (String) request.getAttribute("nombre");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Respuesta</title>
</head>
<body>
<%if ((nombre != null) && (nombre.length() > 0)) {%>
<h2>Hola, <%=nombre%>!</h2>
<% } %>
</body>
</html>

• Clic-Derecho en el proyecto hola-mundo-servlet-mvc y seleccionar Run.


• Se abre el Navegador con la ruta base y cambiamos la url a: http://localhost:8080/hola-
mundo-servlet-mvc/SaludarServlet - > Enter.
• Tipée su nombre en el campo (input form) y Clicel botón Submit

| Servlet MVC Workshop 9


Curso: "Java EE Avanzado" 2018
Ejercicio 2: Abrir, construir y ejecutar aplicación de ejemplo catalogo-servlet-mvc:
1. Iniciar NetBeans IDE
2. Abrir el proyecto catalogo-servlet-mvc:
• Descargar proyecto catalogo-servlet-mvc.rar de la semana.
o Windows: Descomprimir el archivo catalogo-servlet-mvc.rar bajo el
directorio “C:\curso\javaee\servlet”, antes tener creado el directorio.
o Solaris/Linux: Descomprimir el archivo catalogo-servlet-mvc.rar bajo el
directorio “$HOM/curso/javaee/servlet”, antes tener creado el directorio .
• Seleccionar File->Open Project (Ctrl+Shift+O). La ventana de diálogo Open Project
aparece.
o Buscar proyecto descomprimido en el paso anterior en
“\curso\javaee\servlet”
• Seleccionaro catalogo-servlet-mvc
• Clic en Open Project. El Nuevo Proyecto es agregado bajo la pestaña Projects

| Servlet MVC Workshop 10


Curso: "Java EE Avanzado" 2018
3. Construir y ejecutar el proyecto catalogo-servlet-mvc:
o Clic-derecho en proyecto catalogo-servlet-mvc y seleccionar Run.
o El navegador se abre, mostrando un listado de productos.

| Servlet MVC Workshop 11


Curso: "Java EE Avanzado" 2018
4. Navegar la aplicación, clic en el producto con ID 1:

| Servlet MVC Workshop 12


Curso: "Java EE Avanzado" 2018
5. Luego muestra el detalle del producto con ID 1, recibiendo el id como parámetro en la URL,
petición del tipo GET: …/detalle?id=1 y en el servlet capturamos el valor mediante el objeto
request (HttpServletRequest): request.getParameter("id");

| Servlet MVC Workshop 13


Curso: "Java EE Avanzado" 2018

En el siguiente paso, vamos a analizar y estudiar el código detrás del


ejemplo.

1. Doble clic Producto.java desplegando catalogo-servlet-mvc ->Source Packages->models para


abrir en el editor de Netbeans:

package models;

/**
*
* @author Andrés Guzmán F
*/
public class Producto {
private int id;
private String nombre;
private int precio;

public Producto(int id, String nombre, int precio) {


this.id = id;
this.nombre = nombre;
this.precio = precio;
}

public Producto() {
}

public int getId() {


return id;
}

public void setId(int id) {


this.id = id;
}

public String getNombre() {


return nombre;
}

public void setNombre(String nombre) {


this.nombre = nombre;
}

public int getPrecio() {


return precio;
}

public void setPrecio(int precio) {


this.precio = precio;
}
}

| Servlet MVC Workshop 14


Curso: "Java EE Avanzado" 2018
2. Vemos una simple clase Java, que representa una entidad dentro del sistema, un concepto del
contexto, es parte del modelo ya que contiene un estado, datos, normalmente representará a
un registro de una tabla en una base de datos.
3. Ahora hacemos un doble clic CatalogoDbDb.java desplegando catalogo-servlet-mvc ->Source
Packages->models para abrir en el editor de Netbeans:
4. Vemos una clase java que emula una base de datos, creando un listado (registros) y agregamos
objetos del tipo Producto con sus datos respectivos, este tipo de clase se le conoce por nombre
de DAO o Data Access Object, es decir un objeto de acceso a datos quien se encarga de las
operaciones con los datos, normalmente de la base de datos, consultas SQL u de otro tipo. En
este caso tiene dos métodos: obtenerTodos() y buscarProductoPorId(int id):

package models;

import java.util.ArrayList;
import java.util.List;

/**
*
* @author Andrés Guzmán F
*/
public class CatalogoDb {

private List<Producto> productos = new ArrayList<Producto>();

public CatalogoDb() {
productos.add(new Producto(1, "Panasonic Pantalla LCD", 259990));
productos.add(new Producto(2, "Sony Cámara digital DSC-W320B", 123490));
productos.add(new Producto(3, "Apple iPod shuffle ", 69990 ));
productos.add(new Producto(4, "Sony Notebook Z110 ", 1499990 ));
productos.add(new Producto(5, "Hewlett Packard Multifuncional F2280", 37990));
productos.add(new Producto(6, "Bianchi Bicicleta Aro 26", 69990));
productos.add(new Producto(7, "Mica Cómoda 5 Cajones", 69990));
productos.add(new Producto(8, "Movistar Celular Nokia X6 ", 299990));
}

public List<Producto> obtenerTodos() {


return productos;
}

public Producto buscarProductoPorId(int id){


Producto resultado = null;

for(Producto producto : productos){

if(producto.getId() == id){
resultado = producto;
break;
}
}
return resultado;
}
}

| Servlet MVC Workshop 15


Curso: "Java EE Avanzado" 2018
5. Ahora veamos la clase encargada de inicializar el modelo dentro del Contexto del Servlets, doble
clic CatalogoEventListener.java desplegando catalogo-servlet-mvc ->Source Packages-
>controllers para abrir en el editor de Netbeans.
6. Implementa la interfaz ServletContextListener para poder Iniciar la construcción de los objetos
del modelo en el inicio del ciclo de vida del sistema (Contexto del sistema) implementando el
método contextInitialized, donde creamos los objetos y los guardamos como atributos de la
aplicación usando el objeto servletContext, más adelante en los servlets podemos obtener este
objeto (servletContext) y acceder a sus atributos, de esta manera podemos obtener el objeto
catalogoDb:

package controllers;

import javax.servlet.ServletContext;

import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import models.CatalogoDb;
/**
* Web application lifecycle listener.
* @author Andrés Guzmán F
*/
public class CatalogoEventListener implements ServletContextListener {

ServletContext servletContext;

public void contextInitialized(ServletContextEvent sce) {

servletContext = sce.getServletContext();
servletContext.setAttribute("catalogoDb", new CatalogoDb());

public void contextDestroyed(ServletContextEvent sce) {


servletContext.removeAttribute("catalogoDb");
}

7. Veamos ahora el controlador de listado, doble clic en ListadoServletController.java bajo


catalogo-servlet-mvc ->Source Packages->controllers para abrir en el editor de Netbeans.
8. En el método init que se encarga de iniciar el servlet, es como el constructor, recibimos el objeto
config por argumento y mediante éste obtenemos el servletContext y con esto podemos
obtener objeto catalogoDb mediante el método getAttribute.
9. Luego en el método processRequest, utilizamos el objeto de modelo (catalogoDb) para obtener
el listado y se lo pasamos a la vista, muy limpio.

| Servlet MVC Workshop 16


Curso: "Java EE Avanzado" 2018
/* …… Etc ……*/

public class ListadoServletController extends HttpServlet {

private CatalogoDb modelo;

@Override
public void init(ServletConfig config) throws ServletException {
super.init(config);
modelo = (CatalogoDb) config.getServletContext().getAttribute("catalogoDb");
}

/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

/* Asignamos la variable nombre a la vista jsp, mediante el contexto Request*/


request.setAttribute("productos", modelo.obtenerTodos());
request.setAttribute("titulo", "Listado de Productos");

/* El Servlet selecciona la vista respuesta.jsp y


reenvia los atributos dentro de la misma petición HTTP
*/
getServletContext().getRequestDispatcher("/listado.jsp").forward(request, response);

/* …… Etc ……*/

| Servlet MVC Workshop 17


Curso: "Java EE Avanzado" 2018
Ahora como tarea analizar:

1. El código del servlet DetalleServletController.java


2. Las respectivas archivos de vistas jsp ubicadas bajo catalogo-servlet-mvc ->Web Pages->
(index.jsp y listado.jsp)
3. Analizar la estructura del archivo de despliegue o configuración de arranque web.xml, ubicado
bajo catalogo-servlet-mvc ->Configuration Files-> web.xml y hacer clic en la pestaña XML del
editor:
o Fijarse en el servlet-mapping->url-pattern, donde se mapea una URL a las clases
Servlets.

| Servlet MVC Workshop 18


Curso: "Java EE Avanzado" 2018

Envía tus consultas a los foros!


Aquí es cuando debes sacarte todas las dudas
haciendo consultas en los foros
correspondientes

MATERIAL ADQUIRIDO POR EDUARDO KLAGGES SAZO | Servlet MVC Workshop 19

Vous aimerez peut-être aussi