Las p�ginas Web sofisticadas presentan contenido de varias fuentes de datos, utilizando varias subvistas que completan una s�la p�gina. Adem�s, varios individuos con diferentes habilidades contribuyen al desarrollo y mantenimiento de esas p�ginas Web.
�Problema
En lugar de proporcionar un mecanismo para combinar modularmente, en el que porciones at�micas de una vista componen un p�gina completa, las p�ginas se construyen embebiendo c�digo de formateo directamente dentro de cada vista.
La modificaci�n de la distribuci�n de m�ltiples vistas es dif�cil y propensa a errores, debido a la duplicaci�n de c�digo.
�Causas
- Las porciones at�micas del contenido de la vista cambian con frecuencia.
- Varias vistas compuestas utilizan subvistas similares, como un tabla de inventario de clientes. Estas porciones at�micas se decoran con una plantilla de texto alrededor diferente o aparecen en diferentes localizaciones dentro de la p�gina.
- Los cambios de distribuci�n son m�s dif�ciles de manejar y el c�digo m�s dif�cil de mantener cuando las subvistas se embeben directamente y se duplican en varias vistas.
- Frecuentemente, embeber las porciones cambiantes de la plantilla de texto directamente dentro de las vistas tambi�n afecta potencialmente a la disponibilidad y administraci�n del sistema. El servidor podr�a necesitar reinicializarse antes de que los cliente vieran las modificaciones o actualizaciones de estas plantillas de componentes.
�Soluci�n
Utilizar vistas compuestas que se componen de varias subvistas at�micas. Cada componente de la plantilla se podr�a incluir din�micamente dentro del total y la distribuci�n de la p�gina se maneja independientemente del contenido.
Esta soluci�n promueve la creaci�n de una vista compuesta basada en la inclusi�n y sustituci�n de fragmentos de plantilla modulares tanto est�ticos como din�micos. Tambi�n promueve la reutilizaci�n de porciones at�micas de la vista asegurando un dise�o modular. Es apropiado utilizar este patr�n para generar p�ginas que muestran componentes que podr�an combinarse en una gran variedad de formas. Este escenario ocurre, por ejemplo, con sites de portal que incluyen numerosas subvistas independientes, como noticias, informaci�n del tiempo, y valores de stocks en una s�la p�gina. La distribuci�n de la p�gina se maneja y modifica de forma independiente al contenido de las subvistas.
Otro beneficio de este patr�n es que los dise�adores Web pueden hacer un prototipo de la distribuci�n de la site, conectando contenido est�tico en todas las regiones de la plantilla. Seg�n va progresando el desarrollo de la site, ese contenido est�tico se puede sustituir por el contenido din�mico.
La siguiente figura muestra una captura de pantalla de la p�gina inicial de Sun, java.sun.com. Se identifican cuatro regiones: Navegaci�n, B�squeda, Contenido y Cabeceras. Aunque el contenido de cada una de estas subvistas podr�a estar originado desde diferentes fuentes de datos, se unen para crear un s�la p�gina compuesta.
Esta patr�n tambi�n tiene inconvenientes. Provoca una sobrecarga en el entorno de ejecuci�n, un precio que hay que pagar por el incremento de flexibilidad que proporciona. La utilizaci�n de un mecanismo de distribuci�n m�s sofisticado tambi�n trae consigo algunos problemas de manejabilidad y desarrollo, ya que hay m�s artefactos que mantener y un cierto nivel indirecto de implementaci�n que entender.
�Estructura
La siguiente figura representa el diagrama de clases del patr�n Composite View.
�Participantes y Responsabilidades
La siguiente figura representa el diagrama de secuencia del patr�n Composite View.
�Composite View
Una vista compuesta es una vista a la que se le han agregado varias subvistas.
�View Manager
El Controlador de Vista maneja la inclusi�n de porciones de fragmentos de plantilla en la vista compuesta. El Controlador de Vista podr�a ser parte de un motor de ejecuci�n est�ndar de p�ginas JSP, en la forma de la etiqueta <jsp:include> de JSP, o podr�a encapsularse dentro de un helper JavaBean (JSP 1.0+) o una etiqueta personalizada (JSP 1.1+) para proporcionar una funcionalidad m�s robusta.
Un beneficio adicional de utilizar un mecanismo distinto a la etiqueta include est�ndar es que �stos facilitan la inclusi�n condicional. Por ejemplo, ciertos fragmentos de plantilla se podr�an incluir s�lo si el usuario cumple un rol particular o si se cumplen ciertas condiciones del sistema. Adem�s, utilizar un componente helper como View Manager nos permite un control m�s sofisticado de toda la estructura de la p�gina, lo que es �til para crear distribuciones de p�ginas reutilizables.
�Included View
Una Vista Incluida es una subvista que es una pieza at�mica de un vista completa mayor. Esta vista incluida potencialmente tambi�n podr�a ser una vista compuesta, incluyeno ella misma varias subvistas.
�Estrategias
�JSP page View
Ver la estrategia "JSP page View" en el patr�n View Helper.
�Servlet View
Ver la estrategia "Servlet View" en el patr�n View Helper.
�JavaBean View Management
El control de la vista se implementa utilizando componentes JavaBeans, como se ve en el siguiente ejemplo. La vista delega en el JavaBean, que implementa la l�gica personalizada para controlar la distribuci�n y composici�n de la vista. Las decisiones sobre la distribuci�n de la p�g�na se deben basar en roles de usuario o pol�ticas de seguridad, haci�ndolo mucho m�s poderoso que la etiqueta include de una p�gina JSP. Aunque es sem�nticamente equivalente a la Estrategia de Control de Vista por Etiqueta Personalizada, no es tan elengante porque introduce c�digo scriptlet en la vista.
Utilizar esta estrategia requiere menos trabajo que utilizar la estrategia preferida de Control de Vista por Etiqueta Personalziada, porque es m�s f�cil construir componentes JavaBeans e integrarlos en un entorno de p�ginas JSP. Adem�s, incluso los desarrolladores m�s novatos pueden entender los componentes JavaBeans. Esta estrategia tambi�n es f�cil desde el punto de vista de la manejabilidad, porque los componentes JavaBeans son los �nicos artefactos que hay que manejar y configurar.
<%@page
import="corepatterns.compositeview.beanhelper.ContentHelper" %>
<% ContentHelper personalizer = new
ContentHelper(request); %>
<table valign="top" cellpadding="30%" width="100%">
<% if (personalizer.hasWorldNewsInterest() ) { %>
<tr>
<td><jsp:getProperty name="feeder"
property="worldNews"/></td>
</tr>
<%
}
if ( personalizer.hasCountryNewsInterest() ) {
%>
<tr>
<td><jsp:getProperty name="feeder"
property="countryNews"/></td>
</tr>
<%
}
if ( personalizer.hasCustomNewsInterest() ) {
%>
<tr>
<td><jsp:getProperty name="feeder"
property="customNews"/></td>
</tr>
<%
}
if ( personalizer.hasAstronomyInterest() ) {
%>
<tr>
<td><jsp:getProperty name="feeder"
property="astronomyNews"/></td>
</tr>
<%
}
%>
</table>
�Standard Tag View Management
El control de la vista se implementa utilizando etiquetas JSP est�ndar, como <jsp:include>. Utilizar etiquetas est�ndar para manejar la distribuci�n y composici�n de las vistas es una estrategia f�cil de implementar, pero no proporciona el poder y la flexibilidad de la Estrategia de Control de Vista por Etiqueta Personalizada, ya que la distribuci�n de las p�ginas individuales permanece embebida dentro de esas p�ginas. As�, aunque esta estrategia permite variar din�micamente el contenido subyacente, cualquier cambio general en la distribuci�n requerir�a modificaciones individuales en muchas p�ginas JSP. Podemos verlo en el siguiente ejemplo:
<html>
<body>
<jsp:include
page="/jsp/CompositeView/javabean/banner.html"
flush="true"/>
<table width="100%">
<tr align="left" valign="middle">
<td width="20%">
<jsp:include
page="/jsp/CompositeView/javabean/ProfilePane.jsp"
flush="true"/>
</td>
<td width="70%" align="center">
<jsp:include
page="/jsp/CompositeView/javabean/mainpanel.jsp"
flush="true"/>
</td>
</tr>
</table>
<jsp:include
page="/jsp/CompositeView/javabean/footer.html"
flush="true"/>
</body>
</html>
Cuando se crea una vista compuesta utilizando etiquetas est�ndar, se puede incluir tanto contenido est�tico, ficheros HTML, como contenido din�mico, p�ginas JSP. Adem�s, el contenido se puede incluir en el momento de la traducci�n o durante la ejecuci�n. Si el contenido se incluye durante la traducci�n, la vista permanecer� sin modificada hasta que se recompile la p�gina JSP, momento en el que ser�n visibles las modificaciones incluidas en el contenido. En otras palabras, la p�gina se distribuye y genera una sola vez, cada vez que la p�gina JSP se recompila. El siguiente ejemplo, muestra una excepci�n de una p�gina JSP que genera una vista compuesta de esta manera, utilizando la directiva <%@ include %> est�ndar de JSP que incluye el contenido en tiempo de traducci�n..
<table border=1 valign="top" cellpadding="2%"
width="100%">
<tr>
<td><%@ file="news/worldnews.html" %> </td>
</tr>
<tr>
<td><%@ file="news/countrynews.html" %> </td>
</tr>
<tr>
<td><%@ file="news/customnews.html" %> </td>
</tr>
<tr>
<td><%@ file="news/astronomy.html" %> </td>
</tr>
</table>
La inclusi�n de contenido en tiempo de ejecuci�n significa que los cambios en las subvistas son visibles en la p�gina compuesta cada vez que el cliente accede a ella. Esto es mucho m�s din�mico y se puede conseguir utilizando la etiqueta <jsp:include> est�ndar de JSP, como se muestra en el siguiente ejemplo. Por supuesto que hay una sobrecarga del entorno de ejecuci�n asociada con este tipo de generaci�n de vistas, pero este es el incoveniente de mejorar la flexibilidad de las modificaciones de contenidos al-vuelo.
<table border=1 valign="top" cellpadding="2%"
width="100%">
<tr>
<td><jsp:include page="news/worldnews.jsp"
flush="true"/> </td>
</tr>
<tr>
<td><jsp:include page="news/countrynews.jsp"
flush="true"/> </td>
</tr>
<tr>
<td><jsp:include page="news/customnews.jsp"
flush="true"/> </td>
</tr>
<tr>
<td><jsp:include page="news/astronomy.jsp"
flush="true"/> </td>
</tr>
</table>
�Custom Tag View Management
El control de la vista se implementa mediante etiquetas personalizadas (JSP 1.1+), que es la estrategia preferida. La l�gica implementada dentro de la etiqueta controla la distribuci�n de la vista y la composici�n. Estas etiquetas son mucho m�s poderosas y flexibles que la etiqueta include est�ndar de JSP, pero tambi�n requiere un mayor nivel de esfuerzo. Las acciones personalizadas se pueden basar en la distribuci�n y composici�n de la p�gina o en otras cosas como los roles del usuario y las pol�ticas de seguridad.
Utilizar esta estrategia requiere mucho m�s trabajo que las otras estrategias de control de vista ya que el desarrollo de etiquetas personalizadas es m�s complicado que simplemente utilizar componentes JavaBeans o etiquetas est�ndar. No s�lo es m�s complicado el proceso de desarrollo, tambi�n hay mucha m�s complejidad en cuanto a la integraci�n y el manejo de las etiquetas generadas. La utilizaci�n de esta estrategia requiere la generaci�n de numerosos artefactos, incluyendo la propia etiqueta, un descriptor de librer�a de etiquetas, ficheros de configuraci�n, y configurar el entorno con estos artefactos.
El siguiente fragmento de p�gina JSP muestra una posible implementaci�n de esta estrategia.
<region:render
template='/jsp/CompositeView/templates/portal.jsp'>
<region:put section='banner'
content='/jsp/CompositeView/templates/banner.jsp' />
<region:put section='controlpanel' content=
'/jsp/CompositeView/templates/ProfilePane.jsp' />
<region:put section='mainpanel' content=
'/jsp/CompositeView/templates/mainpanel.jsp' />
<region:put section='footer' content=
'/jsp/CompositeView/templates/footer.jsp' />
</region:render>
�Transformer View Management
El control de la vista se implementa utilizando un Transformador XSL. Esta estrategia se complementar�a con la Estrategia de Control de Vista por Etiqueta Personalizada, utilizando etiquetas personalizadas para implementar y delegar en los componentes apropiados. Utilizar esta estrategia nos puede ayudar a reforzar las separaci�n entre el modelo y la vista, ya que muchas de las marcas de la vista se deben crear dentro de una hoja de estilos separada. Al mismo tiempo, implica tecnolog�as que requieren nuevas y sofisticadas habilidades para implementarlo correctamente, un problema que hace que esta estrategia sea impracticable en muchos entornos donde estas tecnolog�as no est�n a�n establecidas.
El siguiente fragmento muestra el uso de una etiqueta personalizada dentro de una p�gina JSP para convertir un modelo utilizando un hoja de estilo y un transformador:
<xsl:transform model="portfolioHelper" stylesheet="/transform/styles/generalPortfolio.xsl"/>
�Early-Binding Resource
Este es otro nombre para la inclusi�n de contenido durante la traducci�n, como se describe en la estrategia Control de Vista Mediate Etiqueta Est�ndar. Es apropiado para mantener y actualizar una plantilla relativamente est�tica y est� recomendado si una vista incluye cabeceras y pies de p�gina que no cambian muy a menudo.
�Late-Binding Resource
Este es otro nombre para la inclusi�n de contenido durante la traducci�n, como se describe en la estrategia Control de Vista Mediate Etiqueta Est�ndar. Es apropiada para p�ginas compuestras que podr�an cambiar con cierta frecuencia. Una advertencia: Si la subvista incluida en tiempo de ejecuci�n es un recurso din�mico, como una p�gina JSP, entonces �sta subvista tambi�n podr�a ser una vista compuesta, incluyendo m�s contenido en tiempo de ejecuci�n. La flexibilidad ofrecida por dichas estructuras anidadas deber�a pesar mucho m�s que la sobrecarga del entorno que va crear.
�Consecuencias
- Mejora la Modularidad y la Reutilizaci�n
Este patr�n promueve un dise�o modular. Es posible reutilizar porciones at�micas de una plantilla, como una tabla de consulta de stocks, en varias vistas y redecorar estas porciones reutilizadas con informaci�n diferente. Este patr�n permite que la tabla se mueva dentro de su propio m�dulo e incluirla simplemente donde sea necesario. Este tipo de distribuci�n y composici�n din�micos reduce la duplicaci�n, fuerza la reutilizaci�n y mejora la manejabilidad. - Mejora la Flexibilidad
Una implementaci�n sofisticada podr�a incluir condicionalmente fragmentos de plantillas de vista bas�ndose en decisiones en tiempo de ejecui�n, como los roles de usuario o las pol�ticas de seguridad. - Mejora el Mantenimiento y la Manejabilidad
Es mucho m�s eficiente manejar cambios en porciones de una plantilla cuando la plantilla no est� codificada directamente en las marcas de la vista. Cuando se mantienen separadas de la vista, es posible modificar prociones modulares del contenido de la plantilla independientemente de su distribuci�n. Adem�s, esos cambios est�n disponibles inmediatamente para los clientes, dependendiendo de la estrategia de implementaci�n. Las modificaciones en la distribuci�n de una p�gona tambi�n se maneja m�s f�cilmente, ya que los cambios est�n centralizados. - Reduce la Manejabilidad
Agregar piezas at�micas para mostrarlas juntas y crear una sola vista presenta algunos potenciales problemas de presentaci�n, ya que las subvistas son fragmentos de p�ginas. Esta es una limitaci�n que se puede convertir en un problema de manejabilidad. Por ejemplo, si una p�gina JSP est� generando una p�gina HTML utilizando una p�gina principal que incluye tres subvistas, y cada una de las subvistas incluye las etiquetas de apertura y cierre de HTML (es decir, <HTML> y </HTML>), entonces la p�gina compuesta no ser� v�lida. Por lo tanto, es importante cuando utilicemos este patr�n tener cuidado de que las subvistas no deben ser vistas completas. Se deben contabilizar estrictamente las etiquetas utilizadas para crear vistas compuestas v�lidas, y as� corregir este problema de manejabilidad. - Impacto en el Rendimiento
Generar una presentaci�n que incluye numerosas subvistas podr�a empeorar el rendimiento. La inclusi�n en tiempo de ejecuci�n de subvistas resultar� en un retardo cada vez que se sirva la p�gina a un cliente. En un entorno con Acuerdos de Nivel de Servicio que obligan a tiempos de respuesta espec�ficos, dichas bajadas de rendimiento, a�nque t�picamente sean m�nimas, podr�an no ser aceptables. Una alternativa es mover la inclusi�n de las subvistas al tiempo de la traducci�n, aunque esto limita a que las subvistas s�lo cambien cuando se re-traduce la p�gina.
�C�digo de Ejemplo
El patr�n de Vista Compuesta se puede implementar utilizando cualquier n�mero de estrategias, pero una de las m�s populares es la Estrategia de Control de Vista por Etiqueta Personalizada. De hecho, actualmente hay disponibles varias librer�as de etiquetas personalizadas para implementar vistas compuestas que separan las distribuci�n de la vista de su contenido y proporciona plantillas de subvistas modulares y conectables.
Este ejemplo utilizar� una librer�a de plantillas escrita por David Geary.
La librer�a template describe tres componentes b�sicos: secciones, regiones y plantillas:
- Una seccion es un componente reutilizable que representa HTML o una p�gina JSP.
- Una regi�n describe contenido definiendo secciones.
- Una plantilla controla la distribuci�n de la regiones y secciones en una p�gina.
Aqu� podemos ver una regi�n y sus secciones
<region:render template='portal.jsp'>
<region:put section='banner' content = 'banner.jsp' />
<region:put section = 'controlpanel' content =
'ProfilePane.jsp' />
<region:put section='mainpanel' content =
'mainpanel.jsp' />
<region:put section='footer' content='footer.jsp' />
</region:render>
Una regi�n define su contenido correspondiendo nombres de secciones l�gicas con una porci�n de contenido, como banner.jsp.
La distribuci�n de la regi�n y sus secciones est� definida por una plantilla, a la que se asocia cada regi�n. En este caso, la plantilla se llama portal.jsp, como se define en el siguiente ejemplo:
<region:render section='banner'/>
<table width="100%">
<tr align="left" valign="middle">
<td width="20%">
<!-- menu region -->
<region:render section='controlpanel' />
</td>
<td width="70%" align="center">
<!-- contents -->
<region:render section='mainpanel' />
</td>
</tr>
</table>
Un site con varias vistas y una sola distribuci�n cosistente tiene un p�gina JSP que contiene c�digo que ser� similar a la definici�n del ejemplo anterior, y muchas p�ginas JSP que ser�n similares al primer fragmento de c�digo de esta secci�n, que definen regiones y secciones alternativas.
Las secciones son fragmentos de p�ginas JSP que se utilizan como subvistas para construir una vista completa seg�n se define en la plantilla. Abajo podemos ver la secci�n banner.jsp:
<table width="100%" bgcolor="#C0C0C0">
<tr align="left" valign="middle">
<td width="100%">
<TABLE ALIGN="left" BORDER=1 WIDTH="100%">
<TR ALIGN="left" VALIGN="middle">
<TD>Logo</TD>
<TD><center>Sun Java Center</TD>
</TR>
</TABLE>
</td>
</tr>
</table>
Las vistas compuestas son una forma modular, flexible y extensible de construir vistas de p�ginas JSP para nuestras aplicaciones J2EE.
�Patrones Relacionados
- View Helper
El patr�n de vista compuesta se podr�a utilizar como la vista del patr�n View Helper. - Composite [GoF]
El patr�n de Vista Compuesta est� basado en el patr�n Composite, que describe las herencias parte-totalidad cuando un objeto compuesto se compone de varias piezas, todas ellas tratadas como equivalente l�gicos.