Está en la página 1de 0

Curso: "Java EE y Frameworks" 2013

Servlet MVC: Separacin de Capas


Mdulo 1 / parte 4

Todos los logos y marcas utilizados en este
documento, estn registrados y pertenecen a
sus respectivos dueos.
AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 1

Curso: "Java EE y Frameworks" 2013

Objetivo
El objetivo de esta prctica es implementar la separacin de capas usando el patrn de Arquitectura
MVC (Modelo, Vista y Controlador) en Servlets utilizando NetBeans IDE.

AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 2

Curso: "Java EE y Frameworks" 2013

Antes de empezar, cmo funciona rpidamente un MVC

Separar las distintas capas con sus roles bien definidos, implementando el patrn de arquitectura de
software MVC (Modelo, Vista y Controlador) es fundamental para el desarrollo de aplicaciones
escalables, flexibles y de fcil mantencin. Donde el Modelo es la representacin especfica 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
interacta a su vez con el Modelo y la Vista (para pedirle informacin o para representar la informacin,
respectivamente).
El patrn MVC podra considerarse una "especializacin" de una tpica "arquitectura de 3 capas" pero
con una lgica de funcionamiento ms ajustada a entornos web, donde se intenta -por lo general
concentrar todas las peticiones del exterior a travs de un solo punto de entrada (clsicos sistemas
"modulares")
En este nuevo diseo tendremos que todas las
peticiones del usuario se dirigirn hacia un Controller
("Controlador") que se encargar de decidir si solicita
informacin de la "lgica 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 explicacin
escrita en Wikipedia
Aqu se puede visualizar un diagrama que muestra la
relacin con sus componentes (ms adelante entraremos en detalles, por ahora solo veremos lo bsico
y esencial para entender el funcionamiento del patrn).
Aclaracin importante: los patrones de diseo son "la mejor solucin encontrada para resolver un
problema genrico y recurrente", pero, la solucin es una "gua" y no un "manual" para resolver un
AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 3

Curso: "Java EE y Frameworks" 2013

problema especfico, ya que cada contexto tendr sus particularidades. Servlet "implementa su versin"
del patrn de diseo, por lo tanto no significar nunca que lo que veamos de Servlet es sinnimo puro
de MVC, en realidad veremos que existen muchos frameworks que implementan su propia versin del
patrn, y todas estarn correctas.
Un patrn de diseo es solo eso, una gua.
Ejercicio 1: Copiar y modificar la aplicacin 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.
AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 4

Curso: "Java EE y Frameworks" 2013

Remplazamos el contenido del mtodo processRequest por el siguiente, tal como se muestra en
el cdigo 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. Cul es tu nombre?");
request.setAttribute("titulo", "Servlet SaludarServlet");

/* El Servlet selecciona la vista saludar.jsp y
reenvia los atributos dentro de la misma peticin 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 Categoras (Categories) y seleccionar JSP bajo File Types.
o Clic en Next.


o En File Name ingresamos saludar, para dar el nombre al archivo jsp.
AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 5

Curso: "Java EE y Frameworks" 2013

o Clic en Finish.
o Ver figura de abajo.

Modificamos en contenido que viene por defecto segn el cdigo 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
AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 6

Curso: "Java EE y Frameworks" 2013

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 mtodo processRequest por el siguiente, tal
como se muestra en el cdigo de abajo:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

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

// obtenemos el parmetro de la peticin
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 peticin 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 Categoras (Categories) y seleccionar JSP bajo File Types.
o Clic en Next.

AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 7

Curso: "Java EE y Frameworks" 2013


o En File Name ingresamos respuesta, para dar el nombre al archivo jsp.
o Clic en Finish.
o Ver figura de abajo.




AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 8

Curso: "Java EE y Frameworks" 2013

Modificamos en contenido que viene por defecto segn el cdigo 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.
Tipe su nombre en el campo (input form) y Clicel botn Submit

AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 9

Curso: "Java EE y Frameworks" 2013

Ejercicio 2: Abrir, construir y ejecutar aplicacin 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 dilogo 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 pestaa Projects



AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 10

Curso: "Java EE y Frameworks" 2013

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.


AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 11

Curso: "Java EE y Frameworks" 2013

4. Navegar la aplicacin, clic en el producto con ID 1:











AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 12

Curso: "Java EE y Frameworks" 2013

5. Luego muestra el detalle del producto con ID 1, recibiendo el id como parmetro en la URL,
peticin del tipo GET: /detalle?id=1 y en el servlet capturamos el valor mediante el objeto
request (HttpServletRequest): request.getParameter("id");




AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 13

Curso: "Java EE y Frameworks" 2013

En el siguiente paso, vamos a analizar y estudiar el cdigo detrs del
ejemplo.

1. Doble clic Producto.java desplegando catalogo-servlet-mvc ->Source Packages->models para
abrir en el editor de Netbeans:
package models;

/**
*
* @author Andrs Guzmn 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;
}
}

AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 14

Curso: "Java EE y Frameworks" 2013

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 mtodos: obtenerTodos() y buscarProductoPorId(int id):
package models;

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

/**
*
* @author Andrs Guzmn 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 Cmara 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 Cmoda 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;
}
}

AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 15

Curso: "Java EE y Frameworks" 2013

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 construccin de los objetos
del modelo en el inicio del ciclo de vida del sistema (Contexto del sistema) implementando el
mtodo contextInitialized, donde creamos los objetos y los guardamos como atributos de la
aplicacin usando el objeto servletContext, ms 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 Andrs Guzmn 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 mtodo 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 mtodo getAttribute.
9. Luego en el mtodo processRequest, utilizamos el objeto de modelo (catalogoDb) para obtener
el listado y se lo pasamos a la vista, muy limpio.

AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 16

Curso: "Java EE y Frameworks" 2013

/* 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 peticin HTTP
*/
getServletContext().getRequestDispatcher("/listado.jsp").forward(request, response);

}

/* Etc */


AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 17

Curso: "Java EE y Frameworks" 2013

Ahora como tarea analizar:

1. El cdigo 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 configuracin de arranque web.xml, ubicado
bajo catalogo-servlet-mvc ->Configuration Files-> web.xml y hacer clic en la pestaa XML del
editor:
o Fijarse en el servlet-mapping->url-pattern, donde se mapea una URL a las clases
Servlets.





AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 18

Curso: "Java EE y Frameworks" 2013


Enva tus consultas a los foros!
Aqu es cuando debes sacarte todas las dudas
haciendo consultas en los foros
correspondientes
AUTORES: andresguzf@gmail.com WEB: http://formacion-java.bolsadeideas.cl | | Servlet MVC Workshop 19

También podría gustarte