Composite View
Contexto
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.
Tutoriales
