Themes and Skins
Themes and Skins




Uma Skin é uma descrição do aspecto de controlos.
Um Theme é uma colecção de Skins.
Uma Skin permite-nos definir o aspecto visual que será
aplicado a um determinado controlo.
Um Theme é usado para agrupar um conjunto de Skins.

Para manter um aspecto consistente entre as diferentes
páginas de um Web Site em ASP.NET 1.1 usavam-se CSS –
Cascading Style Sheets.

ASP.NET 2.0 introduz um novo modo de conseguir essa
consistência, podendo aplicar-se temas a todo o site, mantendo
consistência para todos os controlos Web.
1
Criação de Themes e Skins

Um theme contém um ou mais ficheiros skin.

Cada ficheiro skin define o aspecto de um tipo de controlo, por
ex. Button, Label.

Na raiz da aplicação Web deve-se criar uma pasta especial
App_Themes.

No interior desta pasta podemos definir vários temas
introduzindo um directório para cada tema.

Cada directório de um tema pode conter uma skin por omissão
para alguns controlos, que é usada quando indicamos apenas
o theme aplicado à página e não definimos explicitamente a
skin aplicada a um controlo.
2
Criação de Skins – 1/3

Um ficheiro de skin é um ficheiro com a extensão .skin

Um ficheiro de skin pode conter a definição de vários skins
para vários controlos, mas . . .

Para simplificar a manutenção e identificação, pode-se optar
por uma das 2 seguintes aproximações:
1.
Usar um ficheiro de skin para definir os estilos (skins) para
cada tipo de controlo, e dar ao ficheiro o nome desse controlo
(por ex. “Button.skin”)
2.
Usar um ficheiro de skin para definir apenas os estilos de uma
skin em vários controlos. Neste caso o ficheiro terá o nome da
skin (por ex. Colorful.skin). Normalmente o ficheiro Default.skin
conterá as definições por omissão para vários controlos.

Para adicionar um ficheiro de skin a um projecto devemos
seleccionar no Solution Explorer:
Add New Item > Skin File
3
Criação de Skins – 2/3

Os ficheiros de skin são constituídos pelo source view dos
controlos excluindo o atributo id.

Num formulário Web:
formata-se um controlo através da janela de propriedades,
comuta-se para source view,
copia-se o elemento html que define esse controlo, e coloca-se
no ficheiro skin, e
finalmente remove-se o atributo id e adiciona-se o atributo
skinid.
4
Criação de Skins – 3/3
A
primeira definição é a skin por omissão para controlos Button.
A
seguinte define a skin “bold”.
A
atribuição de um nome à skin é feita através do atributo skinid.
Cada skin é identificada pelo valor da propriedade skinid.
A
não atribuição de um valor à propriedade skinid faz com que a
definição de estilo do controlo seja associada à skin por omissão
do theme.
5
Aplicação de Themes e Skins

Para aplicar um theme a uma página adicionámos o atributo
Theme à directiva @Page:

<%@ Page Language="C#" Theme=“Tema1”
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>

Para aplicar skins a controlos específicos adicionámos o
atributo skinid para cada controlo atribuindo-lhe como valor o
nome da skin.

<asp:Label id="Label1" skinid=“fundoVerde" ... </asp:Label>

Se um controlo não especifica o atributo skinid, então a skin
por omissão para esse tipo de controlo será aplicada, se existir.
6