Pt:Temas e Skins
From PRADO Wiki
Contents |
Temas e Skins
Temas no Prado fornecem um meio para os desenvolvedores fornecerem um "sentir-ao-olhar" através de toda sua aplicação web. Um tema possui uma lista de valores iniciais para propriedades e vários outros tipos de controle. Quando é aplicado um tema à uma página, todos os controles desta página irão receber os valores iniciais de propriedades deste tema. Isto permite aos temas interagirem com muitas propriedades dos controles PRADO, principalmente para uso de muitas proriedades de exibição que outros métodos (por ex.,CSS) não alcançariam. Por exemplo, os temas podem ser usados para especificar o tamanho-padrão das páginas de todos os Datagrids da sua aplicação através da especificação de um valor-padrão para a propriedade "PageSize" do controle "TDataGrid".
Entendendo os Temas
Um tema é um diretório com arquivos de Skins, javascripts e CSS. Qualquer arquivo Js ou CSS contido em um tema será registrado com a página onde o tema for aplicado. Um Skin é a atribuição de valores iniciais de propriedades de um tipo de controle em particular. Um tipo de controle pode ter mais de um Skin, cada um identificado por um "SkinID" único.
Quando aplicado o tema à uma página, um skin é aplicado ao controle se o tipo de controle e sua propriedade "SkinID" se existir o skin respectivo ao tipo de controle ou SkinID no tema. Note que, se um skin possuir um valor de "SkinID" em branco, ele será aplicado a todos os controle de mesmo tipo que não possuirem um "SkinID" ou este estiver em branco. Um arquivo de Skins possui um ou mais Skins, para um ou mais tipos de controles. Um tema é uma união de skins definidos em todos os arquivos de Skin.
Utilizando os Temas
Para usar um tema, você precisa atribuir a propriedades "Theme" na página com o nome do tema, que é o nome do diretório do tema. Você pode atribuir esta propriedade nas [Pt:Configuracoes_de_pagina | Configurações de Página] ou no construtor ou no método "onPreInit()" da página. Você não pode atribuir a propriedade depois do "onPreInit()" porque neste momento, os controles-filho da página já foram criados (os Skins precisam ser aplicados aos controles logo após estes serem criados.)
Para usar um skin em particular num tema para um controle, atribua a propriedade "SkinID" para o controle no template, como a seguir:
<com:TButton SkinID="Blue" ... />
Isto irá aplicar o Skin 'Blue' ao botão. Note que, o valor inicial das propriedades especificadas para o skin 'Blue' serão sobrepostas se existirem estas propriedades no Botão. Utilize o tema stylesheet se você não quiser que eles sejam sobrepostos. Para utilizar o tema stylesheet, atribua a propriedades "StyleSheetTheme" na página ao invés da propriedade "Theme" (você pode ter as duas propriedades).Para usar arquivos Javascript e CSS contidos em um tema, o controle "THead" deve ser colocado no template da página. Isto porque o tema irá registrar todos os arwuivos com a página e o "THead" é o lugar certo para carregar estes arquivos.
Armazenagem dos Temas
Todos os temas devem ser armazenados, por padrão, sob o diretótio "[AppEntryPath]/themes", onde "AppEntryPath" refere-se ao diretório contendo o script inicial da aplicação. Se você precisa usar um diretório diferente, configure as propriedades "BasePath" e "BaseUrl" no módulo "System.Web.UI.TThemeManager" na configuração da aplicação.
<service id="page" class="TPageService"> <modules> <module id="theme" class="System.Web.UI.TThemeManager" BasePath="mythemes" BaseUrl="mythemes" /> </modules> </service>
Criando os Temas
A criação de temas envolve a criação do diretório do tema e criação dos arquivos de skins ( e possivelmente arquivos CSS e Js). O nome dos arquivos de skin devem ter a extensão ".skin". O formato dos arquivos de skin é o mesmo dos arquivos de template de controles. Como os skins não definem relacionamento pai-filho na apresentação entre os controles, você não pode colocar uma tag de componente dentro de outra. E textos estáticos entre as tags de componente serão descartados. Para definir o skin mencionado anteriormente para o "TButton", escreva o seguinte arquivo de skin:
<com:TButton SkinID="Blue" BackColor="blue" />
Como mencionado anteriormente, você pode colocar vários skins dentro de um arquivo, ou distribuí-los entre vários arquivos. Uma estratégia normalmente utilizada é que cada arquivo de skin contenha apenas skins de um único tipo de controle. Por exemplo, "Button.skin" deve conter apenas skins para o tipo de controle "TButton".
