We know that a (confessed) intention of GeneXus is freeing the analyst from automatable tasks, leaving more time for analysis. Master Pages are aligned with that policy, simplifying the task of developing web applications.

In the design of these applications there are certain common characteristics for all the objects of the applications which up till now we have to repeat in each one of them. We are talking about: Header, Menu, Footer, Data Area (Content Placeholder), Theme and others depending on the site.

The concept of Master Page is centralizing these characteristics and applying them automatically to all the WebPanels related to it.

Differences between using "Master Pages" (MP) and "WebComponents" (WC)

Let's imagine the same application made with MP or with WC.

1- Using MP. The application would have a single MasterPage, where the following elements are defined: menu, header, footer, data area. The user control is also defined in that single page. The other web panels of the application will be displayed in the data area (Content PlaceHolder) of the MP. Therefore it is not necessary for them to contain menu, header, footer. It is also unnecessary to duplicate the access control since they are related to an MP and therefore they cannot be called directly; they always appear in its Content Placeholder.

2- Using WC. For each of the web panels of the application, the following would be defined: menu, header, footer, data area. Each of the web panels needs to duplicate the access control.

An example of the design of a Master Page can be seen in Figure 1.

Fig.1. Master Page Sample

As you see, the "Header" and the "Menu" are "WebComponents" and the "Footer" can be a text in a table within the Master Page.

Implementing our first Master Page

As any new object, within GeneXus 9.0 we go to "Object/New Object" or Ctrl-N. Here we select the "WebPanel" type and we fill the remaining data such as Name and Description (Figure 2).

Fig.2- Creation of a Master Page

Then within the WebPanel we specify in its properties that it is "Master Page" type. Note that when we select the "Master Page" value, the "Main Program" property disappears. This is so because Master Pages are always main.

Fig.3- Indicate that the WebPanel is a Master Page

Then we work on the webpanel; in our case, we differentiate with one table Header, Content and Footer and with another table, we divide the content so we have a menu on the left.

After this, we insert the WebComponents in the corresponding places and the new "Content Placeholder" component in the content area:

Fig.4- Practical example of a Master Page

This way we have our new first Master Page object. Anyway in this example, we will have to create two WebComponents, one for the Header and another one for the Menu.

Using our Master Page
In order to use our MasterPage, we have to follow these steps:
1- Creating or opening a WebPanel.
2- Open the property sheet and select in the "MasterPage" property, the MasterPage associated to it. In our case, "MainMP".

To exemplify this step and help our example, we'll create two WebPanels, one called "Page1" and another called "Page2", which we will link to our Master Page (Figure 5). Then, we indicate for the "Page1" WebPanel to be a "Main" object.

Fig.5- Linking a WebPanel to a Master Page

Implementing MasterPage-associated objects

For our practical example to be complete, we will create the necessary objects so that it becomes functional. Creating the"WcHeader" WebComponent which will be our header

1- We first go to "Object/New Object" and we fill in the creation data.

Fig.6- Creation of the "WcHeader" WebComponent

2- In the new object's properties we set it as a WebComponent.

Fig.7- Setting the Component property

3- We add a centered heading, in our example: "GxOpen.com"

Creating the "WcMenur" WebComponent which will be our menu
1- We repeat steps 1 and 2 of the creation of the "WcHeader" object but we indicate the name: "WcMenu".
2- We create a table of 1 column and 2 rows which will work as a menu.
3- In cell no.1, we add a "TextBlock" with the name "tbOpc1" and the description "Page 1".
4- In cell no.2, we add a "TextBlock" with the name "tbOpc2" and the description "Page 2".
5- In the events, we add the following code so that the "TextBlocks" call the corresponding pages created in the section "Using our Master Page":

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

To end the example, the "WCHeader" and "WCMenu" WebComponents of the "MainMP" Master Page have to be linked to their corresponding "WcHeader" and "WcMenu" with the "Object" property of the WebComponents (Figure 8).

Fig.8- Linking the "WcMenu" component.

Event execution sequence in a Master Page
1- "Start" Event of the Master Page.
2- "Start" Event of the WebPanel.
3- "Refresh" and "Load" Events of the Master Page.
4- "Load" Event of the WebPanel.
5- Other events.

This example was tested on a .Net model and is available for download from the link 
http://www.gxopen.com/gxopen/servlet/hproject?506 en GxOpen.com   

References 
http://wiki.gxtechnical.com/wiki/tiki-index.php?page=MasterPages 

rPages