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).

 

 

 

  <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

www.mauriciojunior.org

www.aspneti.com