Whidbey e i Temi, un esempio...
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. Ogni stile viene codificato con un nome o ID univoco.
Visual Studio Whidbey 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 con Whidbey:




Si tratta semplicemente di una WebForm ASP.NET a cui sono stati applicati due Temi diversi. Come potete osservare l'effetto è molto accattivante 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 .NET Whidbey ne porta in dote già due, e sono:

- BasicBlue
- SmokeAndGlass

e solitamente si trovano nella cartella C:\windows\Microsoft.NET\Framework\{versione}\ASP.NETClientFiles\Themes.



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 Whidbey 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 \Inetpub\Wwwroot\.

Chi volesse già cominciare a creare i propri temi può esercitarsi con Whidbey.
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 in Whidbey e ne ho costruito uno ex-novo che ho chiamato MyTheme:




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:



Fantastico eh ? 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 (che in Whidbey è già integrata):



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.

N.B. E' da notare che queste istruzioni devono essere inserite nell'evento PreInit che è nuovo ed è stato introdotto in Whidbey. La documentazione ci lascia semplicemente un messaggio significativo riguardante questo nuovo evento to be supplied..., cioè non c'è documentazione che ci spiega cos'è e come funziona!
Si sa solo che devono essere inserite lì prima quindi che i controlli vengano aggiunti alla pagina e vengano renderizzati con tutti i loro attributi.


Conclusioni
Come avete visto anche in questa Overview, Whidbey promette di essere uno strumento all'avanguardia nello sviluppo di Applicazioni, in particolare quelle Web. Le recente tecnologie appena illustrate ci permettono di customizzare rapidamente l'aspetto (Look & Feel) delle nostre Web Application con pochi click di mouse.
I fogli di stile CSS sicuramente erano una buona cosa ma ora abbiamo la possibilità di intervenire direttamente su ogni controllo all'interno della pagina. Questi ASP.NET Themes possiamo considerarli come dei, passatemi il termine, "Fogli di stile orientati agli oggetti", perchè effettivamente sono stati studiati e implementati apposta per accoppiarsi ed essere complementari all'Object Model e all'architettura di ASP.NET. A voi i giudizi! :)