struts tiles tribalproject

Struts Tiles Eladio Del Razo (TribalProject)

1

STRUTS TILES Struts Tiles o Plantillas, que podemos usar para crear Look and Feel comunes entre varias vistas dentro de una aplicación web. Las plantillas son usadas para crear vistas de componentes reutilizables. Los Tiles (plantillas) puede ser utilizadas también sin Struts (para eso utilizaríamos Apache Tiles 2). Ya está disponible Apache Tiles 3 dentro de la página oficial http://tiles.apache.org/ Lo usamos par maquetar la web mediante estructuras básicas como:

• Header • Footer • Menu • Body, etc.

Cuando construimos una página web podemos utilizar una o varias plantillas para que en la página solo cambie una poción y no toda y así mantener la misma apariencia visual (Look And Feel). Parte básica de una página web:

COMO SURGEN LOS TILES Cuando nosotros hacemos un sitio, no está compuesto de una sola página, está compuesto de varias páginas y en estas páginas resulta ser que la interfaz debe de verse igual, letras imágenes, posición del menú, posición de los avisos, todo está igual.

http://tiles.apache.org/


2

Bueno nosotros queremos que nuestro sitio se vea igual, aprender una estrategia para que esto se cumpla es crear un JSP que sería una plantilla ponerle todos los detalles de la interfaz, colocar una posición para el logo, el menú, el pie de la página. Primero hacer la plantilla sin ningún contenido como tal, una base. Y cada vez que yo quiero crear una nueva página nueva de mi sitio copio lo que está en este archivo en uno nuevo y ya lo empiezo a modificar para colocarle mi contenido. Por ejemplo, creo una plantilla, le incluyo una hoja de estilos (CSS 3) si es necesario, cada elemento en la posición que le corresponde, el logo, el menú, el pie.

A MANO Si quisiera una página para el “Login”, pues copio y pego y entonces el Login queda con la misma estructura que la plantilla y simplemente le modifico su contenido. Si yo quisiera otra paginas por ejemplo “Altas”, la misma historia, copio y pego y coloco como ya me quedan las secciones divididas, ya solo coloco el contenido que va a ser distinto del de las otras páginas. Si yo sigo la estrategia de copiar y pegar y modificar a mano, pues si todas las páginas me quedan iguales, pero mi sitio no se va a quedar así para siempre, mi sitio va a cambiar.

¿Y SI SON MUCHOS JSP? Vamos a imaginar que ya hicimos 50 JSP Qué pasa si ahora llega el administrador del sitio y me dice:

“Mira, te acuerdas que el logo iba a la izquierda, ahora quiero que vaya a la derecha” Habría que h hacer el cambio en todos, 50 veces, eso sería muy cansado y puede que desde ahí ya me queden diferentes. Yo quisiera que de alguna manera si me piden cambiar el logo de izquierda a derecha, yo lo cambiara en un lugar y automáticamente ese cambio se viera reflejado en todas las demás páginas.


3

Ya no usamos una estrategia de Frames (Porque es una estrategia vieja, ya caduco jeje XP) porque no se permite interactuar entre un Frames y el otro, dos mundos distintos, pero a veces quieres que una parte interactúe con la otra y ya no puedes.

INCLUDE (JSP) Pero en java nosotros tenemos una instrucción en los JSP llamada INCLUDE y ese include es como decir:

“Quiero que vayas tomes lo que está ahí y lo pegues aquí pero de manera automática” Entonces, lo que podemos hacer es dividir esta plantilla original y decir:

“Bueno, mejor voy a definir secciones” Voy a tener algo para la cabecera, voy a hacer un JSP donde solo hay código solo de la cabecera, voy a hacer otro JSP para el menú, y voy a hacer otro JSP para el pie. Entonces ya lo dividí, la plantilla que estaba en un solo archivo ya está en 3.

Y con la instrucción INCLUDE yo voy a decir:

“A mira, con esta instrucción INCLUDE quiero incluir cabecera, quiero incluir menú y pie. Y para este otro quiero incluir cabecera, menú y también quiero incluir pie”

Con la instrucción INCLUDE yo le digo que es lo que quiero incluir, por ejemplo: Include cabecera. Jsp La parte intermedia si cambia porque cada página tendrá un texto distinto, información diferente que quiere mostrar al usuario. Si ahora yo sigo la estrategia con este nuevo INCLUDE (Que ahora sabemos que existe,:3) y de repente llega el administrador ( >.< ) y me dice:


4

“Sabes que, ahora el logo ya no tiene que ir a la izquierda ahora tiene que ir a la derecha”

Yo tengo la cabecera esta por un lado, el menú por otro y el pie por otro. Digamos que el logo está en la cabecera. Ahora en lugar de ir uno por uno solo voy a la cabecera y lo cambio, mejor modificar un JSP que modificar 50.

OTRO PROBLEMA Qué pasa si de repente llega el administrador del proyecto y dice: “Mira, sabes que, el diseñador gráfico ya hizo un JSP llamado HEADER y es una versión mejorada de la cabecera que tú estabas utilizando antes ahora queremos utilizar este HEADER.JSP, lo vamos a poner a prueba. Vamos a probar esta semana si les gusta a los usuario, y si no pues regresamos a la cabecera anterior” De tal manera que no puedo llegar y remplazar el código de cabecera que tal si la siguiente semana pues no gusto, y tengo que regresar a la versión anterior. Ahorita no quiero utilizar cabecera, quiero utilizar HEADER. Solo Se cambiaría la ruta del INCLUDE, ya no sería include””.jsp sino include header.jsp, esto lo cambiamos en cada uno.

¿Y NO ERA ESTE EL PROBLEMA ORIGINAL? Hicimos una mejora pero no mejoramos mucho, podríamos mejorar más, para no tener uno por uno haciendo cambio. Entonces buscamos una estrategia tipo rompecabezas, en el cual simplemente vamos a definir una plantilla con simplemente los espacios y luego vamos a colocar a nuestro gusto mediante una configuración y no estar programando en cada uno delos JSP, para resolver este último escenario que platicamos, y esto lo vamos a hacer mediante una tecnología que es un Framework por sí mismo llamada Tiles.


5

FRAMEWORK TILES Nos va a permitir crear una página a partir de una configuración y JSP que sirven de rompecabezas. Me va a permitir crear una página a partir de una configuración y JSP que sirven como objetos tipo rompecabezas.

Filosofía Yo voy a escribir un JSP que me va a servir de Layout (una plantilla, por ejemplo cuando van a poner un mosaico en un piso primero poner las divisiones con unas líneas, todavía no sabes que se va a poner, pero ya sabes de qué tamaño va a quedar esa loseta). Entonces digo: “A bueno, aquí voy a poner algo que me va a servir como un logotipo, a lo mejor aquí voy a poner algo que me va a servir como un menú y a lo mejor por aquí voy a poner algo que me

va a servir como el pie” Todavía no sé qué voy a colocar en estas posiciones pero al menos ya dije cual es lo que voy a colocar, primero hago una página con estas divisiones. Luego yo hago aquí de forma independiente los JSP, tengo mis 3 JSP, Cabecera.jsp, Menu.jsp, Pie.jsp.

ENTRAN LOS TILES Luego ya no quiero usar el INCLUDE para que se coloquen en la posición que corresponden, aquí es donde entra este Framework de Tiles, y creo mi Tiles mediante un documento XML que vamos a diseñar lo que me va a permitir es decirle:

“Voy a tomar Cabecera.jsp ” Se maneje en base en definiciones en realidad: La definición de la página de altas, ahora voy a tomar Cabecera.jsp y ese va a ser el remplazo del logotipo, voy a tomar MenuGeneral,jsp y ese va a ser el rempazo de menu, y voy a tomar


6

Footer.jsp y ese va a ser el remplazo de pie, para esta definición de Altas que va a ser una página. Esto quiere decir que cuando alguien pida por altas va a tomas el Layout y va a colocar cabecera y logo, MenuGeneral en Menu y Footer en Pie. Esto es una página. Para las demás igual, otra definición de otra página “Bajas” , igual cabecera que remplaza al logotipo, y ahora ya tengo las de “Bajas”, y asi yo voy a ir colocando tantas definiciones como paginas yo tenga, todo dentro de un documento XML. Se genera la página automáticamente basado en el Layout y que es lo que quería remplazar en cada posición. Si yo veo la página Layout.jsp , ahí nunca dice que JSP es el que remplaza en cada posición, eso lo sabré hasta que ya esté en ejecución en base a definiciones del XML. Si en este momento llega el administrador y me dice: “Sabes que, esta semana no vamos a usar Cabecera.jsp, vamo a usar Header.jsp quiero que

el sitio cambie la cabecera solo esta semana, solo cambiaria esto en el XML” Solo trabajaría en un archivo y ya no haría JSP por JSP y ya resolví el problema que teníamos hace un momento. Esto es un armado de una página de una manera dinámica como un rompecabezas, pongo piezas en las posiciones que deseo, si quiero elegir cambiar una pieza por otra solo la elijo y la cambio, y los JSP nunca sufrieron una alteración. El Framework Tiles se integra muy bien con Struts, de tal manera que podamos hacer que cuando Struts me mande a una vista en vez de enviarme a un JSP fijo, me envié a una definición de Tiles y ser arme la página como tipo rompecabezas. El 90 % de las páginas que visitamos tiene una estructura semejante a la que vimos, una cebecera, menu, footer, contenido, generalmente se mantienen iguales a lo largo de todo el sitio, casi todas unas llegan a cambiar. Con esto vamos a hacer una plantilla.


7

PASOS Creamos Nuevo proyecto Struts New – Project – Dinamic Web Project – Project Name “StrutsTiles” Marcar Struts y desmarcar JSF – Generate Deployment - Finish Ya tenemos un proyecto que es el de Struts y aquí podemos aplicarlo, la parte que nos interesa es la parte que dice agregar funcionalidad de Tiles.


8

Incluirlo en la sección de Plugin Como el Framework de Tiles es un Framework independiente, así como paso con el Framework de Validator, hay que incluirlo en la sección de plugin en nuestro archivo de Struts-Config, voy a mi archivo de Struts-Config.xml y me voy a la sección final de Plugins y me doy cuenta que el Framework de los Tiles ya está incluido, como la combinación de Struts y Tiles es muy común por eso el IDE ya lo coloco.

Tiles- defs.xml Algo importante aquí es el nombre del archivo donde vamos a estar colocando nuestras definiciones llama Tiles-defs.xml (Archivo de definiciones que usaremos para las plantillas), si yo lo busco en la ruta de mi configuraciones ahí está en WEB-INF/Config/Tiles-defs.xml, el archivo también ya está creado. Si lo abrimos va a venir con una pequeña plantilla (el cascaron del documento). Primer Paso: Colocar el Plugin (de hecho ya está) Segundo Paso: Crear el archivo del Layout (el cascaron de donde van a caer los Tiles cuando ya

esté en ejecución).

Crear Layout (Cascaron) Imaginamos un ejemplo de una librería donde el Layout del pagin web tiene: header, body y footer.


9

El desarrollador tiene dos alternativas para crear el Layout:

• Poner el header y footer en cada sitio • Usar el comando <JSP:Include> (para incluir el header y footer en cada pagina)

Este chavo elige la segunda opción y para esto se coloca los archivos en archivos separados, y podrán ser incluidos en las páginas que lo necesiten. Cuando cambia el Layout y ahora quiere agregar un menú a la librería de la aplicación él tiene que agregar el comando include en todas las páginas. En Esta situación Tiles es el mejor camino para desarrollar un Layout, asi el desarrollador no tiene que cambiar página por página. Tiles usa un archivo Layout por separado, que contiene el contenedor del Layout, Cuando el Layout tiene que ser cambiado solo el archivo Layout y el archivo de configuración tienen que ser cambiados. Eso ahorra tiempo en aplicaciones grandes. Tenemos nuestra página JSP por default “index.jsp” <Logic:redirect> organiza a Struts para encontrar un forward welcome, si no lo encuentra entonces este llevara un error.


10

AGREGANDO FUNCIONALIDAD DE LOS TILES Dentro del Struts-Config.xml Struts cargara los Tiles, el Controller y el Plugin Crear otra pagina JSP que sera el layout(cascaron) en la carpeta pages “siteLayout.jsp” con el codigo:

Archivo de definición que ocuparemos para las plantillas


11

Los Tags: <tiles:getAtString… > Recupera el titulo como cadena y lo inserta ahí. <tiles:insert … > se usar para insertar diferentes JSP, cadenas y Action Mappings en el Layout.

CONFIGURAR EL ARCHIVO tiles-defs.xml Agregamos el siguiente código.

Cada una de las siguientes definiciones extenderá (heredara) de base.definition con el parámetro extends=”base.definition”, ya que es la forma de que estén reutilizando las otras definiciones el header, navigation y el footer de base.definition. Dentro del extends se agregara los JSP, String y Action Mapping que son diferentes del base.definition. Creamos 4 JSP:

• Header • Navigation • footer • footerbookList

Dentro del bloque de etiquetas <tiles-definitions> podemos agregar diferentes definiciones para los Tiles.

El parámetro path de la definición base, podemos establecer un JSP que contenga el Layout.

Con la etiqueta put de la definición base, podemos establecer JSPs, Strings y Action Mapping.


12

AGREGANDO TAG LIBRARIES Necesitamos agregar los Struts tag Libraries en la parte superior del archivo porque el contenedor del Layout está colocado en siteLayout.jsp header.jsp Footer.jsp Index.jsp bookList.jsp


13

navigation.jsp

CREANDO LAS CLASES ACTION Nuevo paquete “acciones” y dentro las clases Nueva clase “NavigationAction.java” que hereda de Action


14

Sobrescribir el método execute (clic derecho Source- override/implement Methods) NavigationAction.java Nueva clase WelcomeAction.java hereda de Action


15

Nueva Clase BookListAction.java

MAPEO DE CLASES <Action-Mappings> Creamos tres Action Mapping el primer mapeo hace referencia a las definiciones de los tiles page.welcome y el segundo a page.booklist el tercero hace referencia a navigation.jsp. Struts-config.xml


16

Probamos:

En el URL ponemos http://localhost:7001/StrutsTiles/welcome.do Al presionar “ir a la página BOOK”

http://localhost:7001/StrutsTiles/welcome.do

struts tiles tribalproject

Documents