Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Masters Pages & Theme

Personalizziamo le nostre applicazioni
Personalizziamo le nostre applicazioni
Link copiato negli appunti

Chiunque si sia imbattuto per la prima volta con del codice ASPX presente nella parte 'body' di una pagina web saràrimasto stupito del cambiamento radicale che la Microsoft ha apportato al buon vecchio ASP. Le cose si complicano al primo tentativo di personalizzare graficamente un intero sito web. I problemi che sorgono sono di norma due: il primo che non è possibile associare un foglio di stile che vada bene per tutti gli elementi della pagina, essendo essi divisi tra elementi HTML e 'WebControl' ASP.NET, ed il secondo che il passaggio dal lavoro grafico a pagine web deve essere fatto, almeno la parte finale, da un programmatore. A peggiorare il tutto ci pensa il mix tra tag ASP.NET e HTML che non permettono ad un web designer di intervenire in maniera sicura su una pagina già montata.

Sul WEB è facile trovare molti modi utilizzati in questi anni per fare fronte a questa effettiva mancanza del linguaggio di casa Microsoft. Dai buoni vecchi template HTML con tag prefissati da sostituire a run-time, che ovviamente non possono far uso di 'WebControl', alla creazione di 'Web Control' personalizzati per un migliore supporto alla fase di aggiunta degli stili. Ognuno di questi metodi comporta una perdita o dal lato strutturale o dal lato prestazionale. Tutte le soluzioni escogitate sono un continuo cercare un punto di equilibrio tra la velocità di sviluppo e di esecuzione con la grafica e/o accessibilità della nostra applicazione.

Se a tutto questo aggiungiamo che alcuni 'Web Control',oltre ad avere delle proprietà per gli stili diversi dai normali tag CSS, hanno anche la possibilità di personalizzare gli elementi in cui sono divisi (il GridView peresempio è composto dalla testata, dalla coda, dagli elementi di paginazione, dalle righe alternate per la visualizzazione, dalle righe per l'editing etc..) il quadro si fa abbastanza nero.

La soluzione ai nostri problemi è arrivata con ASP.NET 2.0. Con il rilascio del Framework.NET 2.0 la società di Redmond, non potendo tornare indietro sui suoi passi e non potendo allo stesso tempo lasciare inascoltate le richieste di tutta la comunità di sviluppatori, ha optato per una soluzione che rappresenta a tutti gli effetti un taglio totale con il passato, seppure tutti i vecchi metodi siano tuttora supportati sia per compatibilità con il passato sia per comodità nel caso in cui non si abbia bisogno di un pesante restyling.

La prima cosa che possiamo notare con l'ausilio della nuova guida è la decisione che una pagina web è ormai a tutti gli effetti un'applicazione a sé stante e quindi non è più, o per lo meno non come lo era prima di ASP.NET, roba da grafici. Il lavoro finale sulle pagine è ad uso esclusivo del programmatore.

La seconda è che abbiamo finalmente a disposizione degli strumenti nati esclusivamente per abbellire le nostre pagine. Questi nuovi strumenti sono le 'Masters Pages' ed i 'Theme'! Entrambi non sono altro che un miglioramento dei 'trucchi' di cui abbiamo parlato sopra senza le limitazioni accennate.

Le 'Masters Pages' altro non sono che dei templateversione ASP.NET, queste ci permettono di creare delle paginestandard alle quali andremo a sostituire dei 'pezzi'opportunamente dichiarati:

<asp:contentplaceholder id="QuiVaIlContenuto" runat="server">

Questa è una pagina di prova!

</asp:contentplaceholder>

e salvare la nostra pagina con l'estensione '.master',inoltre queste pagine non hanno la direttiva '@page'che viene sostituita dalla direttiva '@master'

<%@ master language="VB" %>

Nella nostra pagina figlia non dovremo fare altro che specificare la 'Master Page' di riferimento

<%@ page language="VB" masterpagefile="~/TemplateDiProva.master" %>

ed il contenuto da sostituire:

<asp:content id="Contenuto" contentplaceholderid="QuiVaIlContenuto" runat="server">

Questa è la mia pagina!

</asp:content>

All'esecuzione dell'applicazione avremo una pagina composta dalla grafica della nostra 'Master Page' con la sola modifica della scritta contenuta nella pagina 'realmente' chiamata. Con le 'Master Pages' è possibile gestire sia del normale codice HTML che 'Web Control', in questo modo la nostra pagina avrà sempre un comportamento 'runat="server"' ovvero come una normale pagina ASPX come se la sostituzione non fosse mai avvenuta. Cosa da non sottovalutare è la possibilità di accedere a variabili, funzioni e proprietà presenti nella pagina 'master' dalla pagina contenuto, 'Content Page'.

Inoltre bisogna ricordare che una 'Master Page' può ereditare a sua volta da un'altra 'Master Page' a cascata fino alla 'Content Page' e che verranno visualizzati tutti i testi, i codici html ed i controlli che non siano stati sovrascritti dalla 'Content Page' di turno.

La seconda novità sono i 'Theme' o più semplicemente Temi. I Temi si trovano in una cartella speciale chiamata 'App_Themes' all'interno della quale si trova una directory per ogni Tema che è possibile associare alle nostre pagine ASPX. A loro volta le directory dei Temi hanno al loro interno sia dei comuni file CSS per la personalizzazione del codice HTML che un nuovo tipo di file chiamati 'Skin', pelle, che altro non sono se non le dichiarazioni di 'Web Control' completi con una sola modifica: la sostituzione del parametro 'ID' con il parametro opzionale 'SkinID'.

I Temi possono essere associati a tutti i livelli ossia è possibile associare un Tema predefinito a tutta la macchina e quindi a tutti i siti che essa ospita, sia a livello di applicazione che di 'Web.Config'., sia all'interno di una pagina accanto alla direttiva '@page'

<%@ page Theme=" nome della cartella che contiene il tema " %>

che durante l'evento '__PreInit'

Protected Sub Page_PreInit()

Page.Theme = ' nome della cartella che contiene il tema '

End Sub

ma cosa fanno in realtà i Temi e soprattutto i relativi file 'Skin'?

Quando una pagina trova la dichiarazione di un Tema imposta ai propri 'Web Control' tutti gli stili che il Tema ha ridefinito al suo interno in maniera automatica! In realtà parlare di stili è errato perchè nella dichiarazione di uno 'Skin' possiamo per esempio definire il 'comportamento' di tutto il 'Web Control', per esempio potremo decidere di fare visualizzare tutti i 'TEXTBOX' con un valore di testo personalizzato.

Ma visto che siamo pignoli e che ognuno ha delle esigenze diverse sono state date delle priorità e delle precedenze sul comportamento finale che una pagina deve assumere.

La prima è l'utilizzo di 'SkinID', questo parametro permette al 'Web Control' della pagina ASPX di chiedere che il suo aspetto sia copiato dal relativo controllo all'interno del file 'Skin' in modo da non essere costretti ad avere un bottone uguale per tutta l'applicazione. L'utilizzo di 'SkinID' si rende necessario dal fatto che il tema 'impone' il proprio stile alla pagina, ovvero se dichiariamo un bottone all'interno della pagina ed il suo stile all'interno del file 'Skin' la pagina mostrerà lo stile presente in 'Skin'. Inoltre ogni tema supporta al massimo un comportamento di default, ovvero senza il parametro 'SkinID', per ogni 'Web Control'.

Se vogliamo invertire questo comportamento dobbiamo variare la dichiarazione del Tema nel seguente modo:

<%@ Page Language="VB" StyleSheetTheme="TemaPrincipale" %>

In questo modo la nostra pagina sovrascriverà le dichiarazione del Tema con le proprie.

Se però all'interno della stessa pagina, sia in modo diretto che indiretto, sono presenti entrambe le dichiarazioni possibili, il comportamento della pagina tornerà alla normalità, ovvero il Tema vince sugli stili della pagina.

<%@ Page Language="VB" Theme="TemaPrincipale" StyleSheetTheme="TemaSecondario" %>

in questo modo è per esempio possibile per un provider imporre che gli utenti utilizzino sempre lo stesso stile all'interno delle loro pagine per un determinato controllo.

L'utilizzo di questi nuovi controlli è talmente semplice che la loro creazione non comporta particolare onere in termini di tempo. Visual Web Developer 2005 Express (VWD) è in grado di creare pagine 'master' correttamente impostate e file 'Skin', oltre alla cartella 'App_Themes' se non presente, con del codice di esempio per ricordarci il corretto utilizzo.

Chi ha avuto modo di vedere il codice sorgente di alcuni famosi forum o software CMS avrà sicuramente notato che il modo di trattare gli stili utilizzato dai Temi è sicuramente molto simile a quanto fatto dai software in questione. C'è però una notevole differenza, in quei software tutta la parte di gestione degli stili è stata implementata manualmente mentre le nostre prossime applicazioni ASP.NET 2.0 non avranno bisogno di una singola riga di codice per essere operativi alla prima esecuzione.

Con i nuovi strumenti che il ASP.NET 2.0, grazie al Microsoft Framework.NET 2.0, ci mette a disposizione non ci sono più scuse per non avere delle pagine belle, accessibili e totalmente personalizzabili!


Ti consigliamo anche