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

Este é o segundo artigo da série “Enriquecendo o visual de seu site com Master Pages, Temas e Skins“. No primeiro artigo, falamos sobre Master Pages. Entendemos o que é uma Master Page, como utilizá-las em nossos projetos web (seja em um website ou um sistema) e ainda, qual a grande vantagem de utilizarmos este recurso em nossos projetos.

Se você não leu o primeiro artigo da série, recomendo fortemente sua leitura. Para acessar este artigo clique AQUI.

Continuando então com a idéia de enriquecer o visual de nossos sistemas web com recursos nativos do ASP.NET, vamos falar um pouco neste artigo sobre Temas e Skins.

O que é um tema?

Um tema é uma estrutura (diretório padrão do ASP.NET – App_Themes) que agrupa diversos arquivos de configuração de aparência (skins, folhas de estilos, imagens, arquivos de configuração XML, etc), de modo que estes temas podem ser aplicados a toda a estrutura de páginas de seu site ou sistema.

O que é uma Skin?

Se um tema é uma estrutura que agrupa arquivos de configuração de aparência, uma skin é um arquivo especial do ASP.NET que possui recursos de configuração de aparência para elementos de servidores, tais como Buttons, Labels, Drop Down List, etc, já que estes componentes não suportam configurações CSS, por exemplo.

Sem a definição de uma skin, se quisermos personalizar um elemento ASP.NET, digamos o elemento Button, precisariamos efetuar estas configurações manualmente, conforme apresenta a Listagem 1:

<asp:button runat="server" BackColor="Black" ForeColor="White" />

Listagem 1: Customizando um Button manualmente

Este tipo de configuração é eficiente se o visual da página é o mesmo em todos os momentos, ou seja, não é customizável pelo usuário e, além disso, se na tela existem poucos elementos. Entrentanto, imagine uma situação onde existem diversos elementos sendo que estes elementos, necessitam ter o mesmo padrão visual. Como faríamos? configuraríamos um a um? Sim se não pudéssemos definir as skins.

Um skin, como já foi mencionado, é uma estrutura que pode customizar elementos de servidor, portanto, podemos criar a definição para todos os Buttons, por exemplo, em uma skin, criar as aparências de todos os Drop Down Lists em outra, e assim sucessivamente. Ao final de tudo, agrupamos essas skins em um tema específico.

As skins podem aplicar as definições visuais sobre os componentes de duas formas: implícita (por tipo) e explícita.

Quando dizemos que o estilo pode ser aplicado de forma implícita, estamos querendo dizer na verdade por tipo, ou seja, se uma skin define o padrão visual de um Button, por exemplo, todos os elementos Button sofreão a aplicação do padrao visual definido pela skin. Entretanto, se para determinado Button eu quiser um visual diferenciado, efetuo então uma declaração explícita, ou seja, através da diretiva SkinID eu defino uma skin nomeada e, este componente específico sofrerá a aplicação do padrão visual da skin nomeada.

Muito bem, definidos os conceitos fundamentais relativos aos Temas e Skins, podemos passar para a parte prática. Caso deseje estudar mais profundamente sobre temas e skins, recomendo o ótimo descritivo do MSDN sobre o assunto no link: http://msdn.microsoft.com/pt-br/library/wcyt4fxb%28VS.90%29.aspx.

Implementando Temas e Skins

Para mostrar a utilização das skins e dos temas, vou utilizar o mesmo exemplo do artigo anterior sobre Master Pages. Você pode ler o artigo clicando aqui e baixar o projeto clicando aqui.

O primeiro passo consiste na criação do tema. Como mencionado anteriormente, um tema é na verdade um diretório que agrupa skins e demais arquivos de aparência, sendo que os temas são agrupados em uma pasta padrão do ASP.NET (App_Themes). Vamos então a este processo.

Apenas a titulo de recapitulação, ao final da parte 1 da série deste artigo, o estado de nosso website de exemplo é aquele visualizado na Figura 1.

Figura 1: Página “Quem Somos” herdando da Master Page

Para exemplificar o trabalho com temas e skins, vamos utilizar a página “QuemSomos.aspx” do exemplo. Vale lembrar que esta página herda o padrão visual da Master Page.

O primeiro passo consiste em adicionar a pasta App_Themes em seu projeto. Para isso, vá até a Solution Explorer, clique com o botão direito sobre o projeto. No menu que se abre, selecione a opção Add > Add ASP.NET Folder > Theme. Ao efetuar este procedimento, o Visual Studio 2010 irá adicionar a seu projeto uma pasta denominada App_Theme e, dentro dela, uma pasta com o nome “Theme1“. Você pode renomear a pasta do tema conforme conveniência. Se tudo correu bem, ao final deste processo sua Solution Explorer deve estar parecida com aquela da apresentada na Figura 2.

Figura 2: Solution Explorer com a qual a sua deverá parecer

Como você pode notar, a Figura 2 apresenta duas pastas dentro da pasta App_Themes: TemaPreto e TemaAzul. Para adicionar uma nova pasta de tema dentro da pasta App_Theme você deve seguir o mesmo procedimento descrito anteriormente.

Obviamente que as pastas TemaPreto e TemaAzul armazenarão os skins de cada tema (padrões visuais) do website.

O passo seguinte consiste em criarmos as skins para que possamos aplicar no passo posterior. Vá a Solution Explorer, clique com o botão direito sobre a pasta TemaAzul. No menu que se abre selecione Add > New Item…. Na tela que se abre, deve aparecer selecionado como única opção um arquivo do tipo skin. Selecione-o, nomeie-o e salve. Dê um duplo clique sobre o arquivo e vamos então definir a estrutura de nossa skin. A estrutura criada é apresentada na Listagem 2.

<asp:Button runat="server"
BackColor="Blue"
ForeColor="White"
Font-Name="Lucida Sans Unicode"
Font-Size="12px" />

Listagem 2: Estrutura de um elemento Button que será aplicada ao chamar-se o tema

Para adicionar a skin ao TemaPreto, repita o procedimento descrito para o TemaAzul. Se tudo correu bem, sua Solution Explorer deve estar parecida com aquela apresentada na Figura 3.

Figura 3: Skins e temas devidamente criadas e adicionadas ao projeto

Muito bem, criadas as skins e os temas nos resta agora aplicar estes temas conforme a conveniência. Vamos então implementar este processo.

Aplicando Temas em Nosso Projeto

Do que adiantaria criarmos temas e skins se não pudéssemos aplicar estes recursos aos nossos projetos? Nada! Assim, podemos aplicar um tema a nosso projeto de duas formas: global (via web.config) e a uma página específica (via cabeçalho da mesma). Se adicionarmos o theme via web.config teremos a aplicação da skin para todas as páginas do site. Se adicionarmos via cabeçalho da página, a skin será aplicada apenas a página referenciada.

Para aplicar o tema a sua página via web.config faça como apresenta a Listagem 3.

Listagem 3: Aplicando o tema pelo web.config

Para aplicar o tema a uma página específica de seu site, utilize o cabeçalho da página, conforme apresenta a Listagem 4.

<%@ Page Theme="TemaAzul" %>

Listagem 4: Aplicando o tema na página específica

O resultado final do processo pode ser visto na Figura 4.

Figura 4: Aplicação do TemaAzul no projeto

Para baixar a versão utilizada na construção das partes 1 e 2 dos artigos, clique AQUI.

Bom pessoal, é isto. Bem simples e funcional trabalhar com Master Pages, Temas e Skins não? Imagine tudo isso integrado com imagens, CSS, etc. O limite é sua criatividade.

Não esqueçam de deixar seu feedback através dos comentários. Muito obrigado a todos 🙂 .