Gestion des thèmes dans un projet .net

Suite à l'article de gestion des ressources, nous verrons aujourd'hui la gestion des thèmes dans un projet .Net.

Un thème ?

Un thème est un ensemble de ressources (images, style, ...). Cet ensemble d'information se trouve dans un sous-répertoire du répertoire "App_Themes" de notre solution. Le nom de ce sous-répertoire définit le nom de notre thème.
Une fois cette architecture respectée, le thème peut contenir autant de répertoire et fichier souhaité, sans contrainte particulière.

Appliquer un thème

Pour cela, il existe plusieurs solutions.

Nous pouvons définir un thème global pour l'application. Pour cela, il suffit de définir dans le fichier de configuration (le web.config pour un site asp.net) le nom du thème à appliquer, au niveau de l'entrée "pages".

Le thème peut aussi être défini pour chaque page. Pour cela, il faut le définir dans l'en-tête de notre template aspx ou ascx. Cette définition surcharge celle faite dans le "web.config".

La dernière solution est de l'appliquer au runtime. Encore une fois, cette solution surcharge les deux précédente :

Attention : contrairement à ce que j'ai écrit dans le screen, l'affectation du thème doit se faire lors du PreInit de la page (plus d'info ici).

Utilisation du thème

Lorsque l'on applique un thème, chaque fichier ".css" inclus dans le dossier est automatiquement appliqué à la page. C'est cool : pas besoin de penser aux références :)

Cependant pour les images, c'est une autre paire de manche...

On ne peut pas utiliser les images avec les chemins relatifs habituels (~/Images/trug.png), ou sinon on inclut le nom du thème dans le chemin. Et à ce moment là, quel intérêt d'utiliser un thème ?

On a alors deux solutions :

• Référencer chaque appel d'une image en code-behind, en utilisant le thème en cours (Page.Theme)
• Utiliser un fichier ".skin"

Met un skin dans ton thème !

Cette idée a été trouvée ici : http://stackoverflow.com/questions/200488/asp-net-theme-images. 

Dans notre fichier ".skin", on définit les images utilisables : 

Le SkinID n'est pas nécessairement unique dans un fichier, mais il est unique par contrôle (dans notre cas Image et ImageButton).

Et les images utilisées sont évidement dans notre répertoire de thème, on peut alors avoir des images différentes par thème, tant que les SkinID sont identique.

On peut aussi référencer des images qui ne sont pas dépendantes de skin ! Bref, la vie est belle :)

On utilise ensuite notre Skin dans les templates aspx, ascx  tel que : 

Et voila.