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