msdn34_capa.jpg

Clique aqui para ler todos os artigos desta edição

 

Criando múltiplas formatações para a sua aplicação ASP.NET

Rodrigo Sendin

 

Rodrigo Sendin (rodrigo.sendin@terra.com.br) é tecnólogo formado pela FATEC-AM. Há 10 anos atua com desenvolvimento de software, e atualmente trabalha na TauNet Consulting como desenvolvedor C#, em projetos de Workflow, SharePoint, ASP.NET, Business Inteligence, e Knowledge Management.

 

Sabe aqueles aplicativos em que você pode escolher o layout gráfico da interface? O aplicativo possuí vários skins que podem ser trocados a hora que desejarmos, assim uma hora o aplicativo é amarelo outra azul, dependendo do skin definido. Conhece isso? O próprio Windows permite esse tipo de configuração quando trocamos o esquema de cores nas propriedades do vídeo.

E o que você acha de embutir essa funcionalidade em seus projetos Web? Pois é isso que veremos neste artigo. O ASP.NET 2.0 trouxe os Themes e Skins que permitem criar múltiplas formatações de layout, de uma forma bem simples e intuitiva.

Folder App_Themes

Vamos começar criando um novo Web Site ASP.NET no Visual Studio 2005. Em nosso exemplo, o projeto se chamará “MSDNThemesSkins”. Adicione na página um Label, um TextBox e um Button. Vamos formatá-los dando destaque para a cor vermelha (Figura 1).

 

image002.jpg

Figura 1. Formulário formatado com destaque na cor vermelha

Observe que fizemos apenas simples formatações, basicamente alteramos as propriedades BackColor, ForeColor e Size dos controles. Até aqui tudo bem, não vimos novidade nenhuma. Vamos criar uma estrutura de pastas para utilizarmos os Themes e Skins. Como mostra a Figura 2, vá ao Solution Explorer e clique com o botão direito sobre o nome do projeto.

 

image004.jpg

Figura 2. Criando um ASP.NET Folder do tipo Theme

Vá até a opção Add ASP.NET Folder e clique na opção Theme. Veja que uma pasta especial do ASP.NET é criada com o nome de App_Themes, e dentro dessa pasta foi criada mais uma com o nome Theme1 que vamos substituir para “Vermelho”.

Como você já deve estar imaginando, cada pasta corresponde a um Theme no projeto. Sendo assim, vamos criar mais duas pastas dentro de App_Themes, uma chamada Azul e outra Verde. No final o Solution Explorer deve estar como mostra a Figura 3.

 

image006.jpg

Figura 3. Pastas criadas dentro de App_Themes

Arquivos skin

Nessa estrutura, cada folder será um Theme, ou em português, um tema para a aplicação. Um tema pode ser composto de vários componentes, necessários para definir uma interface. O principal componente de um Theme é o Skin.

...

Quer ler esse conteúdo completo? Tenha acesso completo