Está en la página 1de 18

UNIVERSIDAD DON BOSCO

FACULTAD DE ESTUDIOS TECNOLGICOS

CICLO: 02/ 2012

GUIA DE LABORATORIO #7
Nombre de la
UTILIZACIN DE PLANTILLAS
Practica:
Lugar de
CENTRO DE COMPUTO
Ejecucin:
Tiempo Estimado: 3 HORAS CLASE
MATERIA:
DOCENTE:

PROGRAMACIN ORIENTADA A OBJETOS II


MAURICIO RODRIGUEZ
RAFAEL TORRES
I. OBJETIVOS.

Que el alumno

Pueda crear tiles de Struts para su implementacin en su proyecto Web.


II. INTRODUCCIN.

Las plantillas o tiles, como habitualmente se les conoce en Struts, fueron incorporados al ncleo de la
especificacin a partir de la versin 1.1.
Su objetivo no es otro que posibilitar la reutilizacin de cdigo HTML/JSP durante el desarrollo de la vista
en una aplicacin Web MVC, simplificando el desarrollo de las pginas y haciendo tambin ms cmodos y
menos propensos a errores los posibles cambios que se puedan realizar a posteriori sobre esta capa de la
aplicacin.
La utilizacin de plantillas resulta adecuada por tanto en aquellas aplicaciones Web en las que tenemos un
grupo de pginas con estructura similar, en las que el contenido de ciertas partes de las mismas es igual en
todas ellas.

Encabezado de pginas
Men superior

Men lateral

Cuerpo de pginas

Pie de pginas
Figura 1: Clsico tipo de pginas para utilizacin de plantillas
Este es el caso de las pginas que suelen tener la tpica estructura que se muestra en la figura anterior, donde
la zona de encabezado, pie y men suele ser idntica para un cierto grupo de pginas de la aplicacin,
cambiando slo el cuerpo de una a otro.
Configuracin de la aplicacin para el uso de plantillas
Para poder utilizar plantillas en una aplicacin Struts es necesario realizar dos operaciones previas en el
archivo de configuracin struts.config.xml.
La primera de ellas consiste en indicar al controlador de struts que debe utilizar un objeto RequestProcessor a
partir de una clase diseada explcitamente para el uso de plantillas, como es el caso de las clase

TilesRequestProcessor que se encuentra en el paquete org.apache.struts.tiles. As pues, debemos aadir la


siguiente entrada en el archivo de configuracin struts-config.xml, a continuacin del elemento
<action-,mappings>:
<controller processorClass="org.apache.struts.tiles.TilesRequestProcessor"/>

La segunda de las operaciones previas ser la activacin del plug-in tiles encargado de gestionar las
plantillas. Para ello aadiremos la siguiente entada en struts-config.xml:
<plug-in className="org.apache.struts.tiles.TilesPlugin" >
<set-property property="definitions-config" value="/WEB-INF/tiles-defs.xml" />
<set-property property="moduleAware" value="true" />
</plug-in>

Los elementos anteriores se encuentran ya incluidos de forma predeterminada en al achivo struts-config.xml


que se proporciona con el paquete de distribucin de Struts, por lo que no ser necesario aadirlos de forma
manual.
Creacin de una aplicacin struts basada en plantillas
La idea bsica en la que se fundamenta este tipo de aplicaciones consiste en la definicin de una plantilla o
pgina maestra en la que se define una determinada estructura tipo de pgina, indicndole las distintas zonas
en la que stas estarn divididas y la distribucin de las mismas.
Esta pgina maestra sirve de base para la creacin de las pginas JSP que forman la vista de la aplicacin, en
la que nicamente habr que indicar el contenido que deber ser incluido dentro de cada zona.
Tanto la creacin de la pgina maestra como de las pginas de aplicacin requieren de la utilizacin de la
librera de acciones tiles incluida en el ncleo de Struts, por lo que habr que aadir la sigiente directiva
taglib al principio de cada una de las pginas.
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

III. PROCEDIMIENTO

Pasos previos
Paso 1
Crear un proyecto web dinmico llamado Guia7Poo2
Paso 2
Agregar las lineas para la activacin de Tiles en el archivo struts-config.xml, estas debern estar
ubicadas despus del elemento </action-mappins>, estas se presentan a continuacin.
<controller processorClass="org.apache.struts.tiles.TilesRequestProcessor"/>
<message-resources parameter="sv.edu.udb.resources.AplicationResource"/>
<plug-in className="org.apache.struts.tiles.TilesPlugin" >
<set-property property="definitions-config" value="/WEB-INF/tiles-defs.xml" />
<set-property property="moduleAware" value="true" />
</plug-in>

Paso 3
Agregar todas las libreras del proyecto Guia6Poo2 a Guia7Poo2.
Paso 4
Crear las carpetas css, js, img, images, mod_categorias, mod_productos.
2

Copiar la pagina jsp top-tags.jsp de la gui 8 a la gui 9 y dejarla en la misma ubicacin.


Paso 5
Copiar todos los paquetes de la Guia6Poo2 a Guia7Poo2.
Creacin de la plantilla
Como se comento, las plantilla ser implementada mediante una pgina JSP, dicha pgina deber
estar situada en el directorio privado de la aplicacin WEB-INF a fin de que no pueda ser accesible
directamente desde el navegador cliente.
Utilizaremos etiquetas HTML estndares para indicar el contenido esttico que va a ser idntico en
todas las pginas, as como las acciones y scriplets JSP que deben ser ejecutados en todas ellas.
En cuanto a las zonas de contenido dependiendo de cada pgina, debern ser marcadas mediante
dos posibles tipos de acciones tiles:

insert: Esta accin tiene diversos usos como iremos viendo a lo largo del captulo. En las
pginas maestras se utiliza para indicar la existencia de una seccin de contenido, seccin a
al que se le asignar un nombre mediante el atributo atribute de la accin. El siguiente
ejemplo define una seccin de contenido llamada header, situada dentro de una etiqueta
<div>:
<div><tiles:insert attribute="header"/></div>

Durante la creacin de las pginas de la aplicacin estas secciones sern sustituidas por el
contenido definido en determinados ficheros externos, habitualmente pginas JSP.

getAsString: Define una seccin de texto, utilizando el atributo name para asignar el
nombre de la seccin:
<h1><tiles:getAsString name="titulo"/></h1>

Como sucede con <tiles:insert>, ser durante la creacin de la pgina de aplicacin cuando esta
accin sea sustituida por un texto real.
Nuestro primer ejemplo completo servir para aclarar conceptos.
Imagnese que se quiere crear una aplicacin con dos pginas cuyo aspecto se muestra en las
siguientes figuras.

Figura 2: Pginas de aplicacin de ejemplo

Como se puede observar, ambas pginas estn organizadas en cuatro zonas: un texto en la parte
superior, que es distinto para cada pgina, un encabezado, un men en el lateral izquierdo, ambos
idnticos en las dos pginas, y un cuerpo que ocupa la parte central de la pgina y que tambin
estar personalizado para cada una de ellas, para obtener el resultado deseado seguir los siguientes
pasos.
Paso 1
Crear la plantilla que define la organizacin anterior, para ello crear una carpeta dentro de WEBINF una carpeta llamada platillas y crear dentro de ella una pagina jsp llamada plantilla.jsp, y
agregar el siguiente cdigo.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:getAsString name="titulo"/></title>
</head>
<body>
<center>
<h1><tiles:getAsString name="titulo"/></h1>
</center>
<table width="90%">
<tr>
<td
height="25%" colspan="2">
<tiles:insert attribute="encabezado"/>
</td>
</tr>
<tr>
<td>
<tiles:insert attribute="menu"/>
</td>
<td>
<tiles:insert attribute="cuerpo"/>
</td>
</tr>
</table>
</body>
</html>

Paso 2 (Creacin de piezas de contenido)


Las piezas de contenido representan las porciones de cdigo HTML/JSP que sustituirn a los
elementos <tiles:insert> durante la creacin de las pginas de aplicacin.
Por lo general estos bloques de contenido se almacenan en archivos .jsp y, dado que su contenido
formar parte de las pginas finales, pueden incluir tanto cdigo HTML/JPS estndar como
acciones de Struts.
Al igual que sucede con las pginas maestras, para evitar que puedan ser directamente accesibles
desde el cliente, estos archivos deberan estar situados en el directorio WEB-INF de la aplicacin.
Las siguientes paginas representan las zonas definidas en la plantilla anterior, crear cada una de
ellas con el cdigo presentado a continuacin:

titulo.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div align="center" style="background-color:aqua">
<h1>Aplicacin de ejemplo</h1>
</div>

menu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<table>
<tr>
<td>
<a href="">Opcion 1</a><br>
</td>
</tr>
<tr>
<td>
<a href="">Opcion 2</a><br>
</td>
</tr>
<tr>
<td>
<a href="">Opcion 3</a><br>
</td>
</tr>
<tr>
<td>
<a href="">Opcion 4</a><br>
</td>
</tr>
</table>

body1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>Contenido Primero</h1>
<h3>Este es el cuerpo de la pagina 1</h3>

body2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>Contenido segundo</h1>
<h3>Este es el cuerpo de la pagina 2</h3>

Creacin de las pginas de aplicacin


Una vez que se dispone de la plantilla y de las piezas de contenido, crear las pginas de la
aplicacin resulta una tarea tremendamente sencilla. Para ello tan solo ser necesario declarar al
principio de la pgina la plantilla que se va a utilizar e indicar a continuacin las piezas que
queremos situar en cada zona de contenido.
Declaracin de la plantillas
La declaracin de la plantilla se lleva a cabo mediante la accin <tiles:insert>, utilizando en este
caso el atributo page de la accin para indicar la direccin relativa de la pgina maestra. Por

ejemplo, suponiendo que la plantilla se encuentra, definida en un archivo llamado base.jsp que est
situado en el directorio WEB-INF, la declaracin de la plantilla en la pgina de aplicacin sera:
<tiles:insert page="/WEB-INF/base.jsp">
<!--Aqu referencias a pginas de contenido-->
</tiles:insert>

Teniendo en claro lo mencionado en los prrafos anteriores pasaremos al siguiente paso:


Paso 3 (Inclusin de pginas de contenido)
En el interior de insert debemos indicar las piezas que queremos incluir en cada zona de contenido
especificada en la plantilla. Esta sencilla operacin es realizada mediante la accin <tiles:put>,
cuya configuracin se realiza a travs de sus dos atributos:

name: Nombre de la zona de contenido a la que hace referencia.


ste deber coincidir con alguno de los valores de los atributos atribute o name definido en
las acciones <tiles:insert> y <tiles:getAsString> de a plantilla.

value: Contenido a incluir en la zona especificada en name. En el caso de zonas definidas


mediante <tiles:insert>, value especificar la URL relativa de la pgina de contenido,
mientras que en el caso de <tiles:getAsString> contendr la cadena de texto por la que ser
sustituido el elemento.
En el ejemplo que estamos analizando, las pginas de aplicacin son las siguientes, estas deben de
ser creadas dentro de la carpeta WebContent:
pagina1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<tiles:insert page="/WEB-INF/plantillas/plantilla.jsp">
<tiles:put name="titulo" value="Pagina 1"/>
<tiles:put name="encabezado" value="/WEB-INF/plantillas/titulo.jsp"/>
<tiles:put name="menu" value="/WEB-INF/plantillas/menu.jsp"/>
<tiles:put name="cuerpo" value="/WEB-INF/plantillas/body1.jsp"/>
</tiles:insert>

pagina2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<tiles:insert page="/WEB-INF/plantillas/plantilla.jsp">
<tiles:put name="titulo" value="Pagina 2"/>
<tiles:put name="encabezado" value="/WEB-INF/plantillas/titulo.jsp"/>
<tiles:put name="menu" value="/WEB-INF/plantillas/menu.jsp"/>
<tiles:put name="cuerpo" value="/WEB-INF/plantillas/body2.jsp"/>
</tiles:insert>

Paso 4
Si corremos cada una de las dos paginas anteriores el resultado debe ser similar al de las imgenes
mostradas en la Figura 2.
6

Definiciones
El mecanismo de utilizacin de plantillas que se acaba de analizar nos permite reutilizar cdigo en
las aplicaciones, adems de proporcionarnos gran flexibilidad a la hora de crear las pginas finales
de la aplicacin. Sin embargo es en la creacin de estas pginas finales donde observamos tambin
la aparicin de numerosos elementos repetitivos, por ejemplo, en el cdigo de las pginas anteriores
vemos como el elemento <tiles:put> utilizado en la definicin de las zonas de encabezado y men
idnticos en ambas pginas.
Otro defecto que presenta el sistema anterior es el hecho de que cualquier cambio en la ubicacin de
alguno de estos archivos de contenido implicar tener que actualizar todas las pginas de la
aplicacin donde se haga referencia a stos, lo que puede resultar en una importe fuente de errores.
La solucin que propone Struts para estos problemas consiste en la utilizacin de definiciones. Una
definicin, como su nombre indica, define una manera de distribuir las piezas de contenido en una
plantilla, de modo que a la hora de crear una definicin con contenido similar a otra ya existente no
sea necesario volver a definir de nuevo los mismos elementos ya establecidos en la anterior
definicin, sino que bastar con que la nueva definicin herede a la primera y redefina
nicamente aquellas zonas cuyo contenido es diferente al indicado en la definicin padre.
Creacin de una definicin
Antes de crear una definicin debemos disponer de una plantilla y una serie de pginas de
contenido. El desarrollo de estos elementos se lleva a cabo tal y como explicamos en la seccin
anterior.
En cuanto a las definiciones, stas se crean en nuevo archivo de configuracin llamado
tiles-defs.xml, cuya ubicacin deber estar indicada en el elemento <plug-in> definido en
struts-config.xml, tal y como se indic al comienzo de esta gua. Lo habitual es que tiles-defs.xml
se site en el directorio WEB-INF de la aplicacin.
Nota: Este archivo de tiles-defs.xml sera proporcionado por el docente.
Definiciones base
Una definicin base es aquella que define explcitamente la distribucin de los contenidos de cada
zona indicada en la plantilla, sin heredar de ninguna otra definicin existente.
En este tipo de definicin habr que especificar los siguientes atributos del elemento <definition>:

name: Nombre asignado a la definicin.

path: URL relativa de la pgina maestra que contiene la plantilla a partir de la que se va a
crear la definicin.
Para indicar el contenido de cada zona se utilizar el sub-elemento <put> de <definition>, el cual
dispone a su vez de los atributos:

name: Nombre de la zona para la que se va a indicar el contenido.

value: En el caso de las zonas definidas con <tiles:insert> este atributo indicar la URL
relativa de la pgina de contenido, mientras que para las zonas <tiles:getAsString>
contendr la cadena de texto equivalente.
Definiciones derivadas
A la hora de crear una definicin derivada de otra debemos especificar en el atributo extends del
elemento <definition> el nombre de la definicin base. De esta manera, el elemento heredar todas
las definiciones <put> especificadas en el <definition> padre. Si queremos redefinir el contenido de
cualquiera de las zonas utilizaremos nuevamente el elemento <put>

A continuacin se presentaran los pasos necesarios para arreglar los inconvenientes de los puntos
anteriores, para esto realizar los siguiente:
Paso 1
Ir al archivo tiles-defs.xml y agregar las siguientes definiciones, dentro de los elementos
<tiles-definitions> </tiles-definitions> tal y como se muestra a continuacin.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 1.1//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd">
<!--->

This is a blank Tiles definition file with a commented example.

<tiles-definitions>
<definition name="principal" path="/WEB-INF/plantillas/plantilla.jsp">
<put name="titulo" value=""/>
<put name="encabezado" value="/WEB-INF/plantillas/titulo.jsp"/>
<put name="menu" value="/WEB-INF/plantillas/menu.jsp"/>
<put name="cuerpo" value=""/>
</definition>
<definition name="parapagina1" extends="principal">
<put name="titulo" value="Pagina 1"/>
<put name="cuerpo" value="/WEB-INF/plantillas/body1.jsp"/>
</definition>
<definition name="parapagina2" extends="principal">
<put name="titulo" value="Pagina 2"/>
<put name="cuerpo" value="/WEB-INF/plantillas/body2.jsp"/>
</definition>

Paso2 (Pginas de aplicacin)


Una vez creadas las definiciones, la implementacin de las pginas de aplicacin resulta
tremendamente sencilla; utilizando el atributo definition del elemento <tiles:insert> indicaremos el
nombre de la definicin que queremos aplicar a cada pgina. El cdigo siguiente indica como
quedara la implementacin e las pginas JSP, pagina1.jsp y pagina2.jsp que debern ser
modificadas como se muestra a continuacin.
pagina1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<tiles:insert definition="parapagina1" />

pagina1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<tiles:insert definition="parapagina2" />

Paso3
Correr las paginas anteriores y debe ver un resultado como el mostrado en la Figura 2.
Aplicacin practica apoyndonos de lo realizado en la gua 6.
En esta parte utilizaremos lo realizado en la gui practica numero 6, es por ello que en los pasos
previos se le dice que debe de copiar todos los paquetes que manejen la lgica de negocio, para
completar el funcionamiento total de la aplicacin, seguir los pasos siguientes.
Paso 1

Copiar dentro de la carpeta css las hojas de estilo brindada por el docente.
Copiar dentro de la carpeta images las imagines proporcionadas por el docente.
Copiar dentro de la carpeta img las imgenes de de la carpeta img de la gui 6.
Copiar dentro de la carpeta js los javascript proporcionados en la gui 6.

Paso 2
Crear dentro del WEB-INF en la carpeta plantillas una pagina JSP llamada plantillamsj.jsp y
agregar el siguiente cdigo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Splendid by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="logo">
<h1><a href="#">Aplicacin Web</a></h1>
<p><em>Para el manejo de productos</em></p>
</div>
<hr />
<!-- end #logo -->
<div id="header">
<div id="menu">
<ul>
<tiles:insert attribute="menumsj"/>
</ul>
</div>
<!-- end #menu -->
</div>
<!-- end #header -->
<!-- end #header-wrapper -->
<div id="page">
<div id="page-bgtop">
<div id="content">
<div class="post">
<h2 class="title"><tiles:getAsString
name="titulo"/></h2>

<div class="entry">
<tiles:insert attribute="bodymsj"/>
</div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li>
<h2>Opciones de Mensaje </h2>
<ul>
<tiles:insert attribute="menumsj"/>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both;">&nbsp;</div>
</div>
</div>
<!-- end #page -->
<div id="footer">
<p>Visita <a href="http://www.udb.edu.sv/">la pagina de la
Universidad Don Bosco</a>.</p>
</div>
<!-- end #footer -->
</div>
</body>
</html>

Paso 3
Crear dentro del WEB-INF en la carpeta plantillas una pagina JSP llamada menusmsj.jsp y
agregar el siguiente cdigo.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/top-tags.jsp"%>
<li><html:link href="productos.do?method=llenar">Productos</html:link></li>
<li><html:link forward="formcategoria">Categorias</html:link></li>

Paso 4
Crear dentro del WEB-INF en la carpeta plantillas una pagina JSP llamada bodymsj.jsp y
agregar el siguiente cdigo.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Este es el cuerpo del mensaje

Paso 5
Como siguiente punto agregaremos las nuevas definiciones al archivo tiles-defs.xml, estas
quedaran como se muestran a continuacin.
<definition name="principalmsj" path="/WEB-INF/plantillas/plantillamsj.jsp">
<put name="titulo" value=""/>

10

<put name="menumsj" value="/WEB-INF/plantillas/menusmsj.jsp"/>


<put name="bodymsj" value="/WEB-INF/plantillas/bodymsj.jsp"/>
</definition>
<definition name="productos" extends="principalmsj">
<put name="titulo" value="...:.:Opciones Productos:::..."/>
<put name="bodymsj" value="/mod_productos/FormProductos.jsp"/>
</definition>
<definition name="categorias" extends="principalmsj">
<put name="titulo" value="...:::Opciones Categorias:::..."/>
<put name="bodymsj" value="/mod_categorias/FormCat.jsp"/>
</definition>

Paso 6
Como se esta haciendo uso de lo realizado en la practica 6 deberemos de agregar los
<action-mappings> al archivo struts-config.xml, para simplificar se le presentan toda la
configuracin del archivo struts-config.xml.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE struts-config PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 1.3//EN"
"http://struts.apache.org/dtds/struts-config_1_3.dtd">
<struts-config>
<form-beans>
<form-bean name="CategoriaForm" type="sv.edu.udb.form.CategoriaForm" />
<form-bean name="ProductosForm" type="sv.edu.udb.form.ProductosForm" />
</form-beans>
<global-exceptions>
</global-exceptions>
<global-forwards>
<forward name="formcategoria" path="/categorias.do"/>
<forward name="menu" path="../Menu.jsp"/>
<forward name="menu1" path="/Menu.jsp"/>
</global-forwards>
<action-mappings>
<action name="CategoriaForm"
path="/Categoria" parameter="method" scope="request"
type="sv.edu.udb.action.CategoriaAction">
<forward name="inicio" path="categorias"/>
</action>
<action name="ProductosForm"
path="/productos" parameter="method" scope="request"
type="sv.edu.udb.action.CargarCombosAction">
<forward name="ingresado" path="productos"/>
</action>
<action path="/categorias" forward="categorias"/>
</action-mappings>
<controller
processorClass="org.apache.struts.tiles.TilesRequestProcessor"/>

11

<message-resources parameter="sv.edu.udb.resources.AplicationResource"/>
<plug-in className="org.apache.struts.tiles.TilesPlugin" >
<set-property property="definitions-config" value="/WEB-INF/tilesdefs.xml" />
<set-property property="moduleAware" value="true" />
</plug-in>
</struts-config>

Paso 7
Dentro de la carpeta mod_categorias copiaremos la pgina JSP FormCat.jsp, esta deber tener
unos cambios directamente en el javascript, a continuacin se le presenta esta pagina con los
cambios realizados.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/top-tags.jsp"%>
<html:html>
<head>
<title>Categoria</title>
<script type="text/javascript" language="JavaScript">
function nuevo(){
document.CategoriaForm.method.value ="agregar";
document.CategoriaForm.submit();
}
function update(){
document.CategoriaForm.method.value ="actualizar";
document.CategoriaForm.submit();
}
function remove(){
document.CategoriaForm.method.value ="eliminar";
document.CategoriaForm.submit();
}
function show(){
document.CategoriaForm.method.value ="mostrar";
document.CategoriaForm.submit();
}
</script>
<script type="text/javascript">
function rafa(){
alert("rafa");
}

</script>
</head>
<body>
<center>

<html:form action="/Categoria" method="get">


<table>
<tr>
<td><bean:message
key="label.codigo"/></td><td><html:text property="codigo"/></td>
</tr>
<tr><td><bean:message
key="label.categoria"/></td><td><html:text property="nombrecat"/></td>
</tr>

12

<tr>

<td colspan="2">
<html:button property="ingresar"
onclick="nuevo()"><bean:message key="label.agregar"/></html:button>
<html:button property="actualizar"
onclick="update()"><bean:message key="label.actualizar"/></html:button>
<html:button property="eliminar" ><bean:message
key="label.eliminar"/></html:button>
<html:button property="mostrar"
onclick="show()"><bean:message key="label.mostrar"/></html:button>
<html:hidden property="method" value=""/>
</td>
</tr>
</table>
</html:form>
<logic:present name="mensaje">
<logic:equal name="mensaje" value="Exito">
<bean:message key="label.insert"/>
</logic:equal>
<logic:equal name="mensaje" value="Fracaso">
<font color="red">
<bean:message key="error.insert"/>
</font>
</logic:equal>
</logic:present>
<logic:present name="update">
<logic:equal name="update" value="Exito">
<bean:message key="label.update"/>
</logic:equal>
<logic:equal name="update" value="Fracaso">
<font color="red">
<bean:message key="error.update"/>
</font>
</logic:equal>
</logic:present>
<logic:present name="delete">
<logic:equal name="delete" value="Exito">
<bean:message key="label.delete"/>
</logic:equal>
<logic:equal name="delete" value="Fracaso">
<font color="red">
<bean:message key="error.delete"/>
</font>
</logic:equal>
</logic:present>
</center>
<center>
<logic:present name="categoria">
<display:table name="categoria" pagesize="3" requestURI="/Categoria.do?
method=display">
<display:column property="codigo" title="Codigo" sortable="true" />
<display:column property="nombre" title="Categoria"/>
</display:table>
</logic:present>
</center>
</body>
</html:html>

13

Paso 8
Dentro de la carpeta mod_productos copiaremos la pgina JSP FormProductos.jsp, esta deber
tener unos cambios directamente en el javascript, a continuacin se le presenta esta pagina con los
cambios realizados.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/top-tags.jsp"%>
<script type="text/javascript" language="JavaScript">
function nuevo(){
document.ProductosForm.method.value ="agregar";
document.ProductosForm.submit();
}
function update(){
document.ProductosForm.method.value ="actualizar";
document.ProductosForm.submit();
}
function remove(){
document.ProductosForm.method.value ="eliminar";
document.ProductosForm.submit();
}
function show(){
document.ProductosForm.method.value ="mostrar";
document.ProductosForm.submit();
}
</script>
<html:form action="/productos" method="get">
<center>
<table>
<tr>
<td>Codigo: </td>
<td><html:text property="codigo"/></td>
</tr>
<tr>
<td>Nombre del Producto: </td>
<td><html:text property="nombreproducto"/></td>
</tr>
<tr>
<td>Precio: </td>
<td><html:text property="precio"/></td>
</tr>
<tr>
<td>Proveedor: </td>
<td>
<logic:present name="proveedor">
<html:select property="provee" >
<html:options collection="proveedor" property="codigo"
labelProperty="nombre" />
</html:select>
</logic:present>
</td>
</tr>
<tr>
<td>Categoria: </td>
<td>
<logic:present name="categoria">
<html:select property="cat" styleClass="textBox">

14

<html:options collection="categoria" property="codigo"


labelProperty="nombre" />
</html:select>
</logic:present>
</td>
</tr>
<tr>
<td>Existencia: </td>
<td><html:text property="existencia"/></td>
</tr>
<tr>
<td colspan="2">
<html:button property="ingresar"
onclick="nuevo()"><bean:message key="label.agregar"/></html:button>
<html:button property="actualizar"
onclick="update()"><bean:message key="label.actualizar"/></html:button>
<html:button property="eliminar"
onclick="remove()"><bean:message key="label.eliminar"/></html:button>
<html:button property="mostrar"
onclick="show()"><bean:message key="label.mostrar"/></html:button>
<html:hidden property="method" value=""/>
</td>
</tr>
</table>
</center>
</html:form>
<center>
<logic:present name="productos">
<display:table name="productos" pagesize="3" requestURI="/productos.do?
method=display" >
<display:column property="codigo" title="Codigo" sortable="true"/>
<display:column property="nombreproducto" title="Nombre"/>
<display:column property="precio" title="Precio"/>
<display:column property="provee" title="Proveedor"/>
<display:column property="cat" title="Categoria"/>
<display:column property="existencia" title="Existencia"/>
</display:table>
</logic:present>
</center>

Nota: de este formulario solo esta codificado el botn de Mostrar Datos


Paso 9
Como siguiente punto agregaremos unos nuevos mtodos a los siguientes Action
CategoriaAction
public ActionForward display(ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception {
return mapping.findForward("inicio");
}

15

CargarCombosAction
public ActionForward mostrar(ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception {
LlenarCombos llenar=new LlenarCombos();
ArrayList<ProductosForm> listaproductos=llenar.mostrarProductos();
request.setAttribute("productos",listaproductos);
ArrayList<CategoriaBean>
listacategoria=llenar.llenearComboCategoria();
request.setAttribute("categoria", listacategoria);
ArrayList<ProveedorBean>
listaproveedor=llenar.llenearComboProveedor();
request.setAttribute("proveedor", listaproveedor);
System.out.println("LLegue hasta mostrar");
return mapping.findForward("ingresado");
}
public ActionForward display(ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception {
return mapping.findForward("ingresado");
}

Paso 10
Crear una pagina JSP llamada pagina1msj.jsp esta implementara la aplicacin de la plantilla,
agregar el siguiente cdigo.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<tiles:insert definition="principalmsj" />

16

Paso 11
Correr la pagina anterior y vera un resultado como el que se muestra a continuacin.

Si da click en cada uno de los link podr ver los resultados tal y como se muestra en las siguientes
imgenes:

17

IV. ANALISIS DE RESULTADOS

Crear una plantilla que sera utilizada para su proyecto y en ella reflejar las diferentes opciones que
este contiee, como grupo deberan repartirse las opciones para que cada uno haga una parte del
proyecto. El proyecto no es necesariamente funcional es nada ms las vista de este.
V. REFERENCIA BIBLIOGRAFICA

Libros en biblioteca UDB.


Struts (Capitulo 7)
Antonio J. Martn Sierra

18

También podría gustarte