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