Struts Tiles
Eladio Del Razo (TribalProject)
STRUTS TILES
Struts Tiles o Plantillas, que podemos usar para crear Look and Feel comunes entre varias vistas dentro de una aplicacin web. Las plantillas son usadas para crear vistas de componentes reutilizables. Los Tiles (plantillas) puede ser utilizadas tambin sin Struts (para eso utilizaramos Apache Tiles 2). Ya est disponible Apache Tiles 3 dentro de la pgina oficial [Link] Lo usamos par maquetar la web mediante estructuras bsicas como: Header Footer Menu Body, etc.
Cuando construimos una pgina web podemos utilizar una o varias plantillas para que en la pgina solo cambie una pocin y no toda y as mantener la misma apariencia visual (Look And Feel). Parte bsica de una pgina web:
COMO SURGEN LOS TILES
Cuando nosotros hacemos un sitio, no est compuesto de una sola pgina, est compuesto de varias pginas y en estas pginas resulta ser que la interfaz debe de verse igual, letras imgenes, posicin del men, posicin de los avisos, todo est igual.
Struts Tiles
Eladio Del Razo (TribalProject)
Bueno nosotros queremos que nuestro sitio se vea igual, aprender una estrategia para que esto se cumpla es crear un JSP que sera una plantilla ponerle todos los detalles de la interfaz, colocar una posicin para el logo, el men, el pie de la pgina. Primero hacer la plantilla sin ningn contenido como tal, una base. Y cada vez que yo quiero crear una nueva pgina 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 posicin que le corresponde, el logo, el men, el pie.
A MANO
Si quisiera una pgina 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 pginas.
Si yo sigo la estrategia de copiar y pegar y modificar a mano, pues si todas las pginas 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 Habra que h hacer el cambio en todos, 50 veces, eso sera 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 automticamente ese cambio se viera reflejado en todas las dems pginas.
Struts Tiles
Eladio Del Razo (TribalProject)
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 interacte con la otra y ya no puedes.
INCLUDE (JSP)
Pero en java nosotros tenemos una instruccin 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 automtica 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 cdigo 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 instruccin INCLUDE yo voy a decir: A mira, con esta instruccin INCLUDE quiero incluir cabecera, quiero incluir men y pie. Y para este otro quiero incluir cabecera, men y tambin quiero incluir pie
Con la instruccin INCLUDE yo le digo que es lo que quiero incluir, por ejemplo: Include cabecera. Jsp La parte intermedia si cambia porque cada pgina tendr un texto distinto, informacin 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: 3
Struts Tiles
Eladio Del Razo (TribalProject)
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 diseador grfico ya hizo un JSP llamado HEADER y es una versin mejorada de la cabecera que t estabas utilizando antes ahora queremos utilizar este [Link], 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 cdigo de cabecera que tal si la siguiente semana pues no gusto, y tengo que regresar a la versin anterior. Ahorita no quiero utilizar cabecera, quiero utilizar HEADER.
Solo Se cambiara la ruta del INCLUDE, ya no sera [Link] sino include [Link], esto lo cambiamos en cada uno.
Y NO ERA ESTE EL PROBLEMA ORIGINAL?
Hicimos una mejora pero no mejoramos mucho, podramos mejorar ms, 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 configuracin y no estar programando en cada uno delos JSP, para resolver este ltimo escenario que platicamos, y esto lo vamos a hacer mediante una tecnologa que es un Framework por s mismo llamada Tiles. 4
Struts Tiles
Eladio Del Razo (TribalProject)
FRAMEWORK TILES
Nos va a permitir crear una pgina a partir de una configuracin y JSP que sirven de rompecabezas. Me va a permitir crear una pgina a partir de una configuracin y JSP que sirven como objetos tipo rompecabezas.
Filosofa
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 lneas, todava no sabes que se va a poner, pero ya sabes de qu tamao 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 Todava no s qu voy a colocar en estas posiciones pero al menos ya dije cual es lo que voy a colocar, primero hago una pgina con estas divisiones. Luego yo hago aqu de forma independiente los JSP, tengo mis 3 JSP, [Link], [Link], [Link].
ENTRAN LOS TILES
Luego ya no quiero usar el INCLUDE para que se coloquen en la posicin que corresponden, aqu es donde entra este Framework de Tiles, y creo mi Tiles mediante un documento XML que vamos a disear lo que me va a permitir es decirle: Voy a tomar [Link] Se maneje en base en definiciones en realidad: La definicin de la pgina de altas, ahora voy a tomar [Link] 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 5
Struts Tiles
Eladio Del Razo (TribalProject)
[Link] y ese va a ser el remplazo de pie, para esta definicin de Altas que va a ser una pgina. 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 pgina. Para las dems igual, otra definicin de otra pgina 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 pgina automticamente basado en el Layout y que es lo que quera remplazar en cada posicin. Si yo veo la pgina [Link] , ah nunca dice que JSP es el que remplaza en cada posicin, eso lo sabr hasta que ya est en ejecucin en base a definiciones del XML. Si en este momento llega el administrador y me dice: Sabes que, esta semana no vamos a usar [Link], vamo a usar [Link] quiero que el sitio cambie la cabecera solo esta semana, solo cambiaria esto en el XML Solo trabajara en un archivo y ya no hara JSP por JSP y ya resolv el problema que tenamos hace un momento. Esto es un armado de una pgina de una manera dinmica 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 alteracin. 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 definicin de Tiles y ser arme la pgina como tipo rompecabezas.
El 90 % de las pginas 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.
Struts Tiles
Eladio Del Razo (TribalProject)
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.
Struts Tiles
Eladio Del Razo (TribalProject)
Incluirlo en la seccin de Plugin
Como el Framework de Tiles es un Framework independiente, as como paso con el Framework de Validator, hay que incluirlo en la seccin de plugin en nuestro archivo de Struts-Config, voy a mi archivo de [Link] y me voy a la seccin final de Plugins y me doy cuenta que el Framework de los Tiles ya est incluido, como la combinacin de Struts y Tiles es muy comn por eso el IDE ya lo coloco.
Tiles- [Link]
Algo importante aqu es el nombre del archivo donde vamos a estar colocando nuestras definiciones llama [Link] (Archivo de definiciones que usaremos para las plantillas), si yo lo busco en la ruta de mi configuraciones ah est en WEB-INF/Config/[Link], el archivo tambin ya est creado. Si lo abrimos va a venir con una pequea 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 ejecucin).
Crear Layout (Cascaron)
Imaginamos un ejemplo de una librera donde el Layout del pagin web tiene: header, body y footer.
Struts Tiles El desarrollador tiene dos alternativas para crear el Layout:
Eladio Del Razo (TribalProject)
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 opcin y para esto se coloca los archivos en archivos separados, y podrn ser incluidos en las pginas que lo necesiten. Cuando cambia el Layout y ahora quiere agregar un men a la librera de la aplicacin l tiene que agregar el comando include en todas las pginas. En Esta situacin Tiles es el mejor camino para desarrollar un Layout, asi el desarrollador no tiene que cambiar pgina por pgina.
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 configuracin tienen que ser cambiados. Eso ahorra tiempo en aplicaciones grandes. Tenemos nuestra pgina JSP por default [Link]
<Logic:redirect> organiza a Struts para encontrar un forward welcome, si no lo encuentra entonces este llevara un error.
Struts Tiles
Eladio Del Razo (TribalProject)
AGREGANDO FUNCIONALIDAD DE LOS TILES
Dentro del [Link]
Archivo de definicin que ocuparemos para las plantillas
Struts cargara los Tiles, el Controller y el Plugin Crear otra pagina JSP que sera el layout(cascaron) en la carpeta pages [Link] con el codigo:
10
Struts Tiles
Eladio Del Razo (TribalProject)
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 [Link]
Agregamos el siguiente cdigo.
Dentro del bloque de etiquetas <tiles-definitions> podemos agregar diferentes definiciones para los Tiles.
El parmetro path de la definicin base, podemos establecer un JSP que contenga el Layout. Con la etiqueta put de la definicin base, podemos establecer JSPs, Strings y Action Mapping.
Cada una de las siguientes definiciones extender (heredara) de [Link] con el parmetro extends=[Link], ya que es la forma de que estn reutilizando las otras definiciones el header, navigation y el footer de [Link]. Dentro del extends se agregara los JSP, String y Action Mapping que son diferentes del [Link].
Creamos 4 JSP: Header Navigation footer footerbookList
11
Struts Tiles
Eladio Del Razo (TribalProject)
AGREGANDO TAG LIBRARIES
Necesitamos agregar los Struts tag Libraries en la parte superior del archivo porque el contenedor del Layout est colocado en [Link] [Link]
[Link]
[Link]
[Link]
12
Struts Tiles
Eladio Del Razo (TribalProject)
[Link]
CREANDO LAS CLASES ACTION
Nuevo paquete acciones y dentro las clases
Nueva clase [Link] que hereda de Action
13
Struts Tiles
Eladio Del Razo (TribalProject)
Sobrescribir el mtodo execute (clic derecho Source- override/implement Methods)
[Link]
Nueva clase [Link] hereda de Action
14
Struts Tiles Nueva Clase [Link]
Eladio Del Razo (TribalProject)
MAPEO DE CLASES <Action-Mappings>
Creamos tres Action Mapping el primer mapeo hace referencia a las definiciones de los tiles [Link] y el segundo a [Link] el tercero hace referencia a [Link]. [Link]
15
Struts Tiles
Eladio Del Razo (TribalProject)
Probamos:
En el URL ponemos [Link]
Al presionar ir a la pgina BOOK
16