Vue d'ensemble des thèmes et des apparences ASP.NET
Mise à jour : novembre 2007
Un thème est une collection de paramètres de propriété qui vous permettent de définir l'apparence des pages et des contrôles puis de l'appliquer de manière cohérente sur les pages d'une application Web ou de toutes les applications Web d'un serveur.
Thèmes et apparences de contrôle
Les thèmes se composent d'un ensemble d'éléments : apparences, feuilles de style en cascade (CSS), images et d'autres ressources. Au minimum, un thème contient des apparences. Les thèmes sont définis dans des répertoires spéciaux de votre site Web ou de votre serveur Web.
Apparences
Un fichier d'apparence possède l'extension .skin et contient les paramètres de propriété des contrôles individuels, comme les contrôles Button, Label, TextBox ou Calendar. Les paramètres d'apparence de contrôle sont semblables au balisage du contrôle lui-même, mais contiennent uniquement les propriétés que vous souhaitez définir dans le cadre du thème. Par exemple, l'apparence suivante représente l'apparence de contrôle du contrôle Button :
<asp:button BackColor="lightblue" ForeColor="black" />
Vous créez des fichiers .skin dans le dossier Theme. Un fichier .skin peut contenir une ou plusieurs apparences de contrôle pour un ou plusieurs types de contrôle. Vous pouvez définir les apparences dans un fichier séparé pour chaque contrôle ou définir toutes les apparences d'un thème dans un seul fichier.
Il existe deux types d'apparences de contrôle, les apparences par défaut et les apparences nommées :
Une apparence par défaut s'applique automatiquement à tous les contrôles du même type lorsqu'un thème est appliqué à une page. Une apparence de contrôle est une apparence par défaut si elle ne possède pas d'attribut SkinID. Par exemple, si vous créez une apparence par défaut pour un contrôle Calendar, l'apparence s'applique à tous les contrôles Calendar des pages qui utilisent le thème. (Les apparences par défaut sont mises en correspondance exacte par type de contrôle, afin qu'une apparence Button s'applique à tous les contrôles Button, mais pas aux contrôles LinkButton ou à ceux qui dérivent de l'objet Button.)
Une apparence nommée est une apparence de contrôle dotée d'un ensemble de propriétés SkinID. Les apparences nommées ne s'appliquent pas automatiquement aux contrôles par type. Vous appliquez explicitement une apparence nommée à un contrôle en définissant la propriété SkinID du contrôle. La création d'apparences nommées vous permet de définir différentes apparences pour plusieurs instances du même contrôle dans une application.
Feuilles de style en cascade
Un thème peut également inclure une feuille de style en cascade (fichier .css). Lorsque vous placez un fichier .css dans le dossier des thèmes, la feuille de style s'applique automatiquement dans le cadre du thème. Vous définissez une feuille de styles à l'aide de l'extension de nom de fichier .css dans le dossier des thèmes.
Graphiques de thème et autres ressources
Les thèmes peuvent aussi inclure des graphiques et autres ressources, comme les fichiers de script ou les fichiers audio. Par exemple, une partie de votre thème de page peut contenir une apparence pour un contrôle TreeView. Dans le cadre du thème, vous pouvez inclure les graphiques utilisés pour représenter les boutons Développer et Réduire.
En général, les fichiers de ressources du thème se trouvent dans le même dossier que les fichiers d'apparence de ce même thème, mais ils peuvent aussi résider à un autre emplacement de l'application Web, dans un sous-dossier du dossier des thèmes par exemple. Pour faire référence à un fichier de ressources d'un sous-dossier du dossier des thèmes, utilisez un chemin d'accès similaire à celui qui est représenté dans cette apparence de contrôle Image :
<asp:Image ImageUrl="ThemeSubfolder/filename.ext" />
Vous pouvez aussi stocker vos fichiers de ressources en dehors du dossier des thèmes. Si vous utilisez la syntaxe tilde (~) pour faire référence aux fichiers de ressources, l'application Web recherche automatiquement les images. Par exemple, si vous placez les ressources d'un thème dans un sous-répertoire de votre application, vous pouvez utiliser les chemins d'accès sous la forme ~/SubFolder/nomfichier.ext pour faire référence aux fichiers de ressources, comme dans l'exemple suivant.
<asp:Image ImageUrl="~/AppSubfolder/filename.ext" />
Définition de la portée des thèmes
Vous pouvez définir des thèmes pour une seule application Web ou comme thèmes globaux pouvant être utilisés par toutes les applications d'un serveur Web. Après avoir défini un thème, vous pouvez le placer sur des pages individuelles à l'aide de l'attribut Theme ou StyleSheetTheme de la directive @ Page, ou l'appliquer à toutes les pages d'une application en définissant l'élément <pages> dans le fichier de configuration de l'application. Si l'élément <pages> est défini dans le fichier Machine.config, le thème s'applique à toutes les pages des applications Web du serveur.
Thèmes de page
Un thème de page constitue un dossier de thèmes avec des apparences de contrôle, des feuilles de style, des fichiers graphiques et autres ressources créées comme sous-dossier du dossier \App_Themes de votre site Web. Chaque thème représente un sous-dossier différent du dossier App_Themes. L'exemple suivant illustre un thème de page typique, définissant deux thèmes nommés BlueTheme et PinkTheme.
MyWebSite
App_Themes
BlueTheme
Controls.skin
BlueTheme.css
PinkTheme
Controls.skin
PinkTheme.css
Thèmes globaux
Un thème global représente un thème que vous pouvez appliquer à tous les sites Web d'un serveur. Les thèmes globaux vous permettent de définir une apparence globale pour votre domaine lorsque vous gérez plusieurs sites Web sur le même serveur.
Les thèmes globaux sont semblables aux thèmes de page en ce sens qu'ils incluent des paramètres de propriété, des paramètres de feuilles de style et des graphiques. Cependant, les thèmes globaux sont stockés dans un dossier global du serveur Web intitulé Themes. Un site Web du serveur et une page d'un site Web peuvent référencer un thème global.
Priorité des paramètres de thème
Vous pouvez définir la priorité que les paramètres de thème ont sur les paramètres de contrôle locaux en spécifiant le mode d'application du thème.
Si vous définissez la propriété Theme d'une page, les paramètres de contrôle du thème et ceux de la page sont fusionnés pour former les paramètres ultimes du contrôle. Si un paramètre de contrôle est défini à la fois dans le contrôle et dans le thème, les paramètres de contrôle du thème substituent tous les paramètres de page du contrôle. Cette stratégie permet au thème de créer une apparence cohérente sur les pages, même si les contrôles des pages possèdent déjà des paramètres de propriété individuels. Par exemple, elle vous permet d'appliquer un thème à une page créée dans une version antérieure d'ASP.NET.
Vous pouvez également appliquer un thème sous forme de thème de feuille de style en définissant la propriété StyleSheetTheme de la page. Dans ce cas, les paramètres de page locaux sont prioritaires sur ceux définis dans le thème lorsque le paramètre est défini aux deux emplacements. Il s'agit du modèle utilisé par les feuilles de style en cascade. Vous pouvez appliquer un thème sous forme de thème de feuille de style pour pouvoir définir les propriétés des contrôles individuels de la page tout en appliquant un thème pour une apparence globale.
Les éléments de thèmes globaux ne peuvent pas être remplacés partiellement par les éléments de thèmes de niveau application. Si vous créez un thème de niveau application avec le même nom qu'un thème global, les éléments dans le thème de niveau application ne remplaceront pas les éléments de thèmes globaux.
Propriétés que vous pouvez définir à l'aide de thèmes
À titre de règle, vous pouvez utiliser les thèmes pour définir des propriétés relatives à l'apparence ou au contenu statique d'un contrôle ou d'une page. Vous ne pouvez définir que les propriétés ayant un attribut ThemeableAttribute défini avec la valeur true dans la classe du contrôle.
Les propriétés qui spécifient explicitement le comportement de contrôle plutôt que l'apparence n'accepte pas de valeurs de thème. Par exemple, vous ne pouvez pas définir la propriété CommandName d'un contrôle Button en utilisant un thème. De la même façon, vous ne pouvez pas utiliser un thème pour définir la propriété AllowPaging ou DataSource d'un contrôle GridView.
Notez que vous ne pouvez pas utiliser de générateurs d'expressions qui génèrent des expressions de code pour l'assignation dans une page au moment de la compilation, dans des thèmes ou des apparences.
Comparaison entre les thèmes et les feuilles de style en cascade
Les thèmes sont semblables aux feuilles de style en cascade en ce sens que tous deux définissent un ensemble d'attributs communs qui peut s'appliquer à n'importe quelle page. Toutefois, les thèmes diffèrent des feuilles de style sur les aspects suivants :
Les thèmes peuvent définir plusieurs propriétés d'un contrôle ou d'une page, et pas seulement les propriétés de style. Par exemple, vous pouvez spécifier les graphiques d'un contrôle TreeView, la disposition de modèle d'un contrôle GridView à l'aide de thèmes.
Les thèmes peuvent contenir des graphiques.
Les thèmes ne s'affichent pas en cascade de la même manière que les feuilles de style. Par défaut, toutes les valeurs de propriété définies dans un thème référencé par la propriété Theme d'une page substituent les valeurs de propriété définies de façon déclarative sur un contrôle, à moins que vous n'appliquiez explicitement le thème à l'aide de la propriété StyleSheetTheme. Pour plus d'informations, consultez la section Priorité des paramètres de thème ci-dessus.
Un seul thème peut être appliqué à chaque page. Vous ne pouvez pas appliquer plusieurs thèmes à une page, contrairement aux feuilles de style où plusieurs feuilles de style peuvent être appliquées.
Considérations relatives à la sécurité
Les thèmes peuvent entraîner des problèmes de sécurité lorsqu'ils sont utilisés sur votre site Web. Les thèmes nuisibles peuvent être utilisés pour :
Modifier le comportement d'un contrôle afin qu'il ne se comporte pas comme prévu.
Injecter un script côté client, ce qui représente par conséquent un risque lié aux scripts entre sites.
Modifier la validation.
Exposer des informations sensibles.
Les atténuations de ces menaces courantes sont les suivantes :
Protégez les répertoires de thèmes globaux et d'application avec les paramètres de contrôle d'accès appropriés. Seuls les utilisateurs de confiance doivent être autorisés à écrire des fichiers dans les répertoires de thèmes.
N'utilisez pas les thèmes d'une source non fiable. Examinez toujours les thèmes externes à votre organisation à la recherche de code nuisible avant de les utiliser sur votre site Web.
N'exposez pas le nom du thème dans les données de requête. Les utilisateurs malveillants pourraient se servir de cette information pour utiliser des thèmes qui sont inconnus du développeur et exposer de cette façon des informations sensibles.