TUT: Aprender SPRING MVC sobre GAE Paso a Paso en 7 dias(Dia 1)

Contenido

• Acerca de MVC 
• Introducción a Spring MVC. 
• Google App Engine(GAE) 
• Pre-Requisitos 
• Lab 01: Creando una simple Aplicacion ASP.NET MVC “Hola Mundo” 
• Lab 02: Pasando datos entre el controlador y la vista 
• Lab 03: Creando un simple modelo usando MVC 
• Lab 04: Creando un simple formulario de entrada de datos MVC 
• Lab 05: Usando Razor para crear vistas rápidamente 
• ¿Y que hay para el segundo Día?

Queriendo demostrar que el concepto MVC es igual entre ASP.NET MVC y SPRING MVC es que realizare Aprender MVC con las dos tecnologias( para ls amantes de microsoft y para los amantes del software libre).
Pueden revisar Aprender ASP .NET MVC Paso a Paso en 7 dias(Dia 1)

Acerca de MVC
Para entender mejor el funcionamiento de Spring MVC voy a dar una pequeña explicación sobre el patrón de diseño Modelo-Vista-Controlador.
MVC(Modelo Vista Controlador) es un patrón o modelo de abstracción de desarrollo de software que separa los datos de una aplicación, la interfaz de usuario , y la lógica de negocios en tres componentes distintos. El principio fundamental del patrón MVC es definir una arquitectura con claras responsabilidades para diferenciar componentes. En MVC hay tres participante.

Modelo. Un modelo representa los datos o reglas de negocio así como el estado de la aplicación.
Vista. esta presenta los datos al usuario en un formulario específico
Controlador. El controlador maneja las solicitudes de las acciones realizadas por el usuario en la vista, actualiza el modelo y dirige a los usuarios la vista apropiada basándose en los resultados de la ejecución.

Introducción a Spring MVC
Spring MVC es uno de los módulos del framework Spring, y este provee un exhaustivo soporte para el patrón MVC.asíi como también provee soporte de otras características, una de ellas es facilitar la implementación de la capa de presentación

El Framework Spring Web Model-View-Controller(MVC) es diseñado alrededor de un DispatcherServlet que envía solicitudes a los manejadores(handlers) con mapeo de manejadores configurables, resolución de vistas, así como soporte para carga de archivos.
El manejador por defecto esta basado en las anotaciones @Controller y @RequestMapping, ofreciendo un amplia gama de metodos de manipulacion flexible. Con la introducción de Spring 3.0, el mecanismo @Controller también permite crear Sitios y aplicaciones web REST a través de la anotacion @PathVariable y otras características.
La resolución de vistas de Spring es extremadamente flexible. La implementación de un controlador puede incluso escribir directamente a la secuencia de respuesta. Típicamente una instancia ModelAndView consiste de un nombre de vista y un modelo Map.
En Spring MVC el DispatcherServlet es un Servlet que recibe las peticiones HTTP y las envía al controlador apropiado. En una aplicación SpringMVC puede ver varios DispatcherServlet para cumplir con varios propósitos(por ejemplo manejar las solicitudes de las interfaces de usuarios, solicitudes de webservices, etc) y cada DispatcherServlet tiene su propia configuración(Web ApplicationContext), el cual define las características del Servlet tales como los controladores que el servlet soporta.


Google App Engine(GAE)
Google App Engine permite ejecutar las aplicaciones web en la infraestructura de Google. el GAE admite aplicaciones escritas en varios lenguajes de programación, puedes crear tu aplicación a través de tecnologías de Java estándar, que incluyen JVM, servlets Java, el lenguaje de programación Java y el Framework SPRING. Al descargarse el SDK del GAE viene con un servidor local que permite la prueba de las aplicaciones en forma local, para posteriormente publicarlo en la nube de Google.

Pre-Requisitos

• Java 7 JDK 
• Eclipse version Kepler 
• SDK de GAE 1.8.4 pluying para eclipse 
• Framework Spring 3.0 

Lab 01: Creando una simple Aplicación “Hola Mundo” con SPRING MVC y GAE
En este laboratorio crearemos un simple programa hola mundo, utilizando Spring MVC. Crearemos un simple controlador, y lo conectamos a una simple vista index.jsp para ver la página en el browser.

Paso 01: Crear el Proyecto
En el Entorno de Desarrollo de Eclipse, vamos a crear un proyecto GAE

En la siguiente ventana le vamos a asignar el nombre MyFirstHelloWorld y vamos a asignarle el mismo nombre de paquete, marcamos la opción usar Google App Engine.

Una vez hecho en finalizar, ya tenemos hecho la estructura de carpetas que más adelante lo modificaremos para poder adaptarlo al entorno MVC.

Paso 02: Configurando el Proyecto con SPRING MVC
Primero modificaremos el archivo web.xml, que es el archivo de arranque para poder incluir el DispatcherServlet.

Descripción del web.xml ;

• Registramos el DispatcherServlet como un Servlet llamado dispatcher que lo creamos más abajo 
• Mapeamos este Servlet para manejar las solicitudes entrantes que comienzan /myfirsthelloworld/* 

Ahora crearemos el DispatcherServlet que es responsable de cargar un SpringApplicationContext, el cual es usado para realizar el enlazado y la inyección de dependencias. Este archivo dispatcher-servlet.xml lo crearemos dentro la carpeta WEB-INF.

Descripción del archivo dispatcher-servlet.

• La declaración<context:component-scan> le dice a spring que escanee el código para encontrar beans inyectables bajo el paquete y todos sus subpaquetes especificados, de modo que cualquier código anotado con @Controller es automáticamente descubierto. 
• La declaración <mvc:annotation-driven/> habilita el soporte de anotaciones para Spring MVC por ejemplo la anotación @Controller, así también son manejadas cosas como conversión, formateo y validación. 

Y en el tag bean podemos asignar la ruta donde estarán las vistas /view/ (WAR/VIEW/) y la extensión de nuestras vistas.

Copiamos las librerias(dll) del framework Spring dentro la carpeta WAR/WEB-INF/LIB( esto lo realizamos por el explorador de windows). y para que se actualice en nuestro proyecto cerramos y abrimos nuevamente el proyecto( click derecho close project y open Project).

Ahora vamos a referenciar las librerías Spring al path de compilación( click derecho sobre el proyecto)

Agregar las librerías de Spring en el boton Add JAR y listo habremos terminado de configurar SPRING en el proyecto.

Paso 03: Agregar un controladorAhora vamos a agregar una clase controlador como se muestra en la siguiente figura:

En la siguiente ventana asignamos un paquete controller y el nombre Default1Controller para el controlador.

Incluimos el siguiente código a nuestro controlador

Ahora vamos a describir ciertos aspectos de esta clase:

• La clase utiliza la anotación @Controller, indicando que este es un controlador de Spring capaz de manejar solicitudes web, esta clase será automáticamente detectada con el contenedor de Spring. 
• En la Clase Default y el método Index se utilizó la anotación @RequestMapping para especificar que este método debe manejar las solicitudes web con el path /default1 y /default1/index respectivamente. 
• El metodo retorna un ModelAndView indicando la vista que se debe manejar(index.jsp) en la respuesta en este caso es una página jsp( configurado en el dispatcher-servlet.xlm) 

Paso 04: Agregar una vista
Ahora que tenemos el controlador necesitamos agregar la vista. en la carpeta creada WAR/VIEW agregamos una página index.jsp y otra include.jsp.

El archivo include definimos los taglib que utilizaremos en todos nuestras vistas
En el archivo include.jsp agregamos lo siguiente:

y en la vista index.jsp

Paso 05: Ejecutar la Aplicación
Si haces Ctrl + F11 podrás ejecutar el proyecto. y digitar en el navegador lo siguiente:

Lab 02: Pasando datos entre el controlador y la vista
El controlador recibe la primera carga del modelo, la mayoría de veces nos gustaría pasar del modelo a la vista para la visualización.

La gracia de usar un controlador consiste en el parámetro ModelMap. En ese parámetro, que en el fondo es como un HashMap, podemos meter objetos java identificados por una clave y que estarán accesibles desde la página jsp. De esta forma, podemos visualizar unos datos u otros en la página jsp.

Paso 01: Crear proyecto y definir la vista de datos.
Primero vamos a crear un controlador y en el controlador vamos a definir un ModelMap, como mostramos en el siguiente código:

Paso 02: Mostrando el ModelMap en la vista.
Lo siguiente es mostrar data en la vista pero usando tag prefijos de java. Para mostrar la vista necesitamos usar el tag <c: en la página JSP.

Paso 03: Ejecutamos la aplicación
Presionamos Ctrl+F11 y modificamos la URL en el Browse.

Lab 03: Creando un simple modelo usando MVC
En este laboratorio crearemos un simple modelo personalizado, esto con algunos datos y mostrarlo en la vista.

Paso 01: Creamos un simple archivo de clase
El primer paso es crear un simple modelo personalizado el cual esta en blanco con tres propiedades: code, name, y amount. crear un clase dentro del paquete myfirsthelloworld.model y asignarle el nombre Curstomer.

Paso 02: Definimos un controlador con acción
El primer paso es crear un controlador y agregar una simple acción que muestre el Customer.
Importar el namespaces del modelo en la clase controlador, creamos un objeto de la clase Customer con algunos datos y lo pasamos a la vista llamado “DisplayCustomer”.

Paso 03: Creamos una vista fuertemente tipada usando la clase.
Necesitamos ahora unir los puntos de MVC, mediante la creación de vistas. dentro de la carpeta WAR/VIEW, creamos la vista DisplayCustomer.jsp y escribimos lo siguiente:

Como podemos ver el objeto ModelMap llamado customer lo recibimos desde el controlador CustomerController.

Paso 04: Ejecuta la aplicación
Ahora para ejecutar la aplicación presiona Ctrl+F11.

Lab 04: Creando un simple formulario de entrada de datos MVC
Cada proyecto pequeño o grande necesita un formulario de entrada de datos. En este laboratorio crearemos una simple entrada de datos para nuestro cliente como se muestra:

Tan pronto como el usuario final ingrese los detalles y envíe los datos estos serán direccionados a la siguiente ventana como muestra abajo:

Paso 01: Creando la Página de entrada de datos
El primer paso para crear una entrada de datos es usar las etiquetas form de HTML como se muestra en el código de abajo. Lo mas importante a notar es que la accion del boton es apuntada al método del controlador llamado “displaycustomer”( verificar las mayuscular o minusculas es case sensitive).

Como ya sabemos toda pagina esta relacionada a una acción del controlador en el controlador Customer vamos a crear el método FillCustomer.

Paso 02: Creando el controladorArriba definimos la acción del formulario hacia el controlador a la función displaycustomer
Necesitamos obtener los datos de los controles HTML(form), llena el objeto y enviar el objeto a la vista.
En el controlador DisplayCustomer, se ha cambiado el method a POST(enviado desde el formulario), llena el objeto objcustomer con los datos pasados como parametro y envía los objetos a la vista displaycustomer.

Paso 03: Creando la vista para mostrar el objeto customer
El siguiente paso es crear la vista DisplayCustomer( realizada en los pasos anteriores). En tag lib de java no existe el if-else asi que uso el choose(el igual que el case), en el case asignar el nombre test(si no da error).

Paso 04: Finalmente ejecutar el proyecto
Presionando las teclas CTRL + F11 ejecutamos el proyecto.

Y al hacer clic en el botón enviar muestra la vista DisplayCustomer.

Lab 05: Usando los TagLib para crear vistas rápidamente
En nuestros laboratorios anteriores creamos un simple formulario de entrada de datos para customer completamos el laboratorio de forma satisfactoria pero hubieron dos problemas:

• Los Código HTML fueron escritos manualmente. En pocas palabras esto fue poco productivo, esto es como escribir codigo HTML usando el notepad. 
• 
  
• Agregado a esto, mucho del código manual fue también escrito en el controlador para llenar los objetos y enviarlo a la vista. 

En este laboratorio veremos como usar TagLib de java para minimizar el código manual e incrementar la productividad.

Paso 01: Creando la clase Customer
Para crear la clase Customer ir al laboratorio 03.

Paso 02: Creando la entrada de formulario HTML usando TagLib form
El TagLib Form tienen funciones el cual te permite crear controles HTML con facilidad enviar a la vista.

En el archivo include.jsp vamos agregar la sgte instrucción:



Paso 03: Creando una vista con tablib Form y fuertemente enlazada al modeloPara crear el formulario con tablib form es necesario que se haya referenciado en el archivo include.jsp. y tambien modificar el metodo del controlador customerController para enlazarlo al modelo customer que genera el formulario:

Después de esto ya podemos crear nuestro formulario en la vista fillcustomer.jsp.

.

Paso 04: Creando el controlador
La parte final es el codigo del controlador(Customer), el codigo del controlador ahora es mas simple.

y al final ejecutar y mostrará los datos

Eureka, ahora vamos por mas cheliñas para celebrar el cumplimiento de nuestro primer dia con SPRING MVC.

¿Y que hay para el segundo Día?


Para el segundo día hablaremos acerca de Routing URL, fácil manera del testeo unitario MVC, atributos del controlador y mucho mas.Los siguientes laboratorio van a ser más avanzados a comparado con el primer dia. asi que realiza todos los laboratorios para que estes listo para el segundo dia.





Suerte.