Olá, neste segundo artigo sobre Themes, irei demonstrar como configurar em tempo de execução o theme utilizado por um webform e como configurar um theme para a aplicação completa, sem a necessidade de ficar dizendo toda vez que criamos um webform que iremos utilizar tal theme em questão. Além disso, vou demonstrar de forma fácil como podemos utilizar CSS junto aos themes, para aumentar nossa produtividade. Para exemplificação, irei continuar com os fontes do primeiro artigo, se você ainda não leu, leia aqui.

Integrando os Themes com CSS

Sabemos que o CSS é uma tecnologia utilizada para formatação de estilos e cores em uma página na web mantendo uma organização melhor em um código fonte. Atualmente esta tecnologia está ficando cada vez mais difundida junto as Web Standards (HTML, xHTML, XML e Javascript), padrões da web 2.0 e aplicando-se muito com um conceito chamado tableless.

Em ASP.Net, podemos utilizar o CSS de forma pura ou então aplicar este junto com os themes. A vantagem de aplicarmos junto com os themes é que além do recurso (themes) ter sido criado para este fim (formatação de forma geral) ele se encarrega de fazer algumas tarefas e organizar nosso código para que funcione de forma adequada, que quando fazemos com o CSS puro, devemos aplicar.

Continuando nosso projeto, abra-o no Visual Studio e na pasta Azul (lembre-se que esta pasta é um theme que foi criado dentro da pasta App_Themes), clique com o botão direito e selecione “Add New Item”. Em seguida, escolha o tipo “Style Sheet”, forneça um nome e clique em OK. Feito isso, adicione algumas classes de formações CSS em nosso arquivo; a listagem 1, exemplifica uma formatação definida em CSS.

 

.textBox

{

      font-size:12px;

      font-family:Arial Verdana Sans-Serif;

      color:#0000AA;

      background-color:#efefef;

      border:solid 1px #3333FF;

}

 

.dropDownList

{

      font-size:12px;

      font-family:Arial Verdana Sans-Serif;

      color:#0000AA;

      background-color:#efefef;

      padding:5px;

      border:solid 1px #3333FF;

}

 

.button

{

      font-size:12px;

      font-family:Arial Verdana Sans-Serif;

      color:#ffffff;

      background-color:#000055;

      padding:5px;

      border:solid 2px @dfdfdf;

}

Listagem 1: Formatação CSS de exemplo

 

 Em seguida, abra o arquivo .Skin criado no primeiro artigo, e defina a propriedade CssClass de cada controle para o nome de uma classe CSS criada em nosso arquivo exemplificado anteriormente. A listagem 2 exibe como nosso arquivo .Skin pode ficar:

 

<asp:TextBox runat="server"

             CssClass="textBox" />

            

<asp:DropDownList runat="server"

             CssClass="dropDownList" />

            

<asp:Label runat="server"

           ForeColor="Blue"

           Font-Size="11px"

           Font-Names="Tahoma"

           Font-Bold="true" />

          

<asp:Button runat="server"

           CssClass="button" />

Listagem 2: Formatação de Skin utilizando CSS

 

Se você notar o código da listagem 2, verá que mantivemos a formatação comum para a tag Label, ou seja, os themes permitem que utilizemos recursos do CSS junto com as formatações clássicas do ASP.Net.

Execute a aplicação e como no tutorial anterior fizemos a configuração do theme para a página Default.aspx, esta por sua vez já irá assumir este theme e trabalhat sobre ele.

Ao executar a página, note que as formatações aplicadas no CSS já são incluídas em cada controle, ou seja, o ASP.Net já se encarrega e incluir para nós todos os arquivos com extenção .css disponíveis na pasta do theme configurado, no caso, o theme Azul.  Sendo assim, podemos ter qualquer webform em qualquer local da aplicação (dentro de subpastas) que o ASP.Net se encarrega se incluir os arquivos .CSS de acordo com o caminho do webform.

Configurando um theme em tempo  de execução.

Podemos configurar nosso theme em tempo de execução, ou seja, durante a rendereização de um webform, podemos informar qual o theme a se utilizado. A vantagem de fazermos importa que em alguns casos possamos querer carregar o theme de acordo com determinadas condições, um exemplo disso seria o perfil de um usuário autenticado na aplicação que de acordo com este carrega-se outro theme, entre outras condições que podem vir a sua necessidade.

Antes em nosso exemplo remova o valor da propriedade theme na diretiva Page de nosso webform, pois quando informamos em modo design no artigo anterior, ele aplica o valor na diretiva Page, como propriedade do webform (que herda da classe Page).

Agora em nosso webform, no code-behine adicione o evento OnPreInit e adicione o código da listagem 3.

 

protected override void OnPreInit(EventArgs e)

{

    base.OnPreInit(e);

    this.Theme = "Azul";

}

Listagem 3: Definição de theme em tempo de execução

 

Com isso você consegue facilmente criar condições e setar a propriedade Theme (string) que o ASP.Net irá se encarregar de renderizar com as informações contidas neste theme especificado.

Configurando um theme para toda a aplicação.

Outra saída de configuração, porém muito utilizada quando desejamos ter apenas um theme, é a configuração direta no arquivo de configuração (web.config). Na tag <Page>, podemos informar o qual theme será utilizado através de um atributo chamado “theme”, e sendo assim, toda webform da aplicação que estiver no nível do arquivo de configuração irá assumir este theme. O código da listagem 4, exemplifica como seria esta modificação no web.config.

 

<pages theme="Azul">

      <controls>

            <add />

            <add />

      </controls>

</pages>

 Listagem 4: Definição de theme no arquivo de configuração

Bem pessoal, vimos como de forma fácil podemos aplicar estilos de formatações com CSS em nossas aplicações e também como configurar um theme para ser utilizado em nossa aplicação de forma dinâmica e também como uma forma fixa (em situações onde temos apenas uma formatação). Espero que tenham gostado e caso queria comentar, sugerir, criticar e/ou elogiar, sintam-se a vontade.

Um abraço a todos e até a próxima.

 

Exemplos: ThemesExemplo - Part 2.zip (4,33 kb)

Referências:

http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx
http://www.odetocode.com/articles/423.aspx

Olá Pessoal, neste artigo vou demonstrar um grande recurso do ASP.Net chamado Themes.  Este recurso no ASP.Net visa centralizar todo o estilo de nossa aplicação, buscando formatar controles,  trabalhar com imagens, utilização de CSS, layouts de estrutura (quando utilizamos tableless), dentre outros recursos voltados a formatação em geral.

Podemos dizer que para utilizar este recurso, precisamos entender três etapas básicas para tirarmos bons proveitos e são elas:

1. Definir a pasta especial para themes de nossa aplicação;
2. Criar um theme para a aplicação;
3. Configurar o uso deste theme em questão;

 

Definir a pasta especial para themes de nossa aplicação

Como sabemos, em ASP.Net temos algumas pastas que são especiais, ou seja, são determinadas a fazer executar uma tarefa específica, como por exemplo, a pasta App_Code que têm por objetivo manter fontes de classes utilizadas na aplicação, e para os Themes não é diferente.  Temos uma pasta chamada App_Themes, que mantém todos os temas de nossa aplicação, ou seja, a aplicação em questão pode conter mais de um theme, o que lhe permite facilmente trocar o theme da aplicação à qualquer momento.

A utilidade de se manter mais de um theme na aplicação visa facilitar a troca do estilo de nossa aplicação, por exemplo, em um cenário onde o usuário autenticado pode escolher dentre três themes diferentes o seu preferido, fica fácil podermos alterar qual será utilizado por este usuário e manter tal estilo durante toda a sua sessão.

Nota: Os themes foram inseridos no ASP.Net a partir de sua versão 2.0, então você pode aplicar os conceitos apresentados aqui para qualquer versão igual ou superior a versão 2.0, utilizando Visual Studio 2005 ou 2008.

Criar um theme para nossa aplicação

Bem, vamos à prática. Abra o Visual Studio e crie um novo Website.  Com o criado, na solution Explorer clique com o direito na raiz do website e no menu de contexto, selecione o item Add ASP.Net Folder (você verá aqui todas as pastas especiais do ASP.Net) e clique em Themes. Feito isso o Visual Studio já nos cria a pasta App_Themes (utilizada para armazenar os themes) na raiz do website e já adiciona uma sub-pasta para um novo theme de nossa aplicação nos dando a possibilidade de renomea-la. A figura 1 ilustra como deve ficar nosso Solution Explorer até o momento.

 

Informe o nome que você deseja para seu primeiro theme (em nosso exemplo, estarei informando o nome “Azul”, para criar um theme com cores em tons de azul) e em seguida clique com o direito nesta pasta e no menu de contexto clique em Add New Item. Na janela que irá surgir, selecione o item Skin File e clique em OK.  A figura 1 ilustra nosso Solution Explorer como deve estar até o momento:

 

Figura 1: Solution Explorer da utilização de themes

 

Nota: Arquivos do tipo “Skin” são muito úteis, pois são eles que definem o estilo de cada controle em nossa aplicação, como por exemplo, TextBoxes, DropDownLists, GridViews, Validators, entre outros controles.

Seguindo nosso tutorial, no arquivo Skin adicionado, devemos adicionar a formatação de cada controle sem identificar o Id. A listagem 1 exibe um código de exemplo para um Theme.

 

<asp:TextBox runat="server"

             ForeColor="DarkBlue"

             Font-Size="11px"

             Font-Names="Tahoma"

             BorderColor="#3333FF"

             BorderStyle="Solid"

             BorderWidth="1px" />

            

<asp:DropDownList runat="server"

             ForeColor="Blue"

             Font-Size="11px"

             Font-Names="Tahoma"

             BackColor="LightBlue"

             BorderColor="#3333FF"

             BorderStyle="Solid"

             BorderWidth="1px" />

            

<asp:Label runat="server"

           ForeColor="Blue"

           Font-Size="11px"

           Font-Names="Tahoma"

           Font-Bold="true" />

          

<asp:Button runat="server"

           ForeColor="White"

           Font-Size="11px"

           Font-Names="Tahoma"

           Font-Bold="true"

           BackColor="DarkBlue"

           BorderColor="LightBlue"

           BorderStyle="Solid"

           BorderWidth="2px" />

 

Listagem 1: Definindo formatações para um theme

 

Como vocês podem ver, definimos formatações para controles do tipo TextBox, DropDownList, Label e Button, ou seja, toda vez que algum de nossos web forms estiver utilizando este theme, automaticamente os controles destes tipos estarão aplicando os estilos definidos.

Configurando um Theme

Agora em nossa página Default.aspx, em modo Design na janela de propriedade encontre a propriedade Theme, repare que o Visual Studio já entende que temos o tal Theme para selecionar então informe o theme Azul conforme a figura 2.

 

Figura 2: Configurando um theme em um webform

 

Uma vez com o theme configurado para este webform, arrastre alguns controles para o webform para fazermos alguns testes com nossa aplicação. A listagem 2 exibe um código para nosso webform de exemplo:

 

<table>

    <tr>

        <td><asp:Label ID="lblNome" runat="server" Text="Nome:"></asp:Label></td>

        <td><asp:TextBox ID="txtNome" runat="server" cols="30"></asp:TextBox></td>

    </tr>

    <tr>

        <td><asp:Label ID="lblCidade" runat="server" Text="Cidade:" Width="200px"></asp:Label></td>

        <td>

            <asp:DropDownList ID="dropCidade" runat="server">

                <asp:ListItem Text="Piracicaba"></asp:ListItem>

                <asp:ListItem Text="Campinas"></asp:ListItem>

                <asp:ListItem Text="São Paulo"></asp:ListItem>

                <asp:ListItem Text="Rio de Janeiro"></asp:ListItem>

            </asp:DropDownList>

        </td>

    </tr>

    <tr>

        <td><asp:Label ID="lblAssunto" runat="server" Text="Assunto:"></asp:Label></td>

        <td><asp:TextBox ID="txtAssunto" runat="server" Columns="30"></asp:TextBox></td>

    </tr>           

    <tr>

        <td><asp:Label ID="lblEmail" runat="server" Text="Email:"></asp:Label></td>

        <td><asp:TextBox ID="txtEmail" runat="server" Columns="40"></asp:TextBox></td>

    </tr>

    <tr>

        <td><asp:Label ID="lblMensagem" runat="server" Text="Nome:"></asp:Label></td>

        <td><asp:TextBox ID="txtMensagem" runat="server" Rows="5" Columns="40"
                         TextMode="MultiLine"></asp:TextBox></td>

    </tr>

    <tr>

        <td colspan="2"><asp:Button ID="btnEnviar" runat="server" Text="Enviar" /></td>

    </tr>

</table>

 

Listagem 2: Webform de exemplo utilizando controles clássicos do ASP.Net

 

Em seguida execute a aplicação e veja que eles já assumem o perfil aplicado em nosso arquivo Skin. A figura 3 exibe a aplicação rodando com os themes aplicados.

 

 

Figura 3: Aplicação operando com um theme configurado.

 

Pessoal, vimos como de forma fácil podemos aplicar estilos de formatações em nossas aplicações. Em um próximo artigo vou demonstrar como fazer a configuração do theme para a aplicação como um todo e também em tempo de execução (runtime) para a possibilidade de um usuário poder escolher seu theme preferido.

Espero que tenham entendido como funciona este grande recurso do ASP.Net.
Um abraço
Att,

 

Referência: http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx

Exemplo: ThemesExemplo.zip (4,05 kb)