Antonio Feliziani
a- a+

ASP.NET Themes e Skins

Una delle novità introdotte in .NET 2.0 è la possibilità di applicare dei Temi (Themes) alle nostre applicazioni o pagine Web e addirittura applicare delle Skins singolarmente ai controlli delle Web Forms in modo estremamente flessibile e rapido.

Ai tempi in cui nacque Internet diversi anni fa le pagine erano molto scarne, diciamo quasi bianco su nero, successivamente ci fu l'introduzione dei colori, delle immagini, delle immagini animate o animazioni, dei font e quindi di conseguenza dei fogli di stile, identicati oggi anche con la sigla CSS (Cascading Style Sheet).
Un foglio di stile o CSS appunto, è un file che contiene varie definizioni di stili. Uno stile è un insieme di attributi o proprietà che applicati a un oggetto/controllo permettono di modificare il suo aspetto.

.NET 2.0 estende il concetto di CSS introducendo alcuni nuovi concetti, gli ASP.NET Themes e le Skins, vedremo in seguito nel dettaglio che cosa sono e come funzionano. Per capire subito di che cosa andremo a parlare volevo 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 sono stati applicati due Temi diversi.

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

Così come abbiamo applicato questi due Temi possiamo anche applicarne tanti altri in modo da modificare il Look & Feel della nostra applicazione modifiacando una sola riga 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 dei fogli CSS, come detto appena sopra, un insieme di stili (colori, font, ecc.) identificati univocamente da un ID.
Un Theme invece è un termine che sta a un livello superiore e non è altro che un contenitore/raccoglitore di più Skins.
Mentre un Theme può essere applicato a una pagina ASP.NET, una Skin può essere applicata ad 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, e sono:

- BasicBlue
- SmokeAndGlass

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

 

I due temi forniti

Immagino e spero che nelle prime Beta e nella versione finale ne 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 in pacchetti come ASPNuke o PHPNuke, con cui era sufficiente scaricare un Tema nuovo per cambiare faccia all'intero sito. Come già detto .NET 2.0 estremizza questi concetti mettendo in condizione lo sviluppatore di intervenire in modo granulare fino al singolo oggetto/controllo della pagina.

Tornando a noi, i Temi che trovato nella cartella indicata sopra vengono anche chiamati Global Themes perchè disponibili per tutte le applicazioni Web.
Naturalmente una copia delle cartelle con i Temi la trovate anche in InetpubWwwroot.

Il percorso è molto semplice, è sufficiente creare all'interno della propria applicazione Web nella Root una cartella e nominarla Themes. Non appena creata noterete che assumerà un'icona diversa dalle cartelle normali.

All'interno di questa cartella ora potete creare una cartella che avrà il nome del vostro Tema che sarà composto da file .skin (contenti le definizioni di stile), ma non solo, anche immagini, e addirittura CSS.
Nel progetto di esempio mi sono copiato i due Temi presenti di default e ne ho costruito uno ex-novo che ho chiamato MyTheme:

I 3 Temi della Web Application



 

Creazione delle Skins

A questo punto potete creare un nuovo file a cui daremo estensione .skin all'interno della cartella MyTheme. Apriamo il file e andiamo a definire alcuni Skins (stili), per esempio:

In questa riga ho stabilito che tutte le Label nella mia ipotetica WebForm debbano assumere questo stile, cioè devono essere di colore Nero, avere un Font Arial, e una dimensione di 10. Questa è la nostra definizione di Default.
Successivamente possiamo creare definizioni multiple, per esempio:


In questo caso ho definito un'altra Label di Colore rosso, con un Font Arial Bold, e di dimensione 10, e ho dato come SkinID (identificatore univoco) il nome Errore.Ipotizziamo che questo stile lo utilizzeremo per tutte le Label che rappresenteranno un errore.

Per finire un terzo stile:



E come al solito si tratterà di una label color Verde, carattere Arial 10, SkinID Informational e con questo stile rappresentiamo per esempio informazioni di servizio.

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

 

Applicare Themes alle pagine ASP.NET e Skins ai Controlli

Per la prima Label non impostiamo nessun SkinID, per la seconda impostiamo "Errore" come SkinID e per la terza "Informational". A questo punto non ci resta che attivare il Tema MyTheme per la pagina appena creata:


E' necessario utilizzare il nuovo attributo theme all'oggetto page e digitare il nome del nostro Tema. A questo punto si può lanciare la pagina ed ecco il risultato:



Un livello di granularità e di controllo eccezionale, senza contare poi che a questo punto semplicemente cambiando un tema con un altro trasformiamo il nostro sito in mille modi diversi, ciò può significare personalizzarlo in base all'utente o cliente che effettua l'accesso con poco sforzo.

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

E' sufficiente aprire in questo caso il vecchio e caro web.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 ogni controllo, per esempio la Treeview:


La stessa Treeview con due Temi diversi



Ho preso in considerazione il controllo Treeview proprio 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 immagini che sono contenute nella cartella del vostro Tema.

 

Abilitare e disabilitare Themes e Skins a Runtime

Fino ad ora abbiamo visto come è possibile impostare degli Skins ai controlli e applicare degli interi Themes ad una pagina ASP.NET o addirittura ad un'applicazione Web intera. In molte applicazioni però potrebbe sorgere la necessità di modificare queste proprietà durante la fase di runtime.

Per abilitare o disabilitare i Temi o gli Skins applicati a un controllo durante la fase di runtime ci viene in soccorso una proprietà EnableTheming definita nella classe madre System.Web.UI.Control. Essendo tutti i controlli derivati da questa classe, anche la proprietà 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.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Marcello
Ti è piaciuto l'articolo?