SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing.

Gómez Avila José

Spring MVC
Continuación del Ejemplo anterior
Agregamos los campos restantes a la tabla de la vista utilizando los atributos de la clase
“Pelicula”.

Ahora agregamos las librerías de bootstrap copiando las rutas CDN

Además de agregar el estilo que aparece como ejemplos en la página:

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ahora vamos a agregar nuestras propias librerías personalizadas. Esto se denomina asignar
recursos estáticos.
En previo a ello modificamos el “HomeController”

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Agregamos las carpetas:

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ahora registramos la carpeta “resources” en el dispatcher:

Agregamos una imagen a la carpeta images creada:

Agregamos el tag de “spring”:

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ejecutamos la aplicación. Cabe señalar que si la imagen es grande agregar la propiedad

width con algún tamaño para se observer correctamente.
Ahora se requiere dar formato de fechas para ello agregamos el taglib “fmt”:

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ejecutamos para observar los resultados de brindar formato a las fechas.

Ahora para un manejo de condicionales para el manejo del estado de la película realizamos
lo siguiente:

Ejecutamos para observar los resultados:

Elaborado por: José Alberto Gómez Avila
SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ahora referenciamos a bootstrap utilizando recursos descargados. Copiamos el recurso

bootstrap que debe aparecer en “resources”. Realizamos los siguientes cambios.

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

La librería de Popper se utilizará en animaciones.

Ejecutar el proyecto para observar resultados.
Ahora procedemos a desarrollar separar código para reutilizar código para header y footer.
Por ejemplo, creamos menú y será el encabezado, pero será ubicado dentro de la carpeta
“includes” que se encuentra dentro de “views”.

De similar manera realizamos para colocar un archivo “footer.jsp” con el diseño de pie de
página y agregar un container para el cuerpo del diseño.

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ahora realizamos la referencia en el “home.jsp”

Ejecutamos la aplicación para observar resultados.

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José
Vamos a crear url dinámicas y utilizando Spring. Para ello agregamos parámetro PathVariable
en la función “mostrarDetalle” del archivo “HomerController”, que permitirá el envío de
información. Además de agregar el enlace a través de un botón desde home.jsp.

Se hace el envío del id por la URL. Ejecutamos para observar los resultados.
Elaborado por: José Alberto Gómez Avila
SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ahora si queremos enviar un valor fecha por defecto y que se vea en detalle podemos realizar
lo siguiente. Esta forma también es válida para cualquier otro tipo, claro está adecuando
según lo necesario.

En la vista “home” debemos darnos cuenta que debemos agregar el Atributo

“FechaBusqueda” y en la vista “detalle” una impresión del dato que se envía.

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ahora procedemos a ejecutar EL PROYECTO y observaremos el valor de la fecha actual

enviada a otra página JSP.
Otra forma enviar datos usando el METODO GET:

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ahora “HomeController” debe modificar:

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ahora procedemos a ejecutar el PROYECTO NUEVAMENTE y observamos resultados que

deben ser los mismos.
Deseamos enviar fechas dinámicas para ello debemos crear una implementación que liste
fechas. Creamos la utilería para reutilizar la función de listar fechas.

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Enviamos la lista de fechas desde el controller (HomeController) hacia la vista “home.jsp”

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ejecutamos para observar el combo con la lista de fechas.

Ahora vamos a utilizar el método POST para la acción de filtrado:

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ejecutamos la aplicación para observar resultados.

Ahora veamos si un controlador utilizaría la forma de GetMapping. Para ello creamos el
controlador “NoticiasController”:

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

La vista “formNoticia.jsp” sería:

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ahora disponemos de un editor para edición de contenido TinyMCE. Por ello agregamos los
componentes:

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

En el “menu.jsp” aplicamos bootstrap para crear lo siguiente:

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

En la vista “formNoticia.jsp”

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Ahora le agregamos la estructura de envío “POST”

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Creamos ahora la clase “Noticia”

Elaborado por: José Alberto Gómez Avila

SOLUCIONES WEB Y APLICACIONES DISTRIBUIDAS Dr. Ing. Gómez Avila José

Elaborado por: José Alberto Gómez Avila