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 1”, favor acessa o link abaixo:
Parte 1 - Themes
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 1” mostrei como criar o “skin” do projeto, o passo seguinte é adicionar um “label” dentro do arquivo criado anteriormente chamado “SkinFile.skin”. (Referência Theme2.1.4)
|
<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).
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
Mauricio Junior
www.mauriciojunior.org
www.aspneti.com