ASP.NET 2.0 - Themes & Skins - Formatando facilmente sua aplicação Web

Com a grande evolução que o ASP.NET 2.0 trouxe à tecnologia .NET, muitos recursos foram adicionados a fim de facilitar o desenvolvimento de aplicações WEB. Junto a essas novidades, a Microsoft incluiu recursos de formatação muito interessante que mudam o conceito de formatação de páginas daqui em diante, esses recursos são os Themes & Skins.

Themes

Normalmente quando uma página é formatada, é possível configurar essa formatação diretamente na página (não recomendado) ou utilizando arquivos de estilos (.css) para que todas as páginas utilizem o mesmo padrão de formatação, facilitando futuras modificações que possam ocorrer.

Com os Themes, esse processo de formatação se tornou muito mais simples de ser implementado, já que é possível criar arquivos de Themes totalmente separados do arquivo .aspx da página. Veja na Listagem 1, um exemplo de utilização de formatação de um Web Control que pode ser adicionado eu um arquivo .aspx do seu Web Site, para exemplificar vou utilizar o arquivo padrão de criação no Visual Studio .NET 2005, o Default.aspx. Nesse exemplo, a formatação se aplicará somente a esse controle.

<body>
    <form id="form1" runat="server">
<div><asp:Button ID="Button1" ForeColor=”Blue” Font-Bold=”true” runat="server" Text="Button" />
     </div>
    </form>
</body>
Listagem 1. – Formatação diretamente no controle

Uma outra forma de formatar esse controle, seria utilizar um arquivo .css contendo a formatação do controle, e na propriedade CssClass informar o nome da classe no arquivo de estilo.

Com o recurso de Themes, é necessário configurar somente 1 (um) arquivo no Web Site e utilizar essas mesmas configurações em todas as páginas do Web Site sem necessitar alterar o arquivo original (.aspx).

Esses arquivos são separados por pastas no Web Site e ficam sob a pasta App_Themes. Para adicionar essa pasta e começar a criação dos arquivos, clique com o botão direito no projeto | Add ASP.NET Folder | Theme. Logo que a pasta é criada, o Visual Studio .NET 2005 já lhe dá a opção de criar a primeira subpasta que conterá o arquivo de skins, nomeie essa pasta para Azul onde será adicionado todo a formatação de controles com a cor Azul. Em seguida, clique com o botão direito na pasta Azul | Add New Item, escolha o template Skin File e nomeie o arquivo como “LC.skin” conforme mostra a Figura 1.

Figura 1. – Adicionando o arquivo de Skin para ser utilizado em todo o Web Site

Após ter adicionado o arquivo, indique a formatação conforme a Listagem 2.

<asp:Button Font-Bold="true" ForeColor="Blue" runat="server" />
Listagem 2. – Formatando um botão que será padrão para todo o Web Site

Veja que no arquivo de formatação (.skin) é criado a formatação utilizando as próprias tags do ASP.NET Controls, retirando apenas a propriedade ID para que a formatação tenha efeito em todos os controles do tipo <asp:Button/>.

Agora que já temos o skin configurado com as formatações prontas, retire a formatação que está inserida diretamente no controle e referencie o arquivo Theme conforme mostra a Listagem 3.

<%@ Page Language="C#" Theme="Azul" AutoEventWireup="true" 
   CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Formatando um Botão com Themes</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" /></div>
    </form>
</body>
</html>
Listagem 3. – Informando o Theme que será utilizado para a página.

Como você pode ver, nas declarações da página foi adicionado a propriedade Theme com o valor Azul que corresponde a pasta criada.

Isso quer dize que está página utilizará as formatações do Theme Azul e para cada controle que for encontrado na página, o ASP.NET busca pelo correspondente no arquivo de Theme e o formata conforme configurado.

Teste a execução da página e veja que a cor do botão será Azul.

Para exemplificar ainda mais, crie uma nova pasta dentro da pasta App_Themes (botão direito em cima da pasta App_Themes | Add ASP.NET Folder | Theme com o nome Verde e inclua um novo arquivo por nome “LC.skin”. Nesse novo arquivo, formate o controle <asp:Button/> conforme mostra a Listagem 4.

<asp:Button Font-Bold="true" ForeColor="Green" runat="server" />
Listagem 4. – Configurando um novo skin para ser utilizado nas páginas

Para testar o novo skin, somente altere a propriedade Theme para “Verde” e o ASP.NET já assumirá as configurações presentes na nova pasta criada.

Teste a execução da página e veja que a cor do botão será Verde.

Skins

Mesmo com os recursos avançados de Themes, onde é possível configurar um controle no arquivo de skin e todos os controles do mesmo tipo na página assumirem a formatação, ainda é possível especializar a formatação de um controle.

Imagine uma situação onde todos os controles <asp:Button/> da página será exibido de acordo com a configuração do Theme, mas um dos controles em particular precisa assumir uma outra formatação, que pode estar contida, inclusive, no mesmo arquivo skin.

Para isso, é necessário informar uma outra um outro controle, mas agora informando a tag correspondente ao Skin.

Veja na Listagem 5 um exemplo onde o controle padrão <asp:Button/> tem uma formatação padrão no arquivo de skin. Além dessa formatação é inserida uma outra “opção” de formatação para o controle, agora com um skinID atribuído e a formatação de itálico para o controle que assumir essa formatação.

<asp:Button Font-Bold="true" ForeColor="Blue" runat="server" />

<asp:Button Font-Bold="true" ForeColor="Blue" skinID="Italico" font-italic="true" runat="server" />
Listagem 5. – Adicionando nova formatação para o arquivo LC.skin da pasta Azul

Um outro controle é inserido no formulário, que por padrão deveria assumir as formatações do Theme Azul, mas além dessa formatação pode assumir uma outra de acordo com o atributo skinID descrito na Listagem 6.

<%@ Page Language="C#" Theme="Azul" AutoEventWireup="true"  
   CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Formatando um Botão com Themes</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:Button ID="Button2" runat="server" SkinID="Italico" Text="Button" />
        </div>
    </form>
</body>
</html>
Listagem 6. – Especializando a formatação de um controle através do SkinID

Executando a aplicação veja uma tela semelhante a Figura 2.

Figura 2. – Utilizando skins para diferenciar a formatação dos controles

Configurando Themes & Skins para todo o Web Site

No método já mostrado, além de configurar o Thema para ser utilizado nas páginas é necessário entrar em cada página e incluir a propriedade Theme nas diretivas de páginas. Você também pode configurar o Theme diretamente no arquivo de configuração do Web Site (web.config), dessa forma, não é necessário efetuar nenhuma alteração nas páginas, pois irão recuperar as informações diretamente do web.config da aplicação. Para configurar esse recurso, insira na sessão <system.web> do web.config as tags conforme mostra a Listagem 7.

<?xml version="1.0"?>
 
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
    <system.web>
      <pages theme="Azul | Verde"/> <!—Azul ou Verde -!>
    </system.web>
</configuration>
Listagem 7. – Configurando o web.config e atribuindo o Themes para todas as páginas da aplicação.

Carregando um Theme dinamicamente

É claro que na maioria das aplicações se trabalha com informações dinâmicas. Sendo assim, eu também não poderia deixar de mostrar como atribuir o Theme da página via código. Para configurar o Theme, codifique (C#) o evento desejado conforme mostra a Listagem 8. Para esse exemplo, utilizei o evento Page_Load da página.

protected void Page_Load(object sender, EventArgs e)
    {
        Page.Theme = "nomeTheme";
    }
Listagem 8. – Configurando o Theme em tempo de execução

Conclusão

Como você pode ver os novos recursos do ASP.NET 2.0, com uma atenção principal aos Themes & Skins podem ajudar bastante na configuração da formatação do seu Web site. Estude mais detalhes sobre os recursos do ASP.NET 2.0 e divirta-se!

Desenvolvimento - ASP. NET

Leia também