Sabemos que uma intenção (confessada) de GeneXus é liberar o analista das tarefas automatizáveis, deixando-lhe mais tempo para analisar. As Master Pages estão alinhadas com essa política, facilitando a tarefa de desenvolvimento de aplicações web.

No desenho destas aplicações existem certas características comuns a todos os objetos da aplicação que hoje estamos repetindo em cada um deles. Nos referimos a: Header, Menu, Footer, Área de dados (Content Placeholder), Theme e outros segundo o site.

O conceito de Master Page é centralizar estas características e aplicá-las de forma automática a todos os WebPanels relacionados a mesma.

Diferenças entre usar "Master Pages" (MP) e "WebComponents" (WC)

Imaginemos uma mesma aplicação web feita com MP ou com WC.

1) Usando MP. A aplicação contaria com um único MasterPage onde estão definidos os elementos de: menu, header, footer, área de dados. Também nessa única página está definido o controle de usuários. Os outros web panels da aplicação serão ativados na área de dados (Content PlaceHolder) do MP. Portanto, não é necessário que contenham menu, header, footer. Também não necessitam duplicar o controle de acesso já que por estar relacionados a um MP não podem ser invocados diretamente, sempre aparecem no content Placeholder do mesmo.

2) Usando WC. Cada um dos web panels da aplicação teria definidos: menu, header, footer e área de dados. Cada um dos web panels necessita duplicar o controle de acesso.

Um exemplo do desenho de uma Master Page se aprecia na Figura 1.

 Fig.1. Exemplo de uma Master Page

Como verão, o "Header" e o "Menu" são "WebComponents" e o "Footer" pode ser um texto em uma tabela dentro da Master Page.

Implementando nossa primeira Master Page

Como todo objeto novo, dentro de GeneXus 9.0 nos dirigimos a "Object/New Object" ou Ctrl-N. Aqui selecionamos o tipo de "WebPanel" e complementamos os dados restantes como o Nome e a Descrição (Figura 2).

 Fig.2- Criação de uma Master Page

Depois dentro do WebPanel, especificamos em suas propriedades que é do tipo "Master Page". Observamos que ao selecionar o valor "Master Page" desaparece a propriedade "Main Program". Isto sucede porque os Master Pages sempre são main.

 Fig.3- Indicar que o WebPanel é uma Master Page

Depois trabalhamos o webpanel, em nosso caso, diferenciamos com uma tabela, Cabeçalho, Conteúdo e Pé de página, e com outra tabela, dividimos o conteúdo para ter um menu -> esquerda.

Logo em seguida, inserimos os WebComponents nos lugares correspondentes e o novo componente "Content Placeholder" na área de conteúdo:

 Fig.4- Exemplo prático de uma Master Page

Desta maneira já temos nosso primeiro objeto Master Page. De todas maneiras neste exemplo, será necessário criar dois WebComponents, um para o Cabeçalho e outro para o Menu.

Utilizando nossa Master Page

Para poder utilizar nossa MasterPage, devemos seguir os seguintes passos:

1- Criar ou abrir um WebPanel.

2- Abrir a folha de propriedades e selecionar na propriedade "MasterPage", a MasterPage associada ao mesmo. No nosso caso "MainMP".

Para exemplificar este passo e ajudar nosso exemplo, criaremos dois WebPanel, um chamado "Pagel" e outro chamado "Page2", os quais vincularemos a nossa Master Page (Figura 5). Depois indicamos ao WebPane "Page1" que seja um objeto "Main".

 Fig.5- Vinculando um WebPanel a uma Master Page

Implementando objetos associados ao MasterPage

Para que nosso exemplo prático esteja completo, criaremos os objetos necessários para que o mesmo seja funcional. Criando o WebCompnent "WcHeader" que será o nosso cabeçalho.

 Fig.6- Criação do WebComponent "WcHeader"

Fig.7-  Indicando a propriedade de Componente

Criando o WebComponent "WcMenu" que será nosso menu

1- Repetimos os passos 1 e 2 da criação do objeto "WcHeader", mas indicando o nome "WcMenú.

2- Criamos uma tabela de 1 coluna e 2 filas a qual oficiará de menu.

3- Na célula no.1, acrescentaremos um "TextBlock" com o nome "tbOpc1" e descrição "Página 1".

4- Na célula no.2, acrescentaremos um "TextBlock" com o nome "tbOpc2" e descrição "Página 2".

5- Nos eventos, acrescentaremos o seguinte código para que os "TextBlock" chamem as correspondentes páginas criadas na seção "Utilizando nossa Master Page".

Event tbOpc1.Click

call(HPage1)

EndEvent // tbOpc1.Click

Event tbOpc2.Click

call(HPage2)

EndEvent // tbOpc1.Click

Para finalizar com o exemplo, deve-se vincular os WebComponents "WCHeader" e "WCMenu" da Master Page "MainMP" a seus correspondentes "WcHeader" e "WcMenu" com a propriedade "Object" dos WebComponents (Figura 9).

 Fig.9- Vinculando o componente "WcMenu".

Seqüência de execução de Eventos em uma Master Page

1- Evento "Start" da Master Page.

2- Evento "Start" do WebPanel.

3- Evento "Refresh" e "Load" da Master Page.

4- Evento "Load" do WebPanel.

5- Outros eventos.

Este exemplo foi provado em um modelo .Net e se encontra disponível para descarregar no vínculo

http://www.gxopen.com/gxopen/servlet/hproject?506 em GxOpen.com

Referências