Desenvolvimento - ASP. NET
Themes, Skins & Master Page in ASP.NET
Já pararam para usar os temas e skins do ASP.NET, principalmente com Master Pages? O ASP.NET dispõe destes recursos que dão ao desenvolvedor o poder para trazer flexibilidade e dinâmica do desing do seu projeto web.
por Eduardo SpakiAntes de começar:
O exemplo foi projetado no Visual Studio 2008 e compilado no .NET framework 3.5.
Usamos uma herança da Classe Page do framework, para assim, poder sobrescrever o método Pre_Render(), podendo assim, atribuir uma skin ao site, aproveitando o recurso da Master Page.
A pouca codificação é uma credibilidade, apesar de certo espanto de alguns, como diriam: Se esta complicado no .NET é porquê você está fazendo errado!
Introdução:
As aplicações web, sites, portais, blogs etc... estão cada vês mais dinâmicos com conteúdo variado e uma rica mídia a disposição, assim como uma flexibilidade enorme de apresentação deste conteúdo.
O desenvolvedor web se flagra em muitas ciladas para desenvolver interfaces de usuários flexíveis, dinâmicas... e por que não “mutantes”!?
Já pararam para usar os temas e skins do ASP.NET, principalmente com Master Pages?
O ASP.NET dispõe destes recursos que dão ao desenvolvedor o poder para trazer flexibilidade e dinâmica do desing do seu projeto web sem sofrer muito com codificação ou repetição de códigos, economizando tempo e trazendo funcionalidades diversas à aplicação.
Isto também nos remete aos modelos de camadas onde há uma separação de funcionalidades e múltiplas interfaces de usuário. Utilizando estes recursos, nós separamos metodicamente as interfaces de usuário das funcionalidades.
Procurei reunir as informações primordiais para implementar um site e/ou aplicação web com uma interface rica e dinâmica no frontend , usufruindo deste simples recurso que o ASP.NET dispõe, criando assim “templates” para o seu site/aplicação.
Criando Projeto:
Crie
um novo projeto ASP.NET Web Application ou simplesmente siga os
próximos passos para implementar esta funcionalidade em uma aplicação e/ou website
existente.
(Criando um novo projeto ASP.NET Web Application no Visual Studio 2008)
Adicionando a Mater Page:
Se você não sabe o que é uma Master Page¸ no ASP.NET, é uma alternativa inteligente ao “iframe” do HTML. Basicamente ele define a estrutura básica do seu site, deixando o espaço definido aonde os conteúdos serão inseridos (ContentPlaceHolder), ex: Você pode desenha o cabeçalho e o menu da sua página em uma Master Page, e eles se repetirão nas páginas associadas a ele.
Adicione
um novo item, clicando com o botão direito no seu projeto:
(Adicionando novo item)
Escolha o template Master Page:
(Adicionando a Master Page)
A Master Page tem funcionalidades similares a de uma página APS.NET comum. Seu layout ficará assim:
(ASP e HTML da Master Page)
(Layout da Master Page)
Basicamente adicionei uma “div” de cabeçalho e outra “div “de menu. No menu adicionei um “DropDownList” com a lista dos temas, definidos na mão mesmo, com “ListItem”. É importante observar que este “DropDownList” tem a propriedade “AutoPostBack” setada para “true”, mesmo não disparando nenhum evento.
Atente-se à propriedade “class” das “divs”, pois ela estará ligada aos arquivos de estilos que criaremos.
Dica: Cuidado, pois a Master Page repetira o código HTML gerado pelo ASP.NET em cada página relacionada a ela. Para amenizar isto, use de boas técnicas de design, como o CSS, por exemplo.
Adicionando Skin:
Adicione novos itens do tipo Skin, nomeando eles de acordo com a base da skin, no meu caso coloque os seguintes: Azul, Verde, Laranja.
(Adicionando uma skin)
(Pergunta sobre a pasta onde serão armazenados os temas)
Ao adicionar as skins o Visual Studio perguntará se deseja usar a pasta padrão para o controle de temas, por comodidade organizacional responderemos que sim.
Cada arquivo skin conterá as definições de aparência dos componentes, e cada pasta de tema pode conter os arquivos de CSS necessários. Logo nossa estrutura de pastas e arquivos ficaram organizadas assim:
(Pastas e arquivos do projeto)
Note que incluí uma pasta “Estilos” onde ficaram os arquivos de CSS mais gerais. E para cada tema incluí o CSS relativo ao tema. Incluí também uma pasta com algumas imagens de cabeçalho para o exemplo.
CSS:
CSS: são nossos arquivos de estilo, definição de cores, design e layout das páginas.
O arquivo nomeado de “Geral.css” ficou com definições de layout:
(CSS do arquivo “Geral.css”)
Obs: A master page deve conter a referência deste arquivo.
(Definição do “Geral.css” na master page)
Para os arquivos de CSS dentro dos temas apenas defini a imagem cabeçalho correspondente:
(Definição do cabeçalho via CSS)
Definição da skin:
O arquivo de skin, como já mencionado, define a aparência dos componentes da sua página, ex:
(Definição dos componentes via skin)
Note que é como definirmos um objeto na tela, porém setando apenas as propriedades visuais. Neste arquivo defini o visual dos objetos “DropDownList”, “Label”, “TextBox” e “Button”, más não se limita somente nisto, podemos definir detalhadamente o visual de um “GridView” por exemplo.
As páginas do Site/Aplicação:
Antes de adicionar uma página, adicionaremos um arquivo que servirá de base para nossas páginas: uma classe que herdará a classe “System.Web.UI.Page”, é nele que será realizada a troca das skins de forma simples e transparente.
(Classe base para as páginas)
Realizaremos a troca da skin sobrescrevendo o método “Page_PreInit()”, este método é executado antes da página ser renderizada.
![Caixa de texto: using System;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
namespace TutorialSkin
{
public class PaginaBase : Page
{
// -> Realiza a troca de skin antes de renderizar a página.
protected void Page_PreInit(object sender, EventArgs e)
{
string tema = Request[Master.FindControl("form1").FindControl("DdlTemas").UniqueID];
if (!string.IsNullOrEmpty(tema))
Theme = Request[Master.FindControl("form1").FindControl("DdlTemas").UniqueID];
}
}
}](/artigos/img_artigos/EduardoSpaki/ThemesSkinsMP/image014.gif)
(Codificação da página base)
Para definirmos o tema atual de nossas páginas tivemos de verificar o “Request” do “DropDownList” , que colocamos na master page e causou um post back devido ao “AutoPostBack”. Resgatamos seu valor pelo seu “UniqueID”, então cuidado na hora de dar os finds, principalmente com o form da master page.
Agora nos resta trabalharmos nas páginas (arquivos “*.aspx”), atentando-nos “ àlguns detalhes.
Primeiramente as páginas devem ser associadas à nossa master page, assim sendo, adicionaremos um item do tipo “Web Content Form”.
(Adicionando uma página que terá uma master page associada)
(Selecionando uma master page)
Agora com nossa página adicionada, temos o seguinte code behinde:
(Página ASP recém adicionada)
Devemos simplesmente alterar a herança do code behind para nossa página base, ficando assim:
(Herança alterada)
Para o exemplo eu apenas coloquei três componentes na página para verificarmos o funcionamento dos temas, são eles: “Label”, “TextBox”, “Button”.
(“.aspx”” da página recém adicionada)
(Layout da página)
Na tag “Page” eu coloquei a propriedade “Theme” como “Azul” para deixar este tema como o padrão da página.
Não tem mais segredo, somente testar e ver o resultado, podendo programar o restante do site de acordo com as necessidades. E toda vez que for selecionado um tema no “DropDownList” que está definido na master page, a aplicação trocará de aparência, de acordo com as skins e CSSs dos temas.
Testando:
Compile e veja os resultados, trocando o tema no “DropDownList”:
(Tema Azul)
(Tema Verde)
(Tema Laranja)
Considerações Finais:
A definição de um tema default pode ser pelo arquivo de configuração da aplicação “web.config”:
(Definição do tema default no web.config)
... ou por página, na tag “Page”, propriedade “Theme”:
(Definição do tema default por página)
Algumas outras idéias podem ser utilizadas para fazer com que os temas sejam personalizados por funcionalidades e/ou usuários, como: cookies, membership etc.
Os componentes também podem conter uma referência pela propriedade “SkinID”.
Algo um pouco chato talvez seja algumas repetições de CSS e linhas nas skins.
Conclusão:
Sintetizado, estas funcionalidades e dicas agregam um valor ao resultado final de seu projeto que, em muitos outros casos, desenvolvedores gastaram tempo e dinheiro para fazer algo que funciona-se de forma duvidosa.
Combinamos tecnologias e boas práticas para desenvolver algo correto, leve e funcional.
Não se deve ficar engessado, devemos usufruir desta tecnologia que nos poupa codificação e repetição de inúmeras linhas de códigos e tags. O ASP e o .NET estão aí para facilitar e flexibilizar!
Qualquer sugestão ou dúvida: comentem ou entrem em contato, seu feedback é importante!
Caso queiram, posteriormente posso estar falando sobre Master Page e Master Page aninhada... talvez sobre aplicação multi-idiomas, depende do que opinarem...
Espero ter sido útil e aberto algumas mentes. Abraços...
Referências:
http://www.codeproject.com/KB/aspnet/ThemesAndSkins.aspx
