Lavora con noi

ASP.Net

Siti tematici

Lezioni:

...
<
31
32
33
34
Indice

Applicare un Tema in fase di runtime

In questa lezione vedremo come applicare un tema in fase di runtime, per consentire ad esempio ad un utente, di scegliere il tema che gli piace.

A tale scopo, riprendiamo il progetto realizzato nella precedente lezione. Nella cartella App_Themes aggiungiamo un nuovo tema chiamiamo "Moderno" e vi aggiungiamo skin per definire l'aspetto dei controlli presenti nell' applicazione. Infine in Esplora Soluzioni, saranno visibili i due temi con i relativi file skin.

Figura 1. I due temi in Esplora Soluzioni

Usiamo la pagina "Default3.aspx" per realizzare gli skin del tema Moderno in modo visuale e poi copiare il contenuto nei file di interfaccia.

Nella Default.aspx,invece, aggiungiamo una DropDownList, che servirà all'utente per scegliere il tema, ed accanto ad esso un Button, che servirà a dare l'invio per impostare il tema scelto.

Per collegare la lista dei temi disponibili al controllo di selezione (DropDownList) dobbiamo scrivere qualche riga di codice nel gestore dell'evento Page_Load. Si tratta di trovare la cartella App_Themes e le sue sottocartelle per poi inserirle tra gli elementi della DropDownList.

Listato 51. Inserire i temi nella DropDownList

protected void Page_Load(object sender, EventArgs e)
{
  if (!Page.IsPostBack)
  {
    string[] temi = Directory.GetDirectories(Request.PhysicalApplicationPath + "App_Themes");
    DropDownList1.Items.Clear();
    foreach(string tema in temi)
      DropDownList1.Items.Add(tema.Substring(tema.LastIndexOf("\\") + 1));
  }
}

NOTA: Per gestire i dati delle cartelle dobbiamo ricordare di includere il namespace System.IO nella pagina di codice.

Una volta selezionato il tema, perché venga applicato dobbiamo implementare il gestore di Page_PreInit, evento che viene generato prima del rendering dei componenti.

Listato 52. Impostare il tema selezionato prima del rendering

protected void Page_PreInit(object sender, EventArgs e)
{
  string tema = Request["DropDownList1"];
  Page.Theme = tema;
  if (tema == null)
    Page.Theme = "Classico";
}

Possiamo ora mandare in esecuzione la piccola applicazione creata.

Figura 2. Tema "Classico"

Proviamo a selezionare il tema "Moderno".

Figura 3. Tema "Moderno"

Ai temi possiamo anche associare dei CSS scegliendo ad esempio Aggiungi nuovo elemento>Foglio di Stile, dopo aver cliccato con il tasto destro sul tema. Ad esempio creiamo il file "Button.css" nel tema "Classico" ed impostiamo lo stile per l'elemento <input>.

Listato 53. Aggiungere un foglio di stile al tema

input
{
  font-style:italic;
  font-family:Verdana;
  color:Fuchsia;
}

Se proviamo a fare un test, ci accorgiamo che solo il tema Classico è affetto dal CSS, come è lecito aspettarsi, e lo stile italic viene preso da entrambi i pulsanti, mentre il colore fucsia solo da uno, quello con il tema disabilitato, infatti è presente uno skin che definisce il colore e comanda sul CSS.

L'esempio realizzato nel corso di questa lezione può essere scaricato da qui.