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