|
Ajoutez des thèmes à vos pages ASP.Net 2.0
Publié le mardi 27 septembre 2005, dernière modification le lundi 28 janvier 2008
|
Découvrez comment avec ASP.Net v2 il est possible de définir facilement plusieurs thèmes pour votre site Web
|
1. Organisation des fichiers
Les thèmes d'un site ASP.Net v2.0 sont contenu dans le dossier App_Themes. Vient ensuite un dossier par thème portant le nom de celui-ci. Le fichier de skin à proprement parler est un fichier ayant pour extension .skin et pour nom le nom du thème.
Voici à quoi ressemble l'arborescence du site avec 3 thèmes Exemple1, Exemple2 et Exemple3.
 Idea |
|
Vous voyez qu'il est possible d'ajouter des feuilles de style CSS. Vous pouvez laisser le nom par défaut, mais personnellement je vous conseille, pour vous y retrouver, de la renommer comme votre thème, c'est plus facile de s'y retrouver quand vous en éditez plusieurs.
|
2. Le fichier .skin
Le fichier .skin contient les définitions de style pour vos contrôles ASP.Net. Il y a deux manières d'attribuer un style à un contrôle avec un tel fichier.
2.1. Style générique
Le style générique est un style par défaut pour un contrôle ASP.Net. Il s'applique au contrôle au moment ou vous l'ajoutez sur la page.
|
|
Copier le code
|
1 <asp:TextBox runat="server" BorderColor="Black"
2 BorderStyle="Solid" BorderWidth="1px"></asp:TextBox>
|
Ceci est un exemple pour obtenir une TextBox avec une bordure continue noire d'une épaisseur de 1 pixel. Le code est le même que pour ajouter un contrôle à une page à l'exception près que l'ID est supprimer.
|
Idea |
|
Pour gagner du temps lors de la création de vos thèmes, déposez un contrôle dont vous voulez définir le style sur une page quelconque, appliquez lui les modifications que vous voulez, copiez le ensuite dans le fichier de skin et supprimez l'ID.
|
2.2. Style spécifique
Le style spécifique est un style précis pour un contrôle ASP.Net. Contrairement au style générique, c'est à vous de préciser au contrôle qu'il doit utiliser ce style plutôt que le style par défaut.
|
|
Copier le code
|
1 <asp:TextBox SkinID="TextBoxSpecial" runat="server" BorderColor="Green"
2 BorderStyle="Dashed" BorderWidth="2px"></asp:TextBox>
|
Ceci est un exemple pour obtenir une TextBox avec une bordure en pointillés verte d'une épaisseur de 2 pixels. Le code est le même que pour ajouter un contrôle à une page à l'exception près que l'ID est supprimer.
|
Idea |
|
Pour gagner du temps lors de la création de vos thèmes, déposez un contrôle dont vous voulez définir le style sur une page quelconque, appliquez lui les modifications que vous voulez, copiez le ensuite dans le fichier de skin et supprimez l'ID.
|
3. La Feuille de style
Pour tout ce qui ne relève pas des contrôles ASP.Net (tables, paragraphe, ...), utilisez une Feuille de Style CSS pour définir vos styles.
 Warning |
|
Attention en redéfinissant vos styles. En faisant des essais pour écrire ce tutoriel, j'ai défini le style de table. Quelle n'a pas été ma surprise en voyant que ce style s'était appliqué au contrôle Calendar (constitué de tables :D).
|
4. Utilisation des thèmes
Dans tous les cas il faut bien faire la différence entre StyleSheetTheme et Theme. Le premier vous permet de redéfinir les valeurs pour les propriétés alors que le deuxième utilise les valeurs définies dans le thème. Regardez les fichiers d'exemple au niveau de la définition de style et vous comprendrez pourquoi le texte change. C'est pour cela qu'il faut bien faire attention aux valeurs que vous définissez si vous utilisez la propriété Theme.
4.1. Web.Config
Pour vous simplifier la vie, vous pouvez définir un thème par défaut pour votre site par l'intermédiaire du fichier Web.Config. Il suffit de rajouter la balise suivant dans le noeuud System.Web de ce fichier.
4.2. Au moment du design
Pour utiliser le thème au moment de la conception, choisissez celui qui vous convient pour la propriété StyleSheetTheme de DOCUMENT.
Pour appliquer un thème spécifique à un contrôle, choisissez dans les propriétés de celui-ci le SkinID qui convient, c'est aussi simple.
4.3. A l'exécution
La dernière manière de changer le skin utilisé est par le code.
|
Warning |
|
Le changement de skin ne peut se faire que lors de l'événement PreInit de la page.
|
Voici le code pour changer de thème. Cependant assurez vous de l'existence du Theme sous peine d'avoir une jolie page d'erreur.
|
En VB.Net avec Theme
|
Copier le code
|
1 Page.Theme = Page.Request("theme")
|
|
En VB.Net avec StyleSheetTheme
|
Copier le code
|
1 Page.StyleSheetTheme = Page.Request("theme")
|
|
En C# avec StyleSheetTheme
|
Copier le code
|
1 Page.StyleSheetTheme = Page.Request["theme"];
|
5. Sources
|
Default.aspx
|
Copier le code
|
1 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head runat="server">
7 <title>Démonstration</title>
8 </head>
9 <body>
10 <form id="form1" runat="server">
11 <pre>
12 <asp:HyperLink SkinID="SansTexte" ID="HyperLink2" runat="server"
13 NavigateUrl="./default.aspx?theme=">
14 Sans theme</asp:HyperLink>
15 <asp:HyperLink SkinID="SansTexte" ID="HyperLink3" runat="server"
16 NavigateUrl="./default.aspx?theme=exemple1">
17 Theme Exemple 1</asp:HyperLink>
18 <asp:HyperLink SkinID="SansTexte" ID="HyperLink4" runat="server"
19 NavigateUrl="./default.aspx?theme=exemple2">
20 Theme Exemple2</asp:HyperLink><br />
21 <br />
22 Textbox sans SkinID :
23 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
24 Textbox avec un SkinID : <asp:TextBox ID="TextBox3" runat="server"
25 SkinID="TextBoxSpecial"></asp:TextBox><br />
26 <br />
27 <asp:Button ID="Button1"
28 runat="server" Text="Un bouton ..." /><br />
29 <br />
30 <asp:HyperLink ID="HyperLink1" runat="server" ForeColor="#8080FF"
31 NavigateUrl="http://www.odelmotte.fr">
32 Un petit lien vers la rubrique dotnet de developpez.com</asp:HyperLink><br />
33 <br />
34
35 <table class="main">
36 <tr>
37 <th class="main">Contrôle Calendar sans SkinID</th>
38 <th class="main">Contrôle Calendar avec un SkinID</th>
39 </tr>
40 <tr>
41 <td align="center">
42 <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>
43 </td>
44 <td align="center">
45 <asp:Calendar ID="Calendar1" runat="server" SkinID="calendarspecial"></asp:Calendar>
46 </td>
47 </tr>
48 </table>
49
50 <br />
51 <table class="main">
52 <tr>
53 <th class="main" style="height: 16px">
54 a</th>
55 <th class="main" style="height: 16px">
56 b</th>
57 <th class="main" style="height: 16px">
58 c</th>
59 </tr>
60 <tr>
61 <td>
62 d</td>
63 <td class="main">
64 e</td>
65 <td>
66 f</td>
67 </tr>
68 <tr>
69 <td>
70 g</td>
71 <td>
72 h</td>
73 <td class="main">
74 i</td>
75 </tr>
76 </table>
77 </pre>
78 </form>
79 </body>
80 </html>
|
|
Default.aspx.vb
|
Copier le code
|
1 Partial Class _Default
2 Inherits System.Web.UI.Page
3
4 Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) _
5 Handles Me.PreInit
6 If Page.Request("theme") IsNot Nothing Then
7 Try
8 Page.Theme = Page.Request("theme")
9 Catch ex As Exception
10 End Try
11 End If
12 End Sub
13 End Class
|
|
Exemple1.skin
|
Copier le code
|
1 <%--
2 Default skin template. The following skins are provided as examples only.
3
4 1. Named control skin. The SkinId should be uniquely defined because
5 duplicate SkinId's per control type are not allowed in the same theme.
6
7 <asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
8 <AlternatingRowStyle BackColor="Blue" />
9 </asp:GridView>
10
11 2. Default skin. The SkinId is not defined. Only one default
12 control skin per control type is allowed in the same theme.
13
14 <asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
15 --%>
16
17 <%--
18 Toutes les textbox auront par défaut le style suivant
19 --%>
20 <asp:TextBox runat="server" BorderColor="#404040" BorderStyle="Solid" BorderWidth="1px">
21 </asp:TextBox>
22
23 <%--
24 Les textbox avec le SkinID suivant auront ce style la
25 --%>
26 <asp:TextBox runat="server" SkinID="TextBoxSpecial" BorderColor="Green"
27 BorderStyle="Dashed" BorderWidth="2px">
28 </asp:TextBox>
29
30 <%--
31 Tous les boutons auront par défaut auront ce style
32 --%>
33 <asp:Button runat="server" BorderColor="#404040" BorderStyle="Solid"
34 BorderWidth="1px" BackColor="White" >
35 </asp:Button>
36
37 <%--
38 Les liens vers les différents exemples auront ce style
39 --%>
40 <asp:HyperLink runat="server" ForeColor="Red" SkinID="SansTexte"></asp:HyperLink>
41
42 <%--
43 Tous les autres liens auront ce style.
44
45 Si vous utilisez StyleSheetTheme, vous pourrez redéfinir toutes les propriété,
46 mais avec Theme, tous vos liens afficheront 'Pourquoi le texte change-t-il avec
47 le thème exemple1 ?'
48 --%>
49 <asp:HyperLink runat="server" ForeColor="Red" Target="_blank">Pourquoi le texte
50 change-t-il avec le thème exemple1 ?
51 </asp:HyperLink>
52
53 <%--
54 Mise en forme des calendriers
55 --%>
56 <asp:Calendar runat="server" BackColor="lightblue" BorderColor="green"
57 BorderStyle="Solid" BorderWidth="1px" ForeColor="White" >
58 <SelectedDayStyle BackColor="DarkBlue" BorderColor="#404040" BorderStyle="Solid"
59 BorderWidth="1px" ForeColor="#E0E0E0" />
60 <WeekendDayStyle BackColor="#FFFFC0" />
61 <OtherMonthDayStyle BackColor="Gainsboro" BorderStyle="None" BorderWidth="0px" />
62 <DayStyle ForeColor="Black" />
63 <TodayDayStyle BorderColor="Red" BorderStyle="Solid" BorderWidth="1px" />
64 <DayHeaderStyle ForeColor="Black" />
65 <TitleStyle BackColor="#0000C0" BorderColor="#404040" BorderStyle="Solid"
66 BorderWidth="1px"
67 Font-Bold="True" ForeColor="White" />
68 </asp:Calendar>
69
70 <%--
71 Un calendrier un peu différent s'il porte le SkinID "CalendarSpecial"
72 --%>
73 <asp:Calendar SkinID="calendarspecial" runat="server" BackColor="White" BorderColor="#404040"
74 BorderStyle="Solid" BorderWidth="1px" ForeColor="White" >
75 <SelectedDayStyle BackColor="DarkBlue" BorderColor="#404040" BorderStyle="Solid"
76 BorderWidth="1px" ForeColor="#E0E0E0" />
77 <WeekendDayStyle BackColor="#FFFFC0" />
78 <OtherMonthDayStyle BackColor="Gainsboro" BorderStyle="None" BorderWidth="0px" />
79 <DayStyle ForeColor="Black" />
80 <TodayDayStyle BorderColor="Red" BorderStyle="Solid" BorderWidth="1px" />
81 <DayHeaderStyle ForeColor="Black" />
82 <TitleStyle BackColor="#0000C0" BorderColor="#404040" BorderStyle="Solid"
83 BorderWidth="1px"
84 Font-Bold="True" ForeColor="White" />
85 </asp:Calendar>
|
6. Le résultat
Voici ce que vous obtiendrez en exécutant les sources contenues dans le zip
|
|
|
|
|
Sans aucun theme
|
Avec le theme Exemple1
|
Avec le theme Exemple2
|
7. Ressources
Voici
le site utilisé
pour l'écriture de ce tutoriel. Vous retrouverez une page avec une sélection de contrôles et 2 skins.
Remerciements
Merci à
Jab
,
Morpheus
et
Pharaonix
pour leur commentaires et corrections
|