Antonio Feliziani
a- a+

ASP.NET Themes e Skins

Una delle novità introdotte in .NET 2.0 è lapossibilità di applicare dei Temi (Themes) alle nostreapplicazioni o pagine Web e addirittura applicare delle Skinssingolarmente ai controlli delle Web Forms in modoestremamente flessibile e rapido.

Ai tempi in cui nacque Internet diversi anni fa le pagineerano molto scarne, diciamo quasi bianco su nero,successivamente ci fu l'introduzione dei colori, delleimmagini, delle immagini animate o animazioni, dei font equindi di conseguenza dei fogli di stile, identicatioggi anche con la sigla CSS (Cascading StyleSheet).
Un foglio di stile o CSS appunto, è un file checontiene varie definizioni di stili. Uno stile è uninsieme di attributi o proprietà che applicati a unoggetto/controllo permettono di modificare il suo aspetto.

.NET 2.0 estende il concetto di CSS introducendo alcuni nuoviconcetti, gli ASP.NET Themes e le Skins,vedremo in seguito nel dettaglio che cosa sono e comefunzionano. Per capire subito di che cosa andremo a parlarevolevo mostrare subito un paio di screenshot di ciòche possiamo realizzare.

 


Una WebForm con due temi diversi


Si tratta semplicemente di una WebForm ASP.NET a cui sonostati applicati due Temi diversi.

Come potete osservare l'effetto è ottimo dal puntodi vista visivo.

Così come abbiamo applicato questi due Temi possiamoanche applicarne tanti altri in modo da modificare il Look& Feel della nostra applicazione modifiacando una solariga di codice, carino vero ?

 

Cosa sono ASP.NET Themes e Skins

Possiamo partire con il definire il concetto di Skin.In parole povere una Skin corrisponde ad un vecchio stile deifogli CSS, come detto appena sopra, un insieme distili (colori, font, ecc.) identificati univocamente da unID.
Un Theme invece è un termine che sta a unlivello superiore e non è altro che uncontenitore/raccoglitore di più Skins.
Mentre un Theme può essere applicato a unapagina ASP.NET, una Skin può essere applicataad un singolo controllo oppure a un insieme di controlli.

 

Dove sono e come si creano gli ASP.NET Themes

Visual Studio 2005 ne porta in dote già due, esono:

- BasicBlue
- SmokeAndGlass

e solitamente si trovano nella cartellaC:windowsMicrosoft.NETFramework{versione}ASP.NETClientFilesThemes.

 

I due temi forniti

Immagino e spero che nelle prime Beta e nella versione finalene vengano inseriti altri, anche se immagino che giàall'uscita del prodotto RTM ci saranno giàdecine di Temi già pronti per l'uso.

Se vogliamo questa Feature ricorda molto i Temi usati inpacchetti come ASPNuke o PHPNuke, con cui erasufficiente scaricare un Tema nuovo per cambiare facciaall'intero sito. Come già detto .NET 2.0estremizza questi concetti mettendo in condizione losviluppatore di intervenire in modo granulare fino al singolooggetto/controllo della pagina.

Tornando a noi, i Temi che trovato nella cartella indicatasopra vengono anche chiamati Global Themesperchè disponibili per tutte le applicazioni Web.
Naturalmente una copia delle cartelle con i Temi la trovateanche in InetpubWwwroot.

Il percorso è molto semplice, è sufficientecreare all'interno della propria applicazione Web nellaRoot una cartella e nominarla Themes. Non appenacreata noterete che assumerà un'icona diversadalle cartelle normali.

All'interno di questa cartella ora potete creare unacartella che avrà il nome del vostro Tema chesarà composto da file .skin (contenti ledefinizioni di stile), ma non solo, anche immagini, eaddirittura CSS.
Nel progetto di esempio mi sono copiato i due Temi presentidi default e ne ho costruito uno ex-novo che ho chiamatoMyTheme:

I 3 Temi della Web Application



 

Creazione delle Skins

A questo punto potete creare un nuovo file a cui daremoestensione .skin all'interno della cartellaMyTheme. Apriamo il file e andiamo a definire alcuniSkins (stili), per esempio:

In questa riga ho stabilito che tutte le Label nella miaipotetica WebForm debbano assumere questo stile, cioèdevono essere di colore Nero, avere un Font Arial, e unadimensione di 10. Questa è la nostra definizione diDefault.
Successivamente possiamo creare definizioni multiple, peresempio:


In questo caso ho definito un'altra Label di Colorerosso, con un Font Arial Bold, e di dimensione 10, e ho datocome SkinID (identificatore univoco) il nomeErrore.Ipotizziamo che questo stile lo utilizzeremoper tutte le Label che rappresenteranno un errore.

Per finire un terzo stile:



E come al solito si tratterà di una label colorVerde, carattere Arial 10, SkinID Informational e conquesto stile rappresentiamo per esempio informazioni diservizio.

A questo punto il file è pronto, passiamo a costruireuna WebForm con tre Labels:

 

Applicare Themes alle pagine ASP.NET e Skins aiControlli

Per la prima Label non impostiamo nessun SkinID, per laseconda impostiamo "Errore" come SkinID e per laterza "Informational". A questo punto non ci restache attivare il Tema MyTheme per la pagina appenacreata:


E' necessario utilizzare il nuovo attributo themeall'oggetto page e digitare il nome del nostroTema. A questo punto si può lanciare la pagina ed eccoil risultato:



Un livello di granularità e di controllo eccezionale,senza contare poi che a questo punto semplicemente cambiandoun tema con un altro trasformiamo il nostro sito in millemodi diversi, ciò può significarepersonalizzarlo in base all'utente o cliente che effettual'accesso con poco sforzo.

Volevo sottolineare una cosa importante. In questo modo noiabbiamo specificato che la nostra pagina dovrà usarequel tema, sarebbe utile però poter applicare queltema a tutta la nostra Web Application.

E' sufficiente aprire in questo caso il vecchio e caroweb.config ed aggiungere le seguenti istruzioni:



Abbiamo dimostrato fino a qui ciò che si puòfare con un controllo semplice come la Label. E'bene dire che ora potete divertirvi e creare Temi per ognicontrollo, per esempio la Treeview:


La stessa Treeview con due Temi diversi



Ho preso in considerazione il controllo Treeviewproprio per far vedere come dicevo prima che un tema ècomposto non solo da file .skin ma anche da immagini.Come vedete i + e i - dei rami della Treeview sono immaginiche sono contenute nella cartella del vostro Tema.

 

Abilitare e disabilitare Themes e Skins a Runtime

Fino ad ora abbiamo visto come è possibile impostaredegli Skins ai controlli e applicare degli interiThemes ad una pagina ASP.NET o addirittura adun'applicazione Web intera. In molte applicazioniperò potrebbe sorgere la necessità dimodificare queste proprietà durante la fase diruntime.

Per abilitare o disabilitare i Temi o gli Skins applicati aun controllo durante la fase di runtime ci viene in soccorsouna proprietà EnableTheming definita nellaclasse madre System.Web.UI.Control. Essendo tutti icontrolli derivati da questa classe, anche laproprietà sarà ovunque disponibile.
Infatti basta un semplice:
 

Label1.EnableTheming=false;



per disabilitare lo Skin a un controllo oppure:
 

Page.EnableTheming=false;



per disabilitare il Tema all'intera pagina.