Home Page Home Page Articoli ASP.NET Themes e Skins con Visual Studio .NET 2005

ASP.NET Themes e Skins con Visual Studio .NET 2005

Una delle novità introdotte in Whidbey è 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.
Autore: David De Giacomi Livello:
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:

Una WebForm con due temi diversi applicati
Una WebForm con due temi diversi applicati



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.

I due temi forniti con Whidbey
I due temi forniti con Whidbey


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:

I 3 Temi della Web Application
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:



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

La stessa Treeview con due Temi diversi
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.

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! :)
Voto medio articolo: 3.9 Numero Voti: 8
David De Giacomi

David De Giacomi

MVP Program Logo Approda al mondo dell'informatica nell' Aprile del 1994. Un amico gli fa conoscere il Quick Basic del DOS. E' cosi che inizia la sua attività di sviluppatore. Prosegue il suo percorso con altri linguaggi (Visual Basic, Pascal, Java, ANSI C), fino ad arrivare a .NET. Per un certo periodo affianca all'attività ... Profilo completo

Articoli collegati

Riordinare le righe di una GridView con AJAX
La GridView, un controllo molto potente e flessibile che però non può offrire tutto. Vediamo in questo articolo come estenderlo implementando meccanismi di reordering delle righe usando AJAX
Autore: Riccardo D'Aria | Difficoltà:
Membership, Role e Profile Provider personalizzati
Chi deve gestire in modo consistente autenticazione, gestione dei ruoli e profilazione degli utenti di un sito Internet non può non conoscere i Providers (MembershipProvider, RoleProvider e ProfileProvider) offerti da ASP.NET. Vediamo che cosa sono, a cosa servono e come si costruiscono.
Autore: Marco Rossi | Difficoltà: | Commenti: 13
Da AJAX ad Atlas nuove tecnologie per un Web di nuova generazione
Nell'ultimo periodo si è parlato molto di Atlas l'ultima tecnologia Microsoft per rendere le pagine web dinamiche, interattive e molto più attraenti, in modo da essere sempre più somiglianti a vere e proprie applicazioni Windows. Cominciamo a conoscere questa tecnologia per sapere cosa potremo fare nelle applicazioni ASP.NET di prossima generazione.
Autore: Matteo Raumer | Difficoltà: | Commenti: 6
La classe Profile di ASP.NET 2.0
In un'applicazione ASP.NET è cosa comune avere la necessità di gestire alcune proprietà che caratterizzino ogni utente, sempre disponibili tra le varie pagine. L'approccio con la versione 1.1 del Framework si basava sull'uso dell'oggetto Session. Con la versione 2.0 il Framework ci mette a disposizione la classe Profile.
Autore: Matteo Raumer | Difficoltà: | Commenti: 3 | Voto:
Le WebParts in ASP.NET 2.0
Scopriamo le WebParts, i nuovi Web Controls di ASP.NET 2.0 che consentono di personalizzare sia i contenuti che l'interfaccia grafica delle nostre applicazioni Web, tecnologia giù utilizzata ampiamente nel prodotto Sharepoint Portal Server 2003.
Autore: Marco Caruso | Difficoltà: | Commenti: 6 | Voto:
Scopriamo l'oggetto Gridview di ASP.NET 2.0
Nonostante la Datagrid di ASP.NET 1.x offrisse già molta flessibilità, con il Framework 2.0 è stato introdotto un nuovo oggetto, la Gridview, erede della DataGrid che, migliorata e potenziata, faciliterà di molto la vita agli sviluppatori Web.
Autore: Giovanni Ferron | Difficoltà: | Commenti: 1 | Voto:
Configurazioni Web con ASP.NET 2.0
Vediamo come cambia e come viene semplificata la configurazione in ASP.NET 2.0 attraverso i nuovi controlli di login, il tool d'amministrazione e l'amministrazione attraverso Internet Information Server (IIS)
Autore: Marco Caruso | Difficoltà: | Commenti: 4
Più facile con il .NET Framework 2.0 :-)
Da quando ho cominciato a "smanettare" per arrivare poi a "lavorare" con il framework 1.x, mi sono trovato subito a mio agio con gli elementi che il .NET metteva a disposizione, ma per alcune cose già sapevo che avrei dovuto lavorare. Con la versione 2.0 del Framework alcune di queste sono state già inserite semplificandomi ulteriormente la vita...
Autore: Matteo Raumer | Difficoltà: | Commenti: 1
Anteprima su Visual Studio .NET 2005
Visual Studio .NET Whidbey, ossia la prossima versione di Visual Studio .NET basato sul Framework 2.0 è ancora in cantiere ma grazie all'Alpha rilasciata agli sviluppatori in occasione della PDC 2003 possiamo vedere quali novità ci aspettano. Eccone alcune!
Autore: David De Giacomi | Difficoltà: | Commenti: 2
Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5