Enriquecendo o visual de seu site com Master Pages, Temas e Skins – Parte 1

Boa parte dos web developers iniciantes (a grande maioria deles) tem um grande problema: construir layout’s bem elaborados, funcionais e principalmente, bonitos.

Atualmente temos vários recursos para criar interfaces ricas, sendo que o principal destes recursos é o CSS (Cascading Style Sheet). Soma-se ao CSS programas de editoração gráfica  como Adobe Photoshop, Pantone Corel Draw, etc., desenvolvedores vêem suas possibilidades (de criação de interfaces ricas) amplamente extendidas.

Agora, imagine se você pudesse reunir todos estes já conhecidos recursos em uma página e ainda dizer que esta página será a página padrão para todo seu site, de forma que qualquer alteração em um elemento desta página padrão se refletirá em todas as páginas de seu site. Bacana não? Imagine ainda, poder separar seu site em partes e, quando for conveniente, reunir estas partes nesta página padrão? Muito bacana certo? Imagine agora, um recurso que permita ao usuário interagir com o layout, ou seja, não gostei da cor verde do layout mas gostaria se fosse azul e, simplesmente, ao selecionar “Azul” em um Drop Down List, por exemplo, todo seu layout mudasse para a cor que o usuário escolheu. Extremamente bacana certo? Agora, pra fechar a idéia, imagine se isso tudo estivesse encapsulado dentro de um único ambiente? Pois é, isso existe! A plataforma .NET implementa nativamente todos estes recursos aos quais nos referimos através de: Master Pages, Temas, Skins e Web User Controls.

Este artigo apresenta como podemos criar um site (na prática) com bom padrão visual utilizando os recursos citados acima.

Entendendo e Trabalhando com Master Pages

Master Pages são páginas padrão, ou seja, uma vez definida sua estrutura, podemos dizer que todas as demais páginas de nosso website seguirão a estrutura definida na Master. Assim, quaisquer modificações de layout necessárias, são realizadas na Master e, em cascata, são apliacadas as demais páginas. Master Pages nos permitem implementar o conceito de “Herança Visual”, ou seja, visualmente o usuário enxergará o mesmo padrão visual para páginas com conteúdos diferentes.

Criando Master Pages

1. Abra o Visual Studio 2010
2. Clicar no menu File > New > Project > ASP.NET Empty Application;

A Figura 1 apresenta o processo descrito acima.

Figura 1: Criando um projeto no Visual Studio 2010

3. Botão direito no nome do projeto > Add > New Item… > Na guia Web selecione Master Page e nomeie a página convenientemente.

A Figura 2 apresenta o processo descrito acima.

Figura 2: Adicionando uma Master Page ao projeto

Ao final deste processo sua Server Explorer deverá estar parecida com a Figura 3.

Figura 3: Solution Explorer com a Master Page criada

Vá até a Solution Explorer e dê um duplo clique sobre o arquivo com a extensão .master. Caso a página abra em modo Design alterne para modo Code para que possamos analisar a estrutura do arquivo.

Ao analisarmos o fonte de uma Master Page podemos facilmente notar que, sua estrutura é rigorosamente a mesma de uma página ASP.NET convencional, salvo duas excessões – seu cabeçalho e o componente Content Place Holder. No cabeçalho podemos encontrar a linha apresentada ma Listagem 1:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="MasterPages_Temas_Skins.MasterPage" %>

Listagem 1: Cabeçalho de uma página Master

Note que o bloco <%@ Master indica que esta página está registrada para o compilador como Master Page, fato este que a diferencia de páginas convencionais do ASP.NET.

Portanto, páginas que derivarem dela, terão suas mesmas funcionalidades e, além disso, Master Pages não podem ser utilizadas como páginas ASP.NET comuns, ou seja, ela apenas tem a função de uma “Página Base” para que outras derivem dela. Outra característica fundamental das Master Pages que as diferenciam das demais é o componente Content Place Holder (CPH). Basicamente, o Content Place Holder tem a função de reservar determinada área dentro da Master Page para que as páginas que derivarem dela possam escrever seus conteúdos customizados. Sem o CPH é impossível que outras páginas publiquem seus conteúdos com a Master Page.

Customizando a Master Page

Como foi mencionado na introdução deste artigo, as Master Pages (e devem) ser customizadas. Podemos então utilizar todos os recursos que as ferramentas de Design nos proporcionam. Para este exemplo, iremos criar uma página simples, utilizando apenas os conceitos de HTML, CSS e algumas imagens. Vale lembrar que, ao customizarmos nossa Master Page não podemos remover o componente CPH. Portanto, para que não corramos este risco, selecione a região do CPH no fonte da página, pressione CTRL + R. Em seguida, abra o Bloco de Notas (ou outro editor de textos qualquer) e cole (CTRL + V) a região copiada neste arquivo. Salve-a e deixe lá até o momento de sua utilização.

A Listagem 2 apresenta a estrutura do HTML de nossa Master Page.

Listagem 2: Estrutura HTML da Master Page

O resultado da Listagem 2 pode ser visualizado na Figura 4.

Figura 4: Visualização do HTML da Master Page

Como é possível notar, o layout está subdividido em 3 linhas, sendo que na linha do meio, o container (div) está subdivido em duas colunas. A coluna da esquerda é onde posicionaremos nosso menu de navegação e o container da direita é onde apresentaremos o conteúdo. A Listagem 3 apresenta a folha de estilos parcial para deixar o Master Page com o aspecto da Figura 4.

body { background-color:White; }

#BoxGeral { width:980px; padding:10px; margin-left:auto; margin-right:auto; display:inline-block; border:1px solid #000; }

#BoxGeral #BoxCabecalho { width:100%; height:150px; float:left; background-image:url('head_preto_master.jpg'); }

#BoxGeral #BoxMeio { width:100%; margin-top:20px; float:left; }

#BoxMeio #BoxMenu { width:250px; float:left; text-align:left; height:500px; border-right:1px solid #000; }

#BoxMeio #BoxConteudo { width:700px; float:right; text-align:left; }

#BoxRodape { width:100%; margin-top:20px; height:80px; }

Listagem 3: Folha de Estilos da Master Page

Criando os Web User Control

Web User Control são recursos interessantes disponibilizados no ASP.NET. Um WUC (Web User Control) nada mais é do que um arquivo que pode possuir um comportamento específico, sendo que este comportamento pode ser acoplado a páginas ASP.NET comuns, Master Pages e até mesmo por outras WUC’s. Se você programa ou já programou em PHP ou ASP Clássico, o conceito é semelhante ao de include de um arquivo.

Um WUC possui a extensão .ascx. Ao analisar a estrutura de um WUC, será fácil constatar que ele pode receber qualquer estrutura HTML integrada com JavaScripts e demais recursos web sem qualquer tipo de problema. A grande diferença em relação as demais páginas do ASP.NET é que ele, WUC, não tem vida em si mesmo, ou seja, seu conteúdo apenas pode ser exibido dentro de uma página ASP.NET convencional ou através de uma Master Page. O código apresentado na Listagem 4, apresenta o cabeçalho de um WUC.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Menu1.ascx.cs" Inherits="MasterPages_Temas_Skins.Menu1" %>

Listagem 4: Cabeçalho do Web User Control

Novamente, a Listagem 4 apresenta o bloco <% Control. Assim como a Master Page, com este trecho de diretiva, o compilador registra o arquivo como um Web User Control, limitando as atividades possíveis dessa página.

Para criar um WUC repita o procedimento descrito no início deste artigo quando adicionamos a Master Page com a ressalva de que, ao invés de adicionarmos uma nova Master Page adicionaremos uma nova Web User Control.

Em nosso caso iremos criar duas WUC’s. Uma para construirmos o menu de navegação e outra, para adicionarmos as informações de rodapé. Ao final do processo, sua Solution Explorer deverá estar semelhante aquela apresentada na Figura 5.

Figura 5: Solution Explorer após a adição dos Web User Controls

Muito bem, o que temos a fazer agora é adicionar as WUC’s aos seus respectivos containers no código HTML da Master Page. Para efetuar esta ação, basta ir a Solution Explorer selecionar a WUC que deseja adicionar e arrastá-la para seu respectivo container no layout. Ao final deste processo sua Master Page deverá estar parecida com aquela apresentada na Figura 6.

Figura 6: Master Page após inserção dos WUC’s

O que podemos apontar de novidade na Figura 6 é o fato de, agora, termos a presença de um menu e um texto de rodapé. Ambas as novidades estão implementadas nos WUC’s respectivos e foram “arrastadas” para seus containers devidos. Este artigo não cobre a criação e manipulação de menus. Em um artigo futuro trataremos deste tema.

Finalmente, para concluir a configuração da Master Page , lembra-se daquele arquivo texto que criamos para salvar temporáriamente o CPH? Vamos a ele. Copie o conteúdo do arquivo, volte ao fonte de sua Master Page, vá até o conteiner de conteúdo e, dentro dele, cole o CPH. Se este processo foi executado corretamente você deverá estar com o código semelhante ao apresentado na Listagem 5:

Listagem 5: Adicionando o Content Place Holder

Páginas Herdando a Master Page

Master Page criada devidamente configurada, tudo pronto. O que faremos agora é construir uma nova página de conteúdo que herdará o padrão visual da Master Page.

Vá até sua Solution Explorer, clique com o botão direito sobre o projeto, Add > New Item…. Selecione as opções conforme apresentado nas Figuras 7 e 8.

Figura 7: Escolhendo um novo Web Form baseado em Master Page – 1

Figura 8: Escolhendo um novo Web Form baseado em Master Page – 2

Pronto! Seu novo arquivo de conteúdo já está criado com o mesmo padrão visual definido para a Master Page. Vá até a Solution Explorer e dê um duplo clique em seu novo arquivo criado. Caso ele abra no modo code alterne para o modo  Design. Se tudo correu bem, sua página deve estar parecida com a Figura 9.

Figura 9: Página herdando padrão visual da Master Page

O que é de fundamental importância observar na Figura 9 é que, toda a parte com uma camada cinza por sobre ela não é editável, ou seja, dentro do Web Form “QuemSomos.aspx” não é possível alterar qualquer elemento que foi definido na Master Page. Caso alguma alteração a este nível seja necessária, o arquivo a ser editado é a nossa Master Page.

A única região que pode (e deve) ser editada na página derivada é a região em cor branca (região do Content Place Holder). Toda a alteração de código que você efetuar sobre a página derivada (em nosso exemplo a página QuemSomos.aspx) será publicado apenas na região do Content Place Holder.

Bom pessoal, neste primeiro artigo da série “Enriquecendo o visual de seu site com Master Pages, Temas e Skins – Parte 1″ a idéia era apresentar como é possível trabalhar com Master Pages de forma a padronizar elementos visuais de sites. No próximo artigo (continuação deste), iremos falar sobre como podemos trabalhar com Temas e, em seguida como podemos trabalhar com Skins.

O exemplo utilizado neste artigo pode ser baixado gratuitamente clicando AQUI.

Por favor, deixe seu feedback sobre este artigo através dos comentários. Abraço a todos 🙂 .