Thèmes et apparences pour vos sites web avec ASP.NET 2.0

Les apparences permettent de paramétrer un ensemble de propriétés pour un ou plusieurs contrôles. Quand je parle de contrôles, je fais bien allusion aux contrôles ASP.NET tels que TextBox, Label, Calendar, GridView, etc. et quand je parle de propriétés, je veux bien sûr parler des propriétés des contrôles telles que BackColor, ForeColor, BorderColor, etc.

Il est important de savoir que vous ne pouvez pas utiliser n'importe quelle propriété d'un contrôle. Seules les propriétés ayant l'attribut ThemeableAttribute à true peuvent être redéfinies. Par exemple, vous ne pourrez pas utiliser la propriété CommandName du contrôle Button ou encore la propriété DataSource du contrôle GridView.

Pour définir un ensemble d'apparences pour un thème, on va utiliser un fichier de type Skin (extension .skin).

Avant de vous donner un exemple d'apparence dans un fichier skin, il vous faut d'abord savoir qu'il existe deux types d'apparences de contrôle :

• l'apparence par défaut : dans ce cas-ci, on va définir un ensemble de propriétés pour un contrôle (exemple TextBox) et si on applique le thème à une page, l'apparence va s'appliquer à tous les contrôles du même type de la page en question (dans notre cas à tous les TextBox) ;
• l'apparence nommée : l'apparence nommée va être identifiée par un nom qui sera placé dans la propriété SkinID. Tous les contrôles du même type d'une page web qui auront comme SkinID le même nom auront donc l'apparence définie.

<asp:TextBox runat="server" BorderColor="Red" BorderStyle="Dashed" BorderWidth="1px"></asp:TextBox>

<asp:TextBox ID="TextBox1" SkinID="TextBoxApparenceExemple" runat="server" BorderColor="Blue" BorderStyle="Groove" BorderWidth="1px"></asp:TextBox>

En plus de définir des apparences dans un thème, vous pouvez y ajouter vos propres feuilles de style (CSS). Ci-dessous, un petit exemple qui définit la couleur de fond de la page ainsi que la couleur utilisée pour la police.

body
{
    background-color: Silver;
    color: Maroon;
}

Il est aussi possible d'inclure des fichiers ressources liés à un thème, comme des images, des fichiers textes, audio, vidéo, etc.

En général, vos fichiers ressources se trouveront dans un sous-dossier de votre dossier des thèmes, mais ce n'est pas une obligation. Ces fichiers peuvent très bien se trouver dans un dossier en dehors du dossier des thèmes.

<asp:Image ID="t2" runat="server" ImageUrl="App_Themes/ThemeSubFolder_Ressources/dotnet.gif" />

<asp:Image ID="t1" runat="server" ImageUrl="~/ApplicationSubFolder_Ressources/dotnet.gif" />

Un thème de page est représenté par un répertoire de thème constitué de fichiers d'apparences de contrôles, de feuilles de style et de fichiers ressources.

Le thème global est un thème qui peut être appliqué à tous les sites web d'un serveur. Tout comme les thèmes de pages, vous avez des fichiers d'apparences de contrôles, des feuilles de style et des fichiers de ressources.

À la différence des thèmes de pages, les thèmes globaux sont stockés dans un répertoire global du serveur Web intitulé Themes.

Étant donné qu'entre la création d'un thème de page et celle d'un thème global, il n'y a aucune différence, mis à part l'endroit où se trouvent les thèmes en question, l'exemple qui suivra se basera sur le principe de thème de page.

Une fois le projet créé, nous allons ajouter le répertoire qui gère les thèmes ASP.NET. Pour cela, faites clic droit sur votre projet dans la fenêtre « Solution Explorer » et cliquez sur « Add/Add ASP.NET Folder/Theme ».

Le répertoire App_Themes est le répertoire de base permettant de gérer vos thèmes. D'ailleurs, lors de la création de ce répertoire, Visual Studio a créé par la même occasion le répertoire Theme1 représentant votre premier thème de départ. Nous utiliserons ce répertoire pour établir notre premier thème en le renommant MonPremierTheme.

Nous allons à présent créer notre fichier d'apparences à l'aide d'un fichier .skin ; faites clic droit sur le répertoire Theme1 puis sélectionnez « Add/New Item… ». Dans la boite de dialogue, sélectionnez le fichier de type .skin et nommez le fichier monApparence.skin.

Maintenant que le fichier d'apparences est créé, nous allons y définir les choses suivantes.

• Label nommé : texte en gras et souligné.
• Image nommée : représentée par une flèche qui sera placée devant notre Label nommé.
• Label par défaut : texte en gras.
• TextBox par défaut : bordure en pointillés et de couleur verte.
• Button par défaut : couleur de fond mauve et couleur de texte en blanc.

Ce qui nous donne le résultat suivant :

<asp:Label runat="server" SkinID="Titre" Font-Bold="true" Font-Underline="true"></asp:Label>
<asp:Image runat="server" SkinID="Fleche" ImageUrl="~/fleche.gif" />
<asp:Label runat="server" Font-Bold="true"></asp:Label>
<asp:TextBox runat="server" BorderStyle="Dotted" BorderColor="#008040" Width="98%"></asp:TextBox>
<asp:Button runat="server" BackColor="#8080C0" ForeColor="white" />

Nous allons aussi créer notre feuille de style (clic droit sur le répertoire monPremierTheme et sélectionnez « Add/New Item…. ». Puis dans la boite de dialogue, sélectionnez le fichier de type Style Sheet et nommez-le monStyle.css) avec les propriétés suivantes.

• Fond d'écran gris.
• Police Verdana de taille 12.
• Les tableaux auront une bordure continue grise de 2 pixels.

Ce qui nous donne le résultat suivant :

body
{
    background-color: #E8E8E8;
    font-family: Verdana;
    font-size: 12px;
}

table
{
    border: 2px solid #CCC;    
}

Pour ceux qui s'y sont perdus, vous devez obtenir l'organisation suivante dans votre projet Web :

Passons à la création de notre page aspx qui va représenter un formulaire (sans logique de traitement derrière) afin que l'utilisateur puisse y insérer son nom, prénom et adresse email. Au passage, vous verrez trois boutons qui permettront de changer de thème dynamiquement (mais ce n'est pas pour tout de suite).

On obtient donc facilement le code suivant :

<form id="form1" runat="server">
<div>
<table width="350px">
<tr>
    <td colspan="2">
        <asp:Image ID="Image_Fleche" runat="server" />&nbsp;
        <asp:Label ID="Label_Titre" runat="server" Text="Formulaire d'exemple"></asp:Label>
    </td>
</tr>
<tr>
    <td style="width: 100px;"><asp:Label ID="Label_Nom" runat="server" Text="Nom "></asp:Label></td>
    <td style="width: 250px;"><asp:TextBox ID="TextBox_Nom" runat="server"></asp:TextBox></td>
</tr>
<tr>
    <td><asp:Label ID="Label_Prenom" runat="server" Text="Prénom "></asp:Label></td>
    <td><asp:TextBox ID="TextBox_Prenom" runat="server"></asp:TextBox></td>
</tr>
<tr>
    <td><asp:Label ID="Label_Email" runat="server" Text="E-mail "></asp:Label></td>
    <td><asp:TextBox ID="TextBox_Email" runat="server"></asp:TextBox></td>
</tr>
<tr>
    <td colspan="2" style="text-align: center;">
        <br />
        <asp:Button ID="Button_Theme1" runat="server" Text="Thème1" />&nbsp;
        <asp:Button ID="Button_Theme2" runat="server" Text="Thème2" />&nbsp;
        <asp:Button ID="Button_Theme3" runat="server" Text="Thème3" />
    </td>
</tr>
</table>
</div>
</form>

Avec comme résultat dans votre navigateur :

Nous allons à présent appliquer le thème monPremierTheme. Pour ce faire, vous devez assigner la propriété Theme de la balise Page de votre page Web avec le nom de votre thème :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TutorialThemes._Default" Theme="MonPremierTheme" %>

Au passage, nous utiliserons les SkinID Titre et Fleche que nous appliquerons respectivement aux contrôles Label_Titre et Image_Fleche :

<asp:Image ID="Image_Fleche" SkinID="Fleche" runat="server" />&nbsp;
<asp:Label ID="Label_Titre" SkinID="Titre" runat="server" Text="Formulaire d'exemple"></asp:Label>

Et sans rien faire d'autre, nous obtiendrons le résultat suivant :

Précédemment, nous avons initialisé le thème via le designer, mais il est tout à fait possible de le modifier durant l'exécution de l'application Web. Pour ce faire, il suffit de setter la propriété Theme de votre objet Page avec le nom du thème à utiliser. À noter que ceci ne peut être fait qu'au moment de l'évènement PreInit ou alors avant cet évènement.

Prenons l'exemple de trois thèmes appelés MonPremierTheme, MonDeuxiemeTheme et MonTroisiemeTheme. Lorsque l'utilisateur cliquera sur un des trois boutons, on sélectionnera le thème correspondant :

protected override void OnPreInit(EventArgs e)
{
    string objBtn1 = Page.Request["Button_Theme1"];
    string objBtn2 = Page.Request["Button_Theme2"];
    string objBtn3 = Page.Request["Button_Theme3"];

    if (objBtn1 != null)
    { Page.Theme = "MonPremierTheme"; }
    else if (objBtn2 != null)
    { Page.Theme = "MonDeuxiemeTheme"; }
    else if (objBtn3 != null)
    { Page.Theme = "MonTroisiemeTheme"; }
    else
    { Page.Theme = "MonPremierTheme"; }

    base.OnPreInit(e);
}

Protected Overrides Sub OnPreInit(ByVal e As System.EventArgs)
    Dim objBtn1 As String = Page.Request("Button_Theme1")
    Dim objBtn2 As String = Page.Request("Button_Theme2")
    Dim objBtn3 As String = Page.Request("Button_Theme3")

    If (Not objBtn1 Is Nothing) Then
        Page.Theme = "MonPremierTheme"
    ElseIf (Not objBtn2 Is Nothing) Then
        Page.Theme = "MonDeuxiemeTheme"
    ElseIf (Not objBtn3 Is Nothing) Then
        Page.Theme = "MonTroisiemeTheme"
    Else
        Page.Theme = "MonPremierTheme"
    End If

    MyBase.OnPreInit(e)
End Sub

Avec comme résultat en passant d'un thème à l'autre :

Jusqu'à maintenant, nous n'avons appliqué un thème qu'à une page, mais il est possible de définir un thème pour l'entièreté des pages d'un site Web. Pour cela, on passera par le fichier de config où on précisera le nom du thème à utiliser :

<?xml version="1.0"?>
<configuration>
    <system.web>
           <pages theme="MonPremierTheme" />
    </system.web>
</configuration>

Vous n'aurez donc plus besoin de préciser le thème pour chaque thème via la propriété Theme de la balise page de vos pages aspx.