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.

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.

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: 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”) 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

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.

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.

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.