Páginas mestras
pela Microsoft
Um dos principais componentes para um site bem-sucedido é uma aparência consistente. No ASP.NET 1.x, os desenvolvedores usavam controles de usuário para replicar elementos comuns de página em um aplicativo Web. Embora essa seja certamente uma solução viável, usar controles de usuário tem algumas desvantagens. Por exemplo, uma alteração na posição de um controle de usuário requer uma alteração em várias páginas em um site. Os controles de usuário também não são renderizados no modo Design depois de serem inseridos em uma página.
Um dos principais componentes para um site bem-sucedido é uma aparência consistente. No ASP.NET 1.x, os desenvolvedores usavam controles de usuário para replicar elementos comuns de página em um aplicativo Web. Embora essa seja certamente uma solução viável, usar controles de usuário tem algumas desvantagens. Por exemplo, uma alteração na posição de um controle de usuário requer uma alteração em várias páginas em um site. Os controles de usuário também não são renderizados no modo Design depois de serem inseridos em uma página.
ASP.NET 2.0 apresenta páginas mestras como uma forma de manter uma aparência consistente e, como você verá em breve, as páginas mestras representam uma melhoria significativa em relação ao método de controle do usuário.
Por que páginas mestras?
Talvez você esteja se perguntando por que master páginas foram necessárias no ASP.NET 2.0. Afinal, os desenvolvedores de sites já estão usando controles de usuário no ASP.NET 1.x para compartilhar áreas de conteúdo entre páginas. Na verdade, há vários motivos pelos quais os controles de usuário são uma solução menos que ideal para criar um layout comum.
Os controles de usuário não definem o layout da página. Em vez disso, eles definem o layout e a funcionalidade de uma parte de uma página. A distinção entre esses dois é importante porque torna a capacidade de gerenciamento de uma solução de controle do usuário muito mais difícil. Por exemplo, quando você deseja alterar a posição de um controle de usuário em sua página, você deve editar a página real na qual o controle de usuário aparece. Isso é bom se você tiver apenas algumas páginas, mas em sites grandes, isso rapidamente se tornará um pesadelo de gerenciamento de sites!
Outra desvantagem do uso de controles de usuário para definir um layout comum tem raiz na arquitetura do próprio ASP.NET. Se qualquer membro público de um controle de usuário for alterado, ele exigirá que você recompile todas as páginas que usam o controle de usuário. Por sua vez, ASP.NET re-JIT suas páginas quando elas forem acessadas pela primeira vez. Isso, mais uma vez, produz uma arquitetura não escalonável e um problema de gerenciamento de site para sites maiores.
Ambos os problemas (e muitos mais) são bem resolvidos por páginas master no ASP.NET 2.0.
Como funcionam as Páginas Mestras
Uma página master é análoga a um modelo para outras páginas. Os elementos de página que devem ser compartilhados entre outras páginas (ou seja, menus, bordas etc.) são adicionados à página master. Quando novas páginas são adicionadas ao site, você pode associá-las a uma página master. Uma página associada a uma página master é chamada de página de conteúdo. Por padrão, uma página de conteúdo assume a aparência da página master. No entanto, ao criar uma página master, você pode definir partes da página que a página de conteúdo pode substituir pelo próprio conteúdo. Essas partes são definidas usando um novo controle introduzido no ASP.NET 2.0; o controle ContentPlaceHolder .
Uma página master pode conter qualquer número de controles ContentPlaceHolder (ou nenhum.) Na página de conteúdo, o conteúdo dos controles ContentPlaceHolder aparece dentro de Controles de conteúdo, outro novo controle no ASP.NET 2.0. Por padrão, as páginas de conteúdo Controles de conteúdo estão vazios para que você possa fornecer seu próprio conteúdo. Se você quiser usar o conteúdo da página master dentro dos controles de conteúdo, poderá fazê-lo como verá posteriormente neste módulo. O controle Conteúdo é mapeado para o controle ContentPlaceHolder por meio do atributo ContentPlaceHolderID do controle Content. O código abaixo mapeia um controle Content para um controle ContentPlaceHolder chamado mainBody em uma página master.
<asp:Content ID="Content1" ContentPlaceHolderID="mainBody" Runat="Server">
Observação
Muitas vezes, você ouvirá as pessoas descreverem master páginas como sendo uma classe base para outras páginas. Isso não é verdade. A relação entre master páginas e páginas de conteúdo não é de herança.
A Figura 1 mostra uma página master e uma página de conteúdo associada conforme elas aparecem no Visual Studio 2005. Você pode ver o controle ContentPlaceHolder na página master e o controle conteúdo correspondente na página de conteúdo. Observe que o conteúdo de páginas master que está fora do ContentPlaceHolder está visível, mas esmaecido na página de conteúdo. Somente o conteúdo dentro do ContentPlaceHolder pode ser suplantado pela página de conteúdo. Todo o outro conteúdo proveniente da página master é imutável.
Figura 1: uma página master e sua página de conteúdo associada
Criando uma página mestra
Para criar uma nova página de master:
- Abra o Visual Studio 2005 e crie um novo site.
- Clique em Arquivo, Novo, Arquivo.
- Escolha Arquivo Mestre na caixa de diálogo Adicionar Novo Item, conforme mostrado na figura 2.
- Clique em Adicionar.
Figura 2: Criando uma nova página mestra
Observe que a extensão de arquivo de uma página de master é .master. Essa é uma das maneiras pelas quais uma página de master difere de uma página comum. A outra diferença principal é que, em vez de uma @Page diretiva, a página master contém uma @Master diretiva. Alterne para o Modo de Exibição de Origem para a página master que você acabou de criar e examine o código.
Uma nova página master terá um controle ContentPlaceHolder por padrão. Na maioria dos casos, faz mais sentido criar os elementos comuns da página primeiro e, em seguida, inserir controles ContentPlaceHolder onde o conteúdo personalizado é desejado. Nesses casos, os desenvolvedores desejarão excluir o controle ContentPlaceHolder padrão e inserir novos conforme a página é desenvolvida. Os controles ContentPlaceHolder não são redimensionáveis, apesar de exibirem identificadores de dimensionamento. O controle ContentPlaceHolder é dimensionado automaticamente com base no conteúdo que ele contém com uma exceção; se você colocar um controle ContentPlaceHolder dentro de um elemento de bloco, como uma célula de tabela, ele será dimensionado de acordo com o tamanho do elemento.
Laboratório 1 Trabalhando com Páginas Mestras
Neste laboratório, você criará uma nova página master e definirá três controles ContentPlaceHolder. Em seguida, você criará uma nova página conteúdo e substituirá o conteúdo de pelo menos um dos controles ContentPlaceHolder.
Crie uma página de master e insira controles ContentPlaceHolder.
- Crie uma nova página de master conforme descrito acima.
- Exclua o controle ContentPlaceHolder padrão.
- Selecione o controle ContentPlaceHolder clicando na borda superior sombreada do controle e exclua-o pressionando a tecla DEL no teclado.
- Insira uma nova tabela usando o cabeçalho e o modelo lateral, conforme mostrado na figura 3. Altere a largura e a altura para 90% cada para que toda a tabela fique visível no designer.
Figura 3
- Coloque o cursor em cada célula da tabela e defina a propriedade valign como superior.
- Na Caixa de Ferramentas, insira um controle ContentPlaceHolder na célula superior da tabela (a célula de cabeçalho).)
- Ao inserir esse controle ContentPlaceHolder, você observará que a altura da linha ocupará quase toda a página, conforme mostrado na figura 4. Não se preocupe com isso neste momento.
Figura 4: o espaço vazio está na mesma célula que o ContentPlaceHolder
- Coloque um controle ContentPlaceHolder nas outras duas células. Depois que os outros controles ContentPlaceHolder tiverem sido inseridos, o tamanho das células da tabela deverá ser o esperado. A página agora deve se parecer com a página mostrada na figura 5.
Figura 5: o Mestre com todos os controles ContentPlaceHolder. Observe que a altura da célula para a célula de cabeçalho agora é o que ela deve ser
- Insira algum texto de sua escolha em cada um dos três controles ContentPlaceHolder.
- Salve a página master como exercise1.master.
- Crie um novo Web Form e associe-o ao exercício1. master master página.
- Selecione Arquivo, Novo, Arquivo no Visual Studio 2005.
- Selecione Formulário da Web na caixa de diálogo Adicionar Novo Item.
- Verifique se a caixa de seleção Selecionar master página está marcada conforme mostrado na figura 6.
Figura 6: Adicionando uma nova página de conteúdo
- Clique em Adicionar.
- Selecione exercise1. master na caixa de diálogo Selecionar uma página master, conforme mostrado na figura 7.
- Clique em OK para adicionar a nova página de conteúdo.
A nova página de conteúdo aparece no Visual Studio com um Controle de conteúdo para cada controle ContentPlaceHolder na página master. Por padrão, os controles de Conteúdo estão vazios para que você possa adicionar seu próprio conteúdo. Se você quiser que eles usem o conteúdo do controle ContentPlaceHolder na página master, basta clicar no símbolo de marca inteligente (a pequena seta preta no canto superior direito do controle) e escolher Padrão para Conteúdo Mestre na marca inteligente, conforme mostrado na figura 8. Quando você faz isso, o item de menu é alterado para Criar Conteúdo Personalizado. Clicar nele nesse ponto remove o conteúdo da página master, permitindo que você defina conteúdo personalizado para esse controle de Conteúdo específico.
Figura 7: Definindo um controle de conteúdo como Padrão para o conteúdo de Páginas Mestras
Conectando página mestra e páginas de conteúdo
A associação entre uma página master e uma página de conteúdo pode ser configurada de uma das quatro maneiras diferentes:
- O atributo MasterPageFile da @Page diretiva
- Definindo a propriedade Page.MasterPageFile no código.
- O <elemento pages> no arquivo de configuração de aplicativos (web.config na pasta raiz do aplicativo)
- O elemento pages em um arquivo de configuração de subpastas (web.config em uma subpasta>)<
Atributo MasterPageFile
O atributo MasterPageFile facilita a aplicação de uma página master a uma página ASP.NET específica. Também é o método usado para aplicar a página master quando você marcar caixa de seleção Selecionar Página Mestra como fez no Exercício 1.
Definindo Page.MasterPageFile em código
Ao definir a propriedade MasterPageFile no código, você pode aplicar uma página de master específica ao seu conteúdo em runtime. Isso é útil nos casos em que talvez seja necessário aplicar uma página de master específica com base em uma função de usuários ou em alguns outros critérios. A propriedade MasterPageFile deve ser definida no método PreInit. Se ele for definido após o método PreInit, um InvalidOperationException será gerado. A página na qual essa propriedade está sendo definida também deve ter um controle Content como o controle de nível superior para a página. Caso contrário, uma HttpException será gerada quando a propriedade MasterPageFile for definida.
Usando o <elemento pages>
Você pode configurar uma página de master para suas páginas definindo o atributo masterPageFile no <elemento pages> do arquivo web.config. Ao usar esse método, tenha em mente que web.config arquivos inferiores na estrutura do aplicativo podem substituir essa configuração. Qualquer atributo MasterPageFile definido em uma @Page diretiva também substituirá essa configuração. O uso do <elemento pages> simplifica a criação de uma página master master que pode ser substituída, se necessário, em pastas ou arquivos específicos.
Propriedades em Páginas Mestras
Uma página master pode expor propriedades simplesmente tornando essas propriedades públicas na página master. Por exemplo, o código a seguir define uma propriedade chamada SomeProperty:
private string _SomeProperty; public string SomeProperty { get { return _SomeProperty; } set { _SomeProperty = value; } }
Para acessar a propriedade SomeProperty na página Conteúdo, você precisará usar a propriedade Master da seguinte maneira:
void Page_Load() { Master.SomeProperty = "Master Page Property"; }
Aninhando páginas mestras
As páginas mestras são a solução perfeita para garantir uma aparência comum em um aplicativo Web grande. No entanto, não é incomum que determinadas partes de um site grande compartilhem uma interface comum enquanto outras partes compartilham uma interface diferente. Para atender a essa necessidade, várias master páginas são a solução perfeita. No entanto, isso ainda não aborda o fato de que um aplicativo grande pode ter determinados componentes (como um menu, por exemplo) que são compartilhados entre todas as páginas e outros componentes que são compartilhados apenas entre determinadas seções do site. Para esse tipo de situação, páginas aninhadas master preenchem bem a necessidade. Como você viu, uma página de master normal consiste em uma página master e uma página de conteúdo. Em uma situação de página de master aninhada, há duas páginas master: uma master pai e uma master filho. A página de master filho também é uma página de conteúdo e sua master é a página de master pai.
Este é o código para uma página de master típica:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="parent.master.cs" Inherits="parent" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Typical Master Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="MainMenuContent" runat="server" /> </div> </form> </body> </html>
Em um cenário de master aninhado, esse seria o master pai. Outra página master usaria esta página como sua página master e esse código teria esta aparência:
<%@ Master Language="C#" MasterPageFile="~/parent.master" AutoEventWireup="true" CodeFile="child.master.cs" Inherits="child" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainMenuContent" Runat="Server"> <span>From the Child Master.</span> <asp:contentplaceholder id="ChildPlaceHolder1" runat="server" /> </asp:Content>
Observe que, nesse cenário, o master filho também é uma página de conteúdo para o master pai. Todo o conteúdo do master filho aparece dentro de um controle Content que obtém seu conteúdo do controle ContentPlaceHolder pai.
Observação
Designer suporte não está disponível para páginas de master aninhadas. Ao desenvolver usando mestres aninhados, você precisará usar a exibição de origem.
Este vídeo mostra um passo a passo do uso de páginas de master aninhadas.
Figura 8: Selecionando uma página mestra