Anteriormente falei e mostrei o conceito, problema e solução usando o âthemesâ do Visual Studio.NET 2005. Para quem quiser verificar sobre a âParte
Conceito
Uma nova caracterĂstica e do ASP.NET 2.0 Ă© deixar os usuĂĄrios terem mais controle no visual onde possa sentir e ver uma pĂĄgina web. Um tema pode ser definido cores, nome de fontes, tamanho e estilo de cada controle. O novo âskinâ suportado no ASP.NET 2.0 Ă© uma extensĂŁo da mesma idĂ©ia do CSS.
UsuĂĄrios individuais podem selecionar um tema para vĂĄrias opçÔes avaliadas para o mesmo, e especificar o tema deles escolhendo determinado âskinâ. O âskinâ Ă© um cliente servidor relativo como se fosse um CSS stylesheet, ou seja, Ă© similar a um arquivo CSS mas diferente, um âskinâ pode sobrescrever vĂĄrias propriedades visuais daquele especĂfico controle de um pĂĄgina ou de vĂĄrias pĂĄginas.
VocĂȘ pode armazenar vĂĄrias versĂ”es de imagens para o tema, cada tema uma imagem diferente ou atribuir vĂĄrias imagens para todos os temas baseado no corrente âskinâ usado.
Os temas ficam dentro da pasta /App_Themes, e contém os seguintes itens:
- Stylesheet.css (arquivo que define a aparĂȘncia dos objetos HTMLs);
- Skin File â (Eles sĂŁo arquivos que definem a aparĂȘncia de controles clientes servidores ASP.NET. VocĂȘ pode pensar deles como se fossem arquivos stylesheet clientes servidores;
- Outros recursos como imagens.
Problema
Preciso diferenciar os meus componentes de tela usando âstylesheetâ, ou seja, um TextBox quero que tenha a letra em azul e outro tracejado. Preciso adicionar vĂĄrios componentes diferentes na tela usando ou nĂŁo estilo âstylesheet.cssâ. AlĂ©m de mudar os estilos, preciso adicionar os âthemesâ para todas as pĂĄginas dentro do meu projeto.
Solução
O primeiro de tudo Ă© criar um âEstilo.cssâ, o passo seguinte Ă© colocar dentro do âskinâ a âCssClassâ para atribuir os estilos de cores e fontes. Cliquei com o botĂŁo direito do mouse em cima da pasta âThemesâ e escolhi a opção âAdd New Item...â. (ReferĂȘncia Theme2.1.1)
ReferĂȘncia: Theme2.1.1
A tela seguinte escolhi o tipo de arquivo na tela de âtemplatesâ. O tipo escolhido foi âStyle Sheetâ. (ReferĂȘncia Theme2.1.2).
ReferĂȘncia: Theme2.1.2
Coloquei o nome do arquivo de âEstilo.cssâ. Em seguida cliquei no botĂŁo ADD, o mesmo foi adicionado dentro da tela de Solution Explorer e dentro da pĂĄgina Theme. Dentro do arquivo âcssâ adicionei uma classe para configurar um label. (ReferĂȘncia Theme2.1.3).
.Label { background-color:Blue; font-size:20px; } |
ReferĂȘncia: Theme2.1.3
O âbackground-color: Blueâ coloca o fundo da cor azul, o âfont-size:20pxâ define o tamanho da fonte mostrada em tela.
Na âParte
<asp:Label runat="server" CssClass="Label" /> |
ReferĂȘncia: Theme2.1.4
Adicionei o cĂłdigo da referĂȘncia (Theme2.1.4) dentro do skin e agora adicionarei uma tag dentro do arquivo de configuração chamado web.config. Neste arquivo de configuração e dentro da tag <system.web>, adicionei uma tag para utilizar em todas as pĂĄginas automaticamente os estilos adicionados no skin do projeto. (ReferĂȘncia Theme2.1.5).
<pages theme="Theme" /> |
ReferĂȘncia: Theme2.1.5
Esse cĂłdigo atribui para todas as pĂĄginas o tema criado; dessa forma; sĂł adicionarei o controle âLabelâ dentro de qualquer pĂĄgina ASPX. Dentro do arquivo âDEFAULT.ASPXâ criado anteriormente coloquei um objeto de tela. (ReferĂȘncia Theme2.1.6)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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>Projeto Themes</title> <link rel="stylesheet" type="text/css" href="App_Themes/Theme/Estilo.css" /> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox runat="server" ID="txt"></asp:TextBox> <asp:Label id="lbl" runat="server" Text="Label"></asp:Label> </div> </form> </body> </html> |
ReferĂȘncia: Theme2.1.6
A referĂȘncia (Theme2.1.6) mostro toda a pĂĄgina âdefault.aspxâ. Logo nas primeiras linhas, adicionei o âstylesheetâ. (ReferĂȘncia Theme2.1.7)
<link rel="stylesheet" type="text/css" href="App_Themes/Theme/Estilo.css" /> |
ReferĂȘncia: Theme2.1.7
Adicionei o estilo e em seguida o controle Label de acordo com os detalhes da referĂȘncia (Theme2.1.8).
<asp:Label id="lbl" runat="server" Text="Label"></asp:Label> |
ReferĂȘncia: Theme2.1.8
ReferĂȘncia: Theme2.1.9
Na execução do projeto, note que o label adicionado anteriormente no skin com um estilo puxado do arquivo de stylesheet foi executado com sucesso. Da forma que fiz para pegar o estilo, todos os labelâs de todas as pĂĄginas estarĂŁo com o fundo azul, como na referĂȘncia (Theme2.1.9).
Outro Problema
Em caso de sites ou sistemas, nĂŁo quero que todos os labelâs fiquem do fundo de cor azul e sim alguns labelâs poderĂŁo ficar. EntĂŁo tenho um problema, quero adicionar para alguns labelâs a cor no fundo azul e outros labels nĂŁo. Da forma que estĂĄ configurado hoje, todos os labels estarĂŁo com o fundo azul.
Para a solução desse problema, existe o atributo âSkinIdâ que serve para diferenciação, ou seja, preciso adicionar mais um controle do tipo label no skinFile.skin com o atributo âSkinIDâ, depois de adicionar, preciso colocar na pĂĄgina o controle com o mesmo âSkinIdâ.
Solução
Como falei anteriormente, para solucionar o problema de nĂŁo ficar sempre um label com o fundo da cor azul, preciso usar o atributo âSkinIdâ tanto no arquivo de âskinâ quanto na pĂĄgina. Para solucionar o problema, adicionei mais um novo label dentro do âskinFile.skinâ que fica dentro da pasta âThemeâ. (ReferĂȘncia Theme2.1.10).
<asp:TextBox runat="server" SkinId="teste" ForeColor="Yellow" /> <asp:Label runat="server" CssClass="Label" /> <asp:Label runat="server" SkinId="labelTeste" /> |
ReferĂȘncia: Theme2.1.10
Note que acrescentei mais um label apenas sem o uso do atributo CssClass e com o âSkinId=labelTesteâ. Depois de adicionado, coloquei mais um controle de tela na pĂĄgina âDefault.aspxâ com o mesmo âSkinIdâ. (ReferĂȘncia Theme2.1.11).
<asp:Label id="lbl" runat="server" SkinId="labelTeste" Text="Label"></asp:Label> |
ReferĂȘncia: Theme2.1.11
Um label foi adicionado na pĂĄgina âDefault.aspxâ com o nome do SkinId igual ao do arquivo skinFile.skin. Para melhor entendimento segue todo o cĂłdigo da pĂĄgina âDefault.aspxâ. (ReferĂȘncia Theme2.1.12)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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>Projeto Themes</title> <link rel="stylesheet" type="text/css" href="App_Themes/Theme/Estilo.css" /> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox runat="server" ID="txt"></asp:TextBox> <br /> <asp:Label id="Label1" runat="server" Text="Label"></asp:Label> <asp:Label id="lbl" runat="server" SkinId="labelTeste" Text="Label"></asp:Label> </div> </form> </body> </html> |
ReferĂȘncia: Theme2.1.12
Executei o projeto e retornou o resultado conforme a (ReferĂȘncia Theme2.1.13).
ReferĂȘncia: Theme2.1.13
Espero que tenha ajudado um pouco. Bom, fico por aqui. Qualquer dĂșvida, favor entrar em contato atravĂ©s do e-mail mauricio@aspneti.com
Livros Publicados
Mauricio Junior