Just the software you need
No less, No more

Su di noi
Risorse
 

Authoring .NET: Master Pages & Themes

Per gestire colori e impostazioni (o per dirla all'inglese il layout) di tutte le pagine che compongono un sito web è necessaria una strategia. Pensare di modificare per esempio il colore di sfondo o il piè pagina di tutte le pagine con tanti copia e incolla è impensabile. Vediamo gli strumenti che l'ambiente .NET mette a disposizione è cioè Themes e Master Pages.

Partiamo da zero con una nuova pagina .aspx ricordando che questi strumenti possono essere utilizzati anche per pagine che presentano solo testi senza alcun elemento di programmazione. In altre parole anche se il vostro sito potrebbe essere composto da sole pagine .HTML l'utilizzo di ASP.NET porterà dei vantaggi. Creiamo quindi la nostra prima pagina: default.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

Ricordiamo che a meno che il vostro sito non sia completamente statico (senza alcun tipo di elemento programmatico per capirci) sarebbe sempre bene utilizzare il cosidetto code-behind. Per ogni pagina .ASPX viene creata una corrispondente .ASPX.VB con poche righe di codice. Vedremo alla fine in una parte più strettamente legata alla programmazione quali sono i vantaggi.

Partial Class _default
    Inherits System.Web.UI.Page
End Class

Ora modifichiamo la pagina base aggiungendo alcuni elementi presenti in quasi tutti i siti web: una testata (header), un corpo (body) e un piè pagina (footer). Sono gli elementi base per un esempio ma la realtà è ovviamente più complessa (pensiamo ad un menù).

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>This is a test site</title>
</head>
<body><form id="frm" runat="server">
<div>
    <img alt="Softgens" src="logo" /><p>Softgens web site HEADER</p>
</div>

<div>
    <h1>This the title for this page</h1>
    <p>Some text for this page</p>
</div>

<div>
    <hr />
    (c) Copyright Softgens...
</div>

</form></body></html>

E questo è il risultato.

image

Per modificare colori, font, allineamenti insomma tutto quanto legato all'aspetto utilizziamo style=""

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Title for this page</title>
</head>
<body style="background-color: #cccccc; font-family:Verdana";><form id="frm" runat="server">
<div style="text-align:center">
    <img alt="Softgens" src="logo.gif" /><p>Softgens web site HEADER</p>
</div>

<div>
    <h1>This the title for this page</h1>
    <p>Some text for this page</p>
</div>

<div style="font-size:xx-small">
    <hr />
    (c) Copyright Softgens...
</div>

</form></body></html>

image

Il primo elemento da unificare sono proprio gli stili (style) operazione del resto possibile anche con file HTML. Si crea un file .css con le stesse informazioni presenti nel corpo della pagina. 

body {background-color: #cccccc; font-family:Verdana}
.header  {text-align:center}
.content {}
.footer {font-size:xx-small}

Nel file ASPX si inseriscono i riferimenti creando delle classi (header, footer) e soprattutto l'indicazione sul file css da utilizzare.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This is a test site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body><form id="frm" runat="server">
<div class="header">
    <img alt="Softgens" src="logo.gif" /><p>Softgens web site HEADER</p>
</div>

<div class="content">
    <h1>This the title for this page</h1>
    <p>Some text for this page</p>
</div>

<div class="footer">
    <hr />
    (c) Copyright Softgens...
</div>

</form></body></html>

In questo modo tutte le nostre pagine avranno un aspetto comune perché tutti utilizzano lo stesso file CSS. Vediamo ora come "centralizzare" le parti comuni grazie ad una nuova master page.

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Just a test </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body><form id="frm" runat="server">
<div class="header">
    <img alt="Softgens" src="logo.gif" /><p>Softgens web site HEADER</p>
</div>

<div class="content">
    <asp:ContentPlaceHolder id="ContentPlaceHolder" runat="server" />
</div>

<div class="footer">
    <hr />
    (c) Copyright Softgens...
</div>
</form></body></html>

Nella nuova master page sono finite le parti comuni: header, footer riferimento al foglio di stile. La nostra nuova pagina default.aspx avrà quindi questo nuovo aspetto.

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" 
    CodeFile="default.aspx.vb" Inherits="default" %>
<asp:Content ID="Content" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">
    <h1>Title for this page</h1>
    <p>Content for this page</p>
</asp:Content>

Ora il contenuto è molto più semplice da gestire e modificando la pagina masterpage tutte le pagine cambiano aspetto per le parti in comune. Il punto cardine è il ContentPlaceHolder della pagina master che viene richiamato tramite il <asp:Content e il relativo ContentPlaceHolderID. Ricordando che una pagina master può avere più placeholder e che la masterpage può anche essere cambiata a tempo di esecuzione passiamo ad analizzare i temi.

L'aspetto di un sito è legato molto al foglio di stile ma anche, tra l'altro, alle immagini alle quali magari lo stesso foglio di stile fa riferimento (per esempio lo sfondo). Utilizzando i temi possiamo, per cominciare, rendere maggiormente centralizzato questo aspetto. Il tema va creato in una cartella particolare per .NET: tasto destro sulla root e seguire le indicazioni per ASP.NET folder.

image

Spostando il solo file style.css nella directory Theme1 dobbiamo aggiungere una nuova riga nella pagina per indicare il tema e togliere il riferimento al file css visto .NET automaticamente creerà i link a tutti i file presenti della directory del tema indicato. Non dobbiamo dimenticare che i temi possono essere più di uno.

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" 
    CodeFile="default.aspx.vb" Inherits="_default" Theme="Theme1" %>
<asp:Content ID="Content" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">
    <h1>This the title for this page</h1>
    <p>Some text for this page</p>
</asp:Content>

Nella master page eliminiamo la riga:

<link href="style.css" rel="stylesheet" type="text/css" />

Qualche considerazione:

  • I temi possono essere assegnati per singola pagina e quindi ogni pagina può avere un proprio tema
  • L'indicazione sul tema può essere inserita nel web.config e quindi ereditata direttamente da tutte le pagine
  • I temi possono anche essere cambiati a tempo di esecuzione. Per esempio un tema può essere legato alla scelta di un utente.

Oltre agli elementi HTML il cui aspetto è controllato dai fogli di stile le pagine ASPX hanno altri controlli strettamente legati al framework com per esempio le gridview.

<asp:GridView runat="server" ID="gridview" BackColor="LightGoldenrodYellow" 
        BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" 
        GridLines="None">
    <FooterStyle BackColor="Tan" />
    <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" 
        HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
    <HeaderStyle BackColor="Tan" Font-Bold="True" />
    <AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:GridView>

image

L'aspetto di questi elementi può essere centralizzato utilizzando dei file SKIN. Trasferiamo le informazioni dal file ASPX al file SKIN semplicemente copiando l'intera gridview ad eccezione dell'ID.

image

<asp:GridView Width="50%" runat="server" BackColor="LightGoldenrodYellow" 
        BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" 
        GridLines="None">
   <FooterStyle BackColor="Tan" />
    <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" 
        HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
    <HeaderStyle BackColor="Tan" Font-Bold="True" />
    <AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:GridView>

Il nuovo file ASPX sarà quindi più elegante e pulito.

    CodeFile="default.aspx.vb" Inherits="_default" Theme="Theme1" %>
<asp:Content ID="Content" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">
    <asp:GridView  runat="server" ID="gridview" />
</asp:Content>

Grazie allo skin file tutte le gridview di tutte le pagine avranno lo stesso aspetto. Se vogliamo avere più gridview con aspetto diverso possiamo utilizzare uno SkinID da inserire nel file .SKIN aggiungere il riferimento nel file .ASPX

<asp:GridView SkinID="GridA" runat="server" ID="gridview1" />
<asp:GridView SkinID="GridB" runat="server" ID="gridview2" />

image

Spostiamo ora anche il logo all'interno del nostro tema sostituendo nella masterpage logo.gif 

<asp:image runat="server" skinid="logo" id="logo" />

Inseriamo nel file default.skin il nuovo skinid ed infine spostiamo il file logo.gif

image

Abbiamo terminato questa presentazione dedicata alla parte di authoring. Ora devono essere approfonditi altri aspetti strettamente legati alla programmazione.

Softgens
Copyright © 2006/07/08/09/10 Softgens S.r.l. PI 02854230543
info@softgens.com
ie firefox opera safari safari Valid XHTML Valid CSS Icra Approved
| Home page | Chi siamo | Contatto | Credits |