Esta lição do capítulo fala especificamente como aplicar temas em suas aplicações web. Fala da possibilidade do uso de CSS também, mas não aprofunda no assunto.
Como já vistos em lições anterires o uso de Temas são para facilitar a manutenção do visual da aplicação, podendo alterar em um único local, e principalmente tornar dinâmico o visual de sua aplicação.
Para começar a criar seu Tema, é bem simples, clique com o botão direito no Solution Explorer, clique em Add Asp.Net Folder, em seguinda clique em Theme. Dentro desta pasta Theme você irá criar seus temas personalizados, cada um dentro da respectiva pasta. Exemplo, dentro da pasta Theme crie a pasta Azul e outra chamada Vermelho.
A seguir basta adicionar dentro de cada pasta, arquivos skins, css e imagens. O ideal é criar um tema por completo e depois sair copiando e colando nos demais temas, só editando o que for especifico de cada tema.
Para aplicar o tema a sua página web ou para toda aplicação, existem dois atributos que podem ser usados, Theme e StyleSheetTheme. Você pode definir essas propriedades diretamente no web.config ou nas páginas que achar necessário:
<pages Theme=”themeName”> ou <pages StyleSheetTheme=”themeName”>
Qual a diferença entre ambos?
Quando se o StyleSheetTheme, essas configurações são aplicadas aos controles antes de aplicar possíveis configurações definidas dirementa no controle, ou seja, por ordem de hierarquia irá prevalecer configurações que estiverem diretamente no controle, caso não tenha nenhuma é aplicado as configuraçoes do Tema.
Como é de se imaginar o uso do atributo Theme é o contrário ele sempre irá prevalecer, substituindo qualquer propriedade definida diremante no controle.
Para criar um Arquivo Skin você deve na pasta do seu tema clicar com o botão direito, então, Add New Item. Em seguinda, selecione Skin File e basta definir o nome do seu skin. Existem dois tipos de skin. Default skins são aplicados a todos os controles daquele tipo, ou seja, se você criar um skin para botões, em todos os botões serão aplicadas as configurações. E Named skins que na verdade é o skin mas com um ID, e para um botão receber essas configurações deve obrigatoriamente informar esta ID, caso contrário não receberá as configurações.
Exemplo de Default skins:
<asp:Button runat="server" BackColor="Red" ForeColor="White" Font-Name="Arial" Font-Size="9px" />
Exemplo de Named skins:
<asp:Label runat="server" SkinId="Title" Font-Size="18px" />
Além de arquivos skin, no seu Tema é possível ainda adicionar imagens e arquivos de folhas de estilos, o famoso CSS. Tudo bem simples e sem segredo.
Como ja explicado para adicionar um Tema basta adicionar os atributos Theme ou StyleSheetTheme no web.config ou em sua página.
É possível também definir uma página ou controle que você não quer que seja aplicado o Tema, basta alterar a propriedade EnableTheming para false: EnableTheming="false".
Essa propriedade pode ser aplicada para toda a página ou para controles especificos.
Para aplicar um tema dinamicamente, ou seja, em tempo de execução, você deve fazer isso no evento Page_PreInit e definir a propriedade Page.Theme.
Protected void Page_PreInit(object sender, EventArgs e)
{
switch (Session["theme"])
{
case "Blue":
Page.Theme = "BlueTheme";
break;
case "Pink":
Page.Theme = "PinkTheme";
break;
default:
Page.Theme = "GreenTheme";
break;
}
}
E assim finaliza mais uma lição.
Abraços...
Nenhum comentário:
Postar um comentário