Spring Modelo Vista Controlador

 

Modelo Vista Controlador Spring

Que es el Modelo Vista Controlador conocidos por sus siglas MVC en ingles Model View Controller, es patrón de diseño orientado a objetos para la construcción de aplicaciones web, otros conceptos indican que modelo vista controlador es un patrón de arquitectura de software que separa una aplicación web en 3 partes, unos de los objetivos del modelo vista controlador es buscar facilitar la tarea del desarrollo y el mantenimiento de la misma.

El patrón de diseño modelo vista controlador es un forma de desarrollar aplicaciones web que puede ser implementado en distintos lenguajes de programación y se puede trabajar con distintos frameworks, en este caso vamos a utilizar el lenguaje de programación Java utilizando Spring Framework

Historia del Modelo Vista Controlador

El Modelo Vista Controlador es una arquitectura de software o patrón de diseño desarrollado hace muchísimos años y vale la pena mencionar que el patrón de diseño model view controller fue promovido en los años 70 por Trygve Reenskaug pensando en el desarrollo de aplicaciones de escritorio durante una visita en Xerox Park, ya seria para los años 80 que se implemento una versión en Smalltalk por Jim Althoff y otros desarrolladores

Funcionamiento del patrón MVC

El funcionamiento del modelo vista controlador es relativamente sencillo de entender, vamos a explicarlo de manera sencilla, digamos que todo comienza en la vista.

Un usuario esta frente a una computadora y requiere realizar una compra por internet abre un navegar y ingresa en un portal web el usuario observa un formulario que podríamos decir que es la vista rellena el formulario y presiona enviar, en el momento de envió se realizo una request o petición al servidor solicitando un recurso o una página, esta solicitud va dirigida al servidor, específicamente a un servlet o controlador, toda vez la solitud del recurso llega al controlador este va a comunicarse con el modelo el cual va a realizar alguna operación generalmente en una base de datos aunque podría ser en un archivo de texto, un objeto java, pero generalmente es una base de datos. Una vez el modelo tiene la información la devuelve al controlador que a su vez procesa la información enviando los datos y construyendo la información que se envía a la vista que es la respuesta de los datos solicitados que termina viendo el usuario. Esta es la explicación de un esquema básico de modelo vista controlador

Explicar el MVC utilizando el framework Spring con un ejemplo

Para este ejemplo vamos a usar el lenguaje de programación Java y Spring Framework.

Para llevar a cabo un ejemplo donde podamos ver un ejemplo práctico del modelo vista controlador en spring tenemos que tener instalado el siguiente software.

1-    Entorno de desarrollo Eclipse o el de su preferencia.

2-    Instalar openjdk.

3-    Instalar un servidor de aplicaciones por ejemplo apache tomcat, wildfly entre otros.

4-    Por otra parte debemos descargar las spring jar files.

Supongamos que tenemos instalado el entorno de desarrollo eclipse, un servidor web como apache tomcat instalado, que hemos instalado java y tenemos todo preparado simplemente para crear el proyecto importar las librerías y empezar a trabajar, las librerías están ubicadas en la carpeta lib, que son las Spring jar files+2 librerias.

Acá están ubicadas las librerías son aproximadamente unos 70 archivos jar.

Unas vez copiamos esas 70 librerías necesitamos crear 2 archivos de configuración xml.

Las librerías deben estar en esta carpeta lib que esta dentro del recuadro rojo. El proceso para ingresar estas librerías en el proyecto y poder ejecutar un proyecto en spring modelo vista controlador es el siguiente:

1-Ingresar en google y buscar la palabra clave spring jar files

2-Pinchar en el primer enlace descargar la ultima versión 

3-Pinchar en el primer vinculo extension dist.zip

4-Descargar y descomprimir el archivo

5-Crear el directorio lib en la carpeta WEB-INF

6-Copiar todas las librerías en el directorio lib

7-En la raiz del proyecto ir a propiedades-->java build path-->librarie-->classpath-->addjars-->seleccionar todas las librerias-->apply and close

incluir también estas 2 librerias: javax.servlet.jsp.jstl-api-1.2.1.jar y javax.servlet.jsp.jstl-1.2.1.jar y copiarlas también en la carpeta lib del proyecto.

Una vez tenemos lista las todas las librerías importadas estamos casi listos para empezar con nuestro ejemplo de spring modelo vista controlador.

todavía nos falta en el directorio WEB-INF crear el directorio vistas o views, para llevar a cabo nuestro ejemplo de modelo vista controlador spring que es la carpeta donde se almacenan las vistas.

otro paso que tenemos que llevar a cabo es crear 2 archivos de configuración xml, la estructura del proyecto vendría quedando de la siguiente manera

una vez tenemos el ambiente de nuestra maquina configurado podemos empezar a desarrollar nuestro ejemplo de un modelo vista controlador utilizando el framework spring

Esquema Modelo Vista Controlador (MVC)

Pretendemos describir, explicar cada uno de los componentes del modelo vista controlador usando spring framework.

Visión general del patrón de diseño MVC.

Vamos a empezar esta explicación sobre el modelo vista controlador de una forma bastante entendible para cualquier persona

1-Vista o View es la vista que observa el usuario cuando abre su navegador y visita una pagina web, en otras palabras podemos decir que las vistas son la interfaz de usuario para poder interactuar con el modelo, las vistas generalmente son archivos html o jsp que están alojados en el servidor de aplicaciones glassfish, tomcat, wildfly, etc. en el caso de tomcat estarían alojados en la estructura de archivos en la siguiente ruta:

Observamos un ejemplo de una vista, de donde esta ubicada dentro de un proyecto modelo vista controlador usando spring u algun otro framework, un ejemplo de un archivo jsp dentro de un proyecto mvc spring puede ser la siguiente

La salida de este archivo modelo vista controlador en un navegado es el mensaje que estamos observando

2-El controlador o controller, dentro del patrón de diseño modelo vista controlador spring o mvc spring el controller viene siendo una especie de intermediario entre la vista y el modelo, el usuario interactua con la vista, si un usuario envia datos al modelo o consulta lo hace atravez del controlador, el controlador es un archivo java.

Si nos enfocamos mas en mvc spring, en la estructura de un proyecto modelo vista controlador spring el controlador estaría ubicado aca

dentro de un paquete que a su vez estaría en otra carpeta por ejemplo recursos java irían los archivos compilados .java, la interacción que tiene el cliente con la vista o el archivo jsp pasa directamente al controlador archivo java que se encargara de ejecutar un método y devolver una vista

3-El modelo o model, se puede decir que dentro de una estructura modelo vista controlador usando spring. Podemos decir que el modelo se conoce como model data binding es decir, el modelo es un objeto que sirve de puente entre el controlador y las vistas, es decir para que la información fluya del controlador a las vistas y viceversa. 

Una vez hemos finalizado la explicación del funcionamiento del patrón de diseño modelo vista controlador en spring framework. Lo que estamos es saliendo de la teoría y poco a poco entrando en la practica.

Construyendo el ejemplo practico del utilizando el modelo vista controlador con spring framework

Vamos a suponer que unos alumnos se van a registrar en una universidad y que una vez completen el formulario de registro el servidor va a devolver una respuesta por ejemplo Alumno Franklin Guzmán se ha registrado satisfactoriamente.

Para realizar este ejemplo Spring MVC vamos a necesitar:

1-Una vista que servirá de formulario de registro.

2-Otra vista que confirme que el usuario se ha registrado con éxito.

3-Crear una clase Alumno ya que vamos a registrar alumnos, necesitamos una clase que construya objetos de ese tipo, una clase sencilla solo nombre y apellido.

4-Crear el controlador que es como una especie de archivo central que se va a encargar de mostrarnos el formulario de registro, mostrar la vista de alumno confirmado de agarrar datos de la clase alumno, dentro del controlador creamos el objeto de data binding es decir el modelo que se va a encargar de pasar los datos de la vista al controlador y viceversa.

Programando el spring MVC

1-Programar una clase alumno, como dijimos si vamos a registrar alumnos necesitamos una clase que construya esos objetos de tipo Alumno, una clase sencilla solamente en el registro el formulario solicitara nombre y apellido.

Dentro del proyecto, la clase Alumno esta ubicada dentro del recuadro rojo, es una clase publica que contiene 2 variables privadas tipo String, que para acceder a nombre y apellidos tenemos 2 métodos públicos setters y getters que nos permitirán modificar y obtener el valor de las variables, es decir para establecer por ejemplo que el objeto se alumno se llamara Franklin Guzmán y para obtener el valor de esa variable nombre y apellido que en este caso le dimos el nombre Franklin Guzmán.

2-Dentro del patrón de diseño Modelo Vista Controlador usando spring, nos toca crear el Controlador o Controller.

El controller o controlador dentro de lo que seria un esquema patrón mvc en spring, es un archivo .java que podemos decir que es una especie de archivo central. que se encarga entre otras cosas de ejecutar los métodos que muestran las vistas, de igual forma dentro del controlador se crea el objeto databinding es decir el modelo que sirve para hacer fluir los datos desde el controlador a las vistas

2.1-Creando el controlador, el controlador o controller es una archivo .java, dentro del proyecto ejemplo que estamos creando que esta en el marco del patrón de diseño modelo vista controlador la ubicación donde debemos crear este archivo es la siguiente.

Ahora vamos a explicar en detalle el código que va dentro del controlador.

Pero antes de explicar el código vamos a hacer énfasis decir que para crear el controlador los pasos son:

1-crear el archivo

2-crear la clase 

3-indicarle a la creada que es un controlador

4-indicar por que ruta vamos a acceder a los métodos de la clase.

Claramente se observa la anotación @Controller que se encarga de indicar dentro del proyecto que esa clase es un controlador y @RequestMapping indica la ruta o url por la cual se va a acceder a los métodos que vamos a crear dentro de la clase.

Ahora vamos a crear un primer método que se va a encargar de mostrar el formulario de registro, donde se van a registrar los alumnos, el método muestra formulario recibe un parámetro y devuelve un objeto String ese valor de retorno es el nombre del archivo o el nombre de la vista que contiene el formulario de registro, entonces cuando ese método es ejecutado y devuelve esa vista de registro se desplega el formulario en el navegador del cliente, cuando el usuario introduce los datos que le solicitan que serán el nombre y el apellido, van a ser enviados a la vista de confirmación atravez de alguno de los métodos del controlador muestra formulario, debe crearse un objeto de tipo alumno, es decir los datos que introduzca el usuario en el formulario se van a guardar en ese objeto que acabamos de crear, luego que se ha guardado la información en el objeto elAlumno esa información debe pasar al modelo estando la información en el modelo es que va a poderser transmitir a la vista de confirmación.

¿Como guardamos la información en el modelo?

Vamos a recapitular, toda la información referente al spring mvc, una vez tenemos la clase java compilada con las variables privadas declaradas con sus respectivos métodos getters y setters para establecer y obtener el valor de las variables que al fin y al cabo serán los datos que estarán en los campos de texto del formulario una vez que presionamos el botón enviar en el formulario, los datos se guardarían en una variable en el método muestra formulario del controlador, recordamos que el método muestra formulario recibe un parámetro tipo Model, Model es una interfaz que en su interior tiene 2 métodos sobre cargados addAtribute, el que nos sirve a nosotros recibe 2 parámetros el objeto que contiene la información y el identificativo. En este punto la información ya se encuentra almacenada en el modelo.

Creando el formulario de registro.

Antes de crear el formulario de registro debemos tener en cuenta algunos aspectos, antes de empezar con los aspectos vale destacar que dentro de la arquitectura modelo vista controlador el componente que vamos a desarrollar a continuación va relacionado con la vista, una vista que va a interactuar con el cliente atravez del navegador web a la hora de crear el formulario de registro debemos tener muy en cuenta el nombre, el nombre del formulario de registro debe coincidir el valor de retorno del método muestra formulario con el nombre que le vamos a dar al formulario.

Una vez creado el archivo vamos a ver una vista como esta en la cual agregamos la libreria que se dentro del recuadro rojo la misma se obtiene desde este link https://www.javatpoint.com/spring-mvc-form-tag-library agregar la mencionada librería nos sirve para poder usar la Form MVC Tag, que son unas etiquetas reutilizables que construyen bloques html componentes de formulario que sirven de puente databinding para enviar y recibir información de objetos de java es decir beans desde código HTML.

Después de agregar la librería el siguiente paso es empezar a usar la Form MVC Tags , entramos en la etiqueta body 

donde <form:form es una form mvc tag, vale destacar una Form Model View Controller Tags son etiquetas reutilizables para construir bloques html mas específicamente componentes de formulario que sirven como puente data binding para enviar y recibir informacion de objetos java beans desde codigo html

 action="procesarFormulario" nombre del archivo que va a procesar los datos 

modelAttribute="elAlumno"> especifica el nombre del identificador donde spring guarda los datos que están en el modelo.

Volvemos al controlador.

Creamos este método procesarFormulario el método procesar formulario recibe 2 parámetros la anotación@ ModelAttribute(“elAlumno”) y un objeto

El primer parámetro contiene el valor que está guardado dentro del modelo y el siguiente parámetro que es un objeto recibe el valor del modelo y lo almacena en la variable una vez almacenado ahí está listo para usarse y se usara en el archivo