Themes no Visual Studio 2005
Depois de algum tempo sem publicar nenhum artigo, hoje vamos falar sobre Themes que á um conceito bem antigo mais que agora tem um suporte muito interessante no VS.NET 2005, onde o usuário tem a facilidade e flexibilidade de mudar completamente o visual de seu site com poucas modificações.
Normalmente durante o desenvolvimento de uma aplicação acontece de cada vez que nós desenvolvedores ou o cliente olhamos uma página uma alteração no layout seja sugerida e caso o layout não esteja totalmente baseado em CSS estas alterações podem ser bem custosas. Então o uso de Temas para definir o padrão de sua aplicação, de suas páginas ou de seus controles é algo bem interessante.
Criando a estrutura de Temas
Para criar o nosso tema usando os recursos do VS.NET 2005 como ilustra a Figura 01, siga os passos descritos, abaixo:
· Selecione o projeto Web no qual será aplicado o tema.
· Selecione o menu “WebSite” ou clique com o botão direito do mouse sobre o projeto Web.
· Selecione no próximo menu a opção Add ASP.NET Folder.
· Um novo menu será aberto onde a opção a ser selecionada deve ser “Theme”
Figura 01. Criação de um tema para um projeto Web Site.
Após essa seqüência de passos vocês iram perceber que uma nova pasta foi adicionada ao projeto selecionado, como ilustra a Figura 02.
Figura 02. Resultado da criação de um novo tema.
Agora já temos a estrutura necessária para que nossa aplicação tenha seu padrão de layout definido a partir dos temas. Está estrutura permite que novos temas sejam criados permitindo a fácil mudança no padrão do layout da aplicação.
Depois que um tema foi definido, neste caso “Theme1” é preciso definir os padrões deste tema, para isso temos que criar os arquivos necessários como ilustra a Figura 03.
Figura 03. Criação de arquivos que vão compor o tema.
Para adicionar um arquivo ao tema é preciso selecionar seguir os passos definidos abaixo:
· Selecione a pasta do tema onde será inserido o arquivo, neste caso “Theme1”;
· Selecione o menu WebSite ou clique sobre a pasta do tema com o botão direito do mouse;
· Selecione a opção “Add New Item”.
Na seqüência destes passos lhe será exibida a tema conforme na figura 03, onde 7 tipos de arquivos são apresentados, a tabela 01 descreve cada um deles.
|
Style Sheet |
Arquivo para definições de estilo CSS |
|
Report |
Arquivo para gerar relatórios através do Crystal Report |
|
Class Diagram |
Arquivo para criação de um diagrama de classes |
|
XML File |
Arquivo XML |
|
XSLTFile |
Arquivo XSLT para definição da aparência de um arquivo XML pode misturar HTML e CSS |
|
Text File |
Arquivo texto |
|
Skin File |
Arquivo para definição da aparência de web controls |
Definido um Skin
É neste arquivo que vão ser definidos os padrões da aparência dos controles de servidor como, por exemplo, Label, TextBox, Button, GridView e outros.
Para cada tema é possível criar mais de um skin, porém não é possível redefinir um padrão já existente em outro arquivo .skin. Então fica a recomendação de criar apenas um skin por tema, para facilitar o entendimento e a manutenção.
A Listagem 01 ilustra um skin já definido, para que não estranhem quando forem definir o padrão em seus skins acho legal dizer que dentro do arquivo .skin o intelissence não funciona e todo o código deve ser escrito totalmente de forma manual.
<asp:Label Runat="server" ForeColor="#000000"
Font-Names="Verdana"
BackColor="#E5E5E5"
Font-Size="Small" />
<asp:Textbox Runat="server" ForeColor="#004000"
Font-Names="Verdana"
Font-Size="X-Small"
BorderStyle="Dotted"
BorderWidth="2px"
BorderColor="#004000"
Font-Bold="True" />
<asp:Button Runat="server" ForeColor="#FFFFFF"
Font-Names="Verdana"
Font-Size="X-Small"
BorderStyle="Solid"
BorderWidth="1px"
BorderColor="#FFFF00"
Font-Bold="True"
BackColor="#FF9900" />
Listagem 01. Ilustra o conteúdo de um arquivo .skin.
Com o tema já criado, o skin já definido é preciso dizer, neste caso que na página XXX será utilizado o tema “Theme1”. Isso é possível de ser feito de algumas.
Para setar um tema em páginas específicas é necessário utilizar a propriedade “Theme” da diretiva Page, como ilustra a Listagem 02.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Theme="Theme1" %>
Listagem 02. Adicionando o tema em páginas especificas.
Para setar o tema de forma global, ou seja, aplicá-lo a todas as páginas do meu projeto web devemos utilizar o arquivo de configurações “web.config”, como ilustra a Listagem 03.
<system.web>
<pages theme="Theme1" />
</system.web>
Listagem 03. Ilustra a definição de temas diretamente no web.config.
A esta altura já devem estar ansiosos para ver o resultado obtido com a aplicação do tema em nossa aplicação, a Figura 04 ilustra o resultado obtido.
Figura 04. Resultado da aplicação do tema.
Definindo um Style Sheet
É neste arquivo que serão definidos os padrões de objetos como, por exemplo, Body, Table, Input e outros. Uma pergunta que devem estar fazendo é a seguinte.
Mais quando as páginas são renderizadas os controles não são convertidos em controles html, por exemplo, um TextBox é convertido em um Input type=text. Então como fica se eu definir no meu skin uma propriedade e no Style Sheet a mesma propriedade com outro valor?
Como funciona isso, quando a página é executada e é encontrado um desses conflitos é o ASP.NET verifica se as propriedades para um mesmo tipo de objeto estão definidas em ambos arquivos caso esteja prevalece o que foi definido no .skin. Existe outra possibilidade que é uma propriedade ser definida no .css e não no .skin então ambas são aplicadas já que não existe conflito.
Outro ponto interessante é que pode-se criar classes css que serão aplicadas dentro do seu skin, como ilustram as Listagem 04 e 05.
.btnImagem
{
border-style:none;
background-image: url(../../Imagens/flagBR.gif);
width:100px;
height:50px;
background-repeat:repeat-x;
}
Listagem 04. Definição de uma classe CSS.
<asp:Button Runat="server" ForeColor="#FFFFFF"
Font-Names="Verdana"
Font-Size="X-Small"
BorderStyle="Solid"
BorderWidth="1px"
BorderColor="#FFFF00"
Font-Bold="True"
BackColor="#FF9900"
CssClass="btnImagem"/>
Listagem 05. Skin que defini onde será aplicada a classe CSS.
A Figura 05 ilustra o resultado desta mistura.
Figura 05. Resultado da utilização de classes CSS em um skin.
Definindo Múltiplos skins
Imaginem que seja preciso definir os padrões dos botões do seu portal, mas não de todos os botões e sim dos botões que compõe o menu. Para que isso seja possível existe uma propriedade que pode ser definida na criação do .skin é o SkinID. Definindo um ID para o skin você o torna opcional, ou seja, ele somente será aplicado quando for explicitamente definido em um web control o seu id, então é interessante definir, por exemplo, padrões para webcontrols que são comumente utilizados em sua aplicação e definir padrões para os web controls que são exceção.
As Listagens 06 e 07 ilustram a utilização da propriedade SkinID.
<asp:Button Runat="server" ForeColor="#FFFFFF"
Font-Names="Courier New"
Font-Size="X-Small"
BorderStyle="Solid"
BorderWidth="1px"
BorderColor="#FFFF00"
Font-Bold="True"
BackColor="#0000FF"
SkinId="btnAlternativo"/>
Listagem 06. Criando um skin alternativo.
<body>
<form id="form1" runat="server">
<div>
Botão skin padrão<br />
<asp:Button ID="btn" runat="server" Text="Teste" /><br /><br />
Botão skin especifico<br />
<asp:Button runat="server" ID="btn2" SkinID="btnAlternativo" Text="BUTTON COM SKINID" />
</div>
</form>
</body>
Listagem 07. Utilizando o skin padrão e alternativo.
Definido tema via CodeBehind
Imagine que você desenvolveu uma aplicação onde o usuário pode definir qual o tema ele quer em sua página, desde que esse tema já tenha sido definido em sua aplicação.
A Listagem 08 ilustra como setar o tema via codebehind.
protected void Page_PreInit(object sender, EventArgs e)
{
if(Request.QueryString["tema"] != null)
{
this.Theme = Request.QueryString["tema"];
}
}
Listagem 08. Definição do tema utilizado na página via codebehind.
É importante saber que não é possível setar o tema em outro evento que não no PreInit.
As Figuras 06 e 07 ilustram o resultado obtido antes e depois da aplicação do tema em uma página.
Figura 06. Página sem uso do tema.
Figura 07. Página com o uso do tema.
Bom pessoal é isso espero que façam bom proveito deste recurso e que eu tenha sido bem claro.
[]’s
Diego Dias
Referências:
