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 colocar um estilo para cada controle de meu projeto WEB ASP.NET 2.0. Antigamente utilizada “Style.css” para definir os meus controles, e dentro dos controles utilizava o famoso “CssClass” atribuindo a class que gostaria descrita dentro do arquivo .CSS. Dessa forma era muito trabalhoso porque para cada controle precisava colocar o “CssClass” e assim definir o visual ou estilo do controle, poderia ser tanto um “textBox” quanto um “dataGrid”.

 

Com a nova versão do Visual Studio.NET 2005 utilizando o framework 2.0, foi criado uma solução mais fåcil e ågil para modificar o estilo de cada controle ou todos os controles de acordo com a configuração.

 

 

Solução

 

Para criar um estilo especĂ­fico para todos os controles “textbox” por exemplo, Ă© bem tranqĂŒilo e fĂĄcil pois basta definir dentro do tema e depois atribuir o valor dentro do arquivo de configuração “web.config”.  AlĂ©m de poder utilizar para todos os controles, tambĂ©m pode ser feito para uma pĂĄgina especĂ­fica.

 

O tema ainda possui mais opçÔes para configuração, o exemplo falado acima do “textbox”, pode ser configuração para um “textbox” apenas um estilo diferente, enquanto todos os outros “textbox” podem ser diferentes de especĂ­fico. No decorrer mostrarei como desenvolver das trĂȘs formas na prĂĄtica.

 

 

Criar um novo tema

 

Para criar o meu primeiro tema, cliquei com o botĂŁo direito do mouse em cima do projeto, fui atĂ© a opção “ADD ASP.NET Folder”, em seguida escolhi a opção “Theme”. (ReferĂȘncia 1.1)

 

 

ReferĂȘncia: 1.1

 

Automaticamente Ă© criada uma pasta chamada “Theme” dentro do projeto. (ReferĂȘncia 1.2)

 

 

  

 www.mauriciojunior.org

 

 

 

ReferĂȘncia: 1.2

 

 

Cliquei com o botĂŁo direito do mouse em cima da pasta “Theme”, em seguida escolhi a opção “ADD New Item”. Apareceu automaticamente uma janela com sete opçÔes de arquivos “Templates” para a escolha. Segue os tipos de arquivos: (ReferĂȘncia 1.3).

 

StyleSheet.css

Arquivo para estilo da extensĂŁo .css utilizado da mesma forma antigamente pela ferramenta 2003 do Visual Studio .NET.

XMLFile.xml

Arquivo XML

TextFile.txt

Arquivo TXT

Report.rdlc

Arquivo para geração de relatório usando o Crystal Report.

XSLTFile.xsl

Arquivo para geração de temas XSL.

SkinFile.skin

Skin utilizado para atribuição de controles cliente servidor das påginas ASPX.

ClassDiagram.cd

Arquivo de diagrama de classes.

ReferĂȘncia: 1.3

 

 

Neste primeiro passo escolhi o tipo de arquivo “SkinFile.skin”, automaticamente Ă© criado um arquivo para edição. Dentro do mesmo pode ser colocado os controles cliente servidor utilizados no ASPX.

 

 

 

ReferĂȘncia: 1.3

 

 

Na referĂȘncia 1.3, adicionei um controle cliente servidor chamado “TextBox” com uma configuração de borda e tamanho de borda. Bem simples e prĂĄtico. Note que esse controle nĂŁo tem “ID” definido como Ă© necessĂĄrio definir dentro das pĂĄginas ASPX. Foram adicionados apenas os estilos e o runat=”server”.  

 

 

 

Atribuir estilo criado

 

Criei uma pĂĄgina chamada “default.aspx” e agora preciso atribuir este estilo adicionado para dentro da pĂĄgina cujo o objetivo Ă© aplicar no controle textbox da pĂĄgina. CĂłdigo da pĂĄgina. (ReferĂȘncia 1.4)

 

 

 

<%@ 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>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:TextBox runat="server" ID="txt"></asp:TextBox>

    </div>

    </form>

</body>

</html>

 

ReferĂȘncia: 1.4

 

Note que existe apenas um controle chamado “txt” do tipo textbox. Agora para adicionar o estilo a pĂĄgina para que o controle mude, basta adicionar um atributo e um valor no inĂ­cio da pĂĄgina. ReferĂȘncia 1.5.

 

 

 

<%@ Page Language="C#" Theme="Theme" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

ReferĂȘncia: 1.5

 

 

Acrescentei apenas o atributo “Theme” com o valor “Theme”, cujo Ă© o nome adicionado no ato da criação.  Cliquei F5 e mandei executar o projeto. (ReferĂȘncia 1.6)

 

 

 

ReferĂȘncia: 1.6

 

 

Note que o controle TextBox foi modificado automaticamente com traços em volta do mesmo. Com isso termino de falar dessa primeira etapa utilizando Temas com Visual Studio. NET 2005.

 

Bom, espero ter ajudado, qualquer dĂșvida favor entrar em contato atravĂ©s do e-mail mauricio@aspneti.com.

 

Livros publicados:

 

 

 

 

 

Mauricio Junior

www.aspneti.com

www.mauriciojunior.org