Sabemos que una intención (confesada) de GeneXus es liberar al analista de las tareas automatizables, dejándole más tiempo para analizar. Las Master Pages están alineadas con esa política, facilitando la tarea de desarrollo de aplicaciones web.

En el diseño de estas aplicaciones hay ciertas características comunes a todos los objetos de la aplicación que hoy estamos repitiendo en cada uno de ellos. Nos referimos a: Header, Menu, Footer, Area de datos (Content Placeholder), Theme y otros según el sitio.

El concepto de Master Page es centralizar esas características y aplicarlas de forma automática a todos los WebPanels relacionados a la misma.

Diferencias entre usar "Master Pages" (MP) y "WebComponents" (WC)

Imaginemos una misma aplicación web hecha con MP o con WC.

1) Usando MP. La aplicación contaría con un único MasterPage donde están definidos los elementos de: menú, header, footer, área de datos. También en esa única página está definido el control de usuarios. Los demás web panels de la aplicación serán desplegados en el área de datos (Content PlaceHolder) del MP. Por lo tanto no es necesario que contengan menú, header, footer.Tampoco necesitan duplicar el control de acceso ya que por estar relacionados a un MP no pueden ser invocados directamente, siempre aparecen en el content Placeholder del mismo.

2) Usando WC. Cada uno de los web panels de la aplicación tendría definidos: menú, header, footer y área de datos. Cada uno de los web panels necesita duplicar el control de acceso.

Un ejemplo del diseño de una Master Page se aprecia en la Figura 1.

Fig.1. Ejemplo de una Master Page

Como verán, el "Header" y el "Menú" son "WebComponents" y el "Footer" puede ser un texto en una tabla dentro de la Master Page.

Implementando nuestra primer Master Page
Como todo objeto nuevo, dentro de GeneXus 9.0 nos dirigimos a "Object/New Object" o Ctrl-N. Aquí seleccionamos el tipo "WebPanel" y completamos los datos restantes como ser Nombre y Descripción (Figura 2).

Fig.2- Creación de una Master Page

Luego dentro del WebPanel, especificamos en sus propiedades que es del tipo "Master Page". Observemos que al seleccionar el valor "Master Page" desaparece la propiedad "Main Program". Esto sucede porque los Master Pages siempre son main.

Fig.3- Indicar que el WebPanel es una Master Page

Luego trabajamos el webpanel, en nuestro caso, diferenciamos con una tabla, Cabeza, Contenido y Pie de página, y con otra tabla, dividimos el contenido para tener un menú a la izquierda.

Seguido a esto, insertamos los WebComponents en los lugares correspondientes y el nuevo componente "Content Placeholder" en el área de contenido:

Fig.4- Ejemplo práctico de una Master Page

De esta manera ya tenemos nuestro primer objeto Master Page. De todas maneras en este ejemplo, será necesario crear dos WebComponents, uno para el Cabezal y otro para el Menú.

Utilizando nuestra Master Page
Para poder utilizar nuestra MasterPage, debemos seguir los siguientes pasos:

1- Crear o abrir un WebPanel.
2- Abrir la hoja de propiedades y seleccionar en la propiedad "MasterPage", la MasterPage asociada al mismo. En nuestro caso "MainMP".

Para ejemplificar este paso, y ayudar a nuestro ejemplo, crearemos dos WebPanel, uno llamado "Page1" y otro llamado "Page2", los cuales vincularemos a nuestra Master Page (Figura 5). Luego, indicamos al WebPanel "Page1" que sea un objeto "Main".

Fig.5- Vinculando un WebPanel a una Master Page

Implementando objetos asociados al MasterPage
Para que nuestro ejemplo práctico esté completo, crearemos los objetos necesarios para que el mismo sea funcional. Creando el WebComponent "WcHeader" que será nuestro cabezal

1-  Primer vamos a "Object/New Object" y completamos los datos de creación.

Fig.6- Creación del WebComponent "WcHeader"

2- En las propiedades del nuevo objeto indicamos que se trata de un WebComponent.

Fig.7-  Indicando la propiedad de Componente

3- Le agregamos un título centrado, en nuestro ejemplo: "GxOpen.com"

Creando el WebComponent "WcMenu" que será nuestro menú

1- Repetimos los pasos 1 y 2 de la creación del objeto "WcHeader" pero indicando el nombre "WcMenú.
2- Creamos una tabla de 1 columna y 2 filas la cual oficiará de menú.
3- En la celda no.1, agregamos un "TextBlock" con el nombre "tbOpc1" y descripción "Pagina 1".
4- En la celda no.2, agregamos un "TextBlock" con el nombre "tbOpc2" y descripción "Pagina 2".
5- En los eventos, agregaremos el siguiente código para que los "TextBlock" llamen a las correspondientes páginas creadas en la sección "Utilizando nuestra Master Page":

Event tbOpc1.Click
call(HPage1)
EndEvent // tbOpc1.Click
Event tbOpc2.Click
call(HPage2)
EndEvent // tbOpc1.Click

Fig.9- Vinculando el componente "WcMenu".

Secuencia de ejecución de Eventos en una Master Page
1- Evento "Start" de la Master Page.
2- Evento "Start" del WebPanel.
3- Evento "Refresh" y "Load" de la Master Page.
4- Evento "Load" del WebPanel.
5- Otros eventos.

Este ejemplo fue probado en un modelo .Net y se encuentra disponible para descargar desde el vinculo 
http://www.gxopen.com/gxopen/servlet/hproject?506 en GxOpen.com