Pages maîtres et thèmes

Dimension: px

Commencer à balayer dès la page:

Download "Pages maîtres et thèmes"

Élise Brousseau
il y a 8 ans
Total affichages :

1 Pages maîtres et thèmes

2 Page Maître Une page maître est une page Asp.Net qui possède les caractéristiques suivantes: Classe de base : MasterPage Extension: master Possède la directive Master au lieu de la directive Page Création d une page maître Ajouter un nouvel élément de type : Page maître Les zones modifiables sont définies par des éléments de type ContentPlaceHolder Le titre des pages de contenu peut être défini dans la directive page. <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="page.master.cs" Inherits="WebApplication1.page" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head runat="server"> <title></title> <asp:contentplaceholder ID="head" runat="server"> </asp:contentplaceholder> </head> <body><form id="form1" runat="server"><div> <asp:contentplaceholder ID="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </div></form></body></html>

élément de type : Page maître Les zones modifiables sont définies par des éléments de type ContentPlaceHolder Le titre des pages de contenu peut être défini dans la directive page.

3 Pages de contenu Création Ajouter une nouvelle page Web de type «Web Form avec page maître» Définir Title Les zones Content Remarque Les propriétés définies dans la page maître sont prioritaires sur les propriétaires définies dans les page de contenu La page de contenu est attachée à la page maître à l aide de la propriété MasterPageFile Le lien entre les pages maîtres et les pages de contenu peut être aussi effectué dans le fichier web.config : <pages masterpagefile="site.master" /> <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %> <asp:content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:content> <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> </asp:content>

peut être aussi effectué dans le fichier web.config : <pages masterpagefile="site.master" /> <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm3.

4 Accès aux propriétés d une page maître Créer une propriété publique dans la page maître. public String Info { get { return (String)Session["Info"]; } set { Session["Info"] = value; } } <%@ MasterType VirtualPath="~/Site.Master" %> Ajouter la directive MasterType dans la page de <%@ MasterType VirtualPath="~/Site.Master" %> contenu. Accéder à la propriété à l aide de la syntaxe suivante: lblinfo.text Master.NomPropriété = Master.Info; Label Référencer lblnom= (Label) un contrôle Master.FindControl(" de la page lblnom"); Maître:

Master" %> Ajouter la directive MasterType dans la page de <%@ MasterType VirtualPath="~/Site.Master" %> contenu.

5 Changer dynamiquement la page maître 1. Créer deux ou plusieurs pages maîtres avec les mêmes contrôles ContentPlaceHolder et les mêmes propriétés publiques. 2. Pour changer la page maître il faut redéfinir la propriété MasterPageFile de la classe Page dans l événement Page_PreInit de la page de contenu (car sinon il sera trop tard, l événement Page_Init référence déjà la page Maître). Session["master"] = "~/master2.master"; protected void Page_PreInit(object s,eventargs e) { if (Session["master"]!=null) MasterPageFile =(string) Session["master"]; }

Pour changer la page maître il faut redéfinir la propriété MasterPageFile de la classe Page dans l événement Page_PreInit de la page de

6 Thèmes Un thème est un ensemble de définitions de propriétés, de styles et d'images. Un thème peut être appliqué à une page ou bien à toutes les pages d'un site Définition d'un thème Un thème est un ensemble de fichiers.skin enregistré dans un sous dossier nommé App_Themes. (Ajouter le dossier ASP.NET/Thème) Un thème peut être constitué de: Fichiers d apparence ( skin ) contenant les valeurs par défaut des propriétés d'un ou de plusieurs contrôles. Feuilles de styles css Images et autres ressources

fichiers.skin enregistré dans un sous dossier nommé App_Themes. (Ajouter le dossier ASP.

7 Création d un thème 1. Ajouter le dossier ASP.Net App_Themes à l application web 2. Créer un dossier pour chaque thème de votre application (le nom du dossier représente le nom du thème). 3. Ajouter les fichiers d apparence, feuilles de style et images dans le dossier du thème. Application d'un thème Pour appliquer un thème il faut définir l attribut Theme ou bien l attribut StyleSheetTheme. A une page: <%@ Page Theme="theme1" %> Appliquer le thème à toutes les pages dans le fichier web.config, : <configuration> <system.web> <pages theme="theme1"> </ pages >< /system.web> </configuration>. Remarque: l attribut StyleSheetTheme applique le thème avant l exécution des propriétés Set des Contrôles, alors que l utilisation de la propriété Theme permet d appliquer le thème après exécution des propriétés Set des contrôles. Création d un thème global Un thème global peut être utilisé par toute application sur le même serveur web, et doit être stocké dans l un des dossiers suivants: <iis_default_root>\aspnet_client\system_web\<version>\themes. %SystemRoot%\Microsoft.NET\Framework\<version>\ASP.NETClientFiles\Themes

Application d'un thème Pour appliquer un thème il faut définir l attribut Theme ou bien l attribut StyleSheetTheme.

8 Fichiers d apparence (fichiers skins) Un fichier skin peut être créé pour un ou plusieurs types de contrôles, il existe deux types de fichiers d apparence: Fichiers d apparence par défaut: ils sont appliqués sur tous les contrôles de même type, exemple: <asp:textbox BackColor="Blue" ForeColor="White" Runat="Server" /> <asp:label BackColor="White" ForeColor="Blue" Runat="Server" Font- Bold="True" /> Les fichiers d apparence nommés: le skin est appliqué aux contrôles ayant un SkinId. <asp:label SkinId="skin1" BackColor="White" ForeColor="Blue" Runat="Server" Font-Bold="True" /> Ajouter une image à un thème Dans le fichier d apparence: <asp:image runat="server" ImageUrl="~/App_Themes/theme1/logo.gif" SkinId="logo" /> Dans la page de contenu: <asp:image ID="Image1" runat="server" SkinID="logo"/>

Bold="True" /> Les fichiers d apparence nommés: le skin est appliqué aux contrôles ayant un SkinId.

9 Ordre de précédence des définitions d attributs 1. l attribut Theme dans la directive Page 2. <pages Theme= nomtheme > dans la section <system.web> du fichier Web.config 3. Les attributs définis dans les contrôles 4. L attribut StyleSheetTheme dans la directive Page 5. <pages StyleSheetTheme= nomtheme > dans le fichier Web.config. Remarque Le support des thèmes peut être désactivé, à l aide de la propriété (EnableTheming=false). Un thème peut être défini par programmation dans l événement PreInit à l aide de la propriété Theme de la classe Page.

L attribut StyleSheetTheme dans la directive Page 5. <pages StyleSheetTheme= nomtheme > dans le fichier Web.config.

Documents pareils

Module : programmation site Web dynamique Naviguer entre les pages via site map

Module : programmation site Web dynamique Naviguer entre les pages via site map Soit le site web suivant qui est constitué de six pages web : On veut créer un menu constitué de trois nœuds principaux générale