Prérequis▲
- Visual Studio 2005 Bêta 2 ou Visual Web Developer 2005 Express Edition Bêta 2 au minimum.
- Internet Information Services 5.0 ou supérieur.
- Framework .Net 2.0.
I. Le principe de master pages▲
Une master page est en fait une page qui va contenir des éléments s'affichant de la même manière sur une partie ou sur la totalité de votre site, et aussi des éléments variant suivant chaque page du site (contacts, news, téléchargements…). Une master page va en fait être composée de la partie commune de l'interface pour un ensemble donné de pages. Avec ASP.Net 1.1 nous étions souvent obligés de faire un simple copier/coller de certains éléments comme des menus, des logos ou autre bannière sur chaque page, ici les master pages vont vous autoriser à déterminer des zones « fixes », une sorte de squelette commun de page, et des zones de contenu qui vont être différentes selon la page, zones qui seront délimitées par des ContentPlaceHolder.
Les éléments de la master page seront ainsi créés et disposés dans une page qui portera l'extension .master, ensuite les pages de contenu (content pages) viendront compléter les zones dites de contenu (délimitées par des composants ContentPlaceHolder) sur cette même master page.
L'avantage immédiat qui découle de cela est que nous n'aurons plus qu'à créer une seule master page pour intégrer les éléments inchangés (bannière, entête, menus…) sur une étendue de pages données. De plus, si nous voulons modifier un élément de l'interface de notre site nous n'aurons qu'à le faire qu'une seule fois dans la master page, toutes les pages l'utilisant seront ainsi immédiatement modifiées.
Je le concède volontiers, après la lecture de cette seule explication les master pages n'apparaissent peut être pas comme une nouveauté révolutionnaire, mais avec des explications plus concrètes dans les paragraphes suivants vous allez réellement prendre conscience de la souplesse et de la productivité apportées par les master pages.
II. Création d'une master page▲
Une bonne démonstration valant souvent mieux que de longues explications passons tout de suite à la pratique. Pour cela vous devez disposer de Visual Studio 2005 Beta 2 ou de Visual Web Developer 2005 Express Edition Bêta 2 au minimum.
Tout d'abord vous devez créer une application ASP.Net 2.0, pour cela cliquez sur « File » puis sur « New Web Site », créez alors un projet de type « ASP.Net Web Site ». Vous avez alors un site web contenant une page default.aspx. Dans l'explorateur de solution, cliquez avec le bouton droit puis choisissez « Add new item ». Choisissez alors « Master Page », donnez-lui le nom que vous souhaitez (ici maMasterPage), vous pouvez remarquer qu'elle porte l'extension .master. Enfin, cliquez sur « Add ». La fenêtre suivante apparaît alors :
Remarque : la master page portant l'extension .master ne sera pas directement accessible par les clients, elle ne sera en fait accessible que par les pages de votre site héritant de cette master page. Lors de la connexion d'un client la page de votre site sera en fait réalisé par « assemblage » de la master page et de la page héritant de celle-ci.
Voici le code d'une master page contenant une ContentPlaceHolder :
<%@ Master Language="VB" CodeFile="maMasterPage.master.vb" Inherits="maMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
</form>
</body>
</html>Une fois la page créée dans Visual Studio vous n'avez qu'à placer les différents contrôles sur votre page et vous occuper du design, la seule vraie différence va être que vous allez placer des contrôles ContentPlaceHolder là où vous souhaitez que le contenu soit modifiable. En fait, les pages de votre site vont hériter de la master page, elles hériteront donc du desgin de celle-ci.
Pour simplifier notre exemple nous utiliserons un seul contrôle ContentPlaceHolder, mais sachez que vous pouvez en mettre plusieurs dans une seule et même master page, cela dépendra évidemment de vos besoins.
Pour ajouter un ContentPlaceHolder, rien de compliqué, vous avez juste à faire un glisser/déposer depuis la boîte à outils de Visual Studio 2005. Vous avez donc, d'un point de vue design, une page aspx qui est standard, sauf qu'elle contient des contrôles ContentPlaceHolder.
III. Création d'une page héritant d'une master page▲
Maintenant que nous avons créé une master page, nous pouvons créer les pages de notre site qui vont en hériter, pour cela rien de difficile, il suffit de créer une nouvelle WebForm, et de cocher la case « Select master page », à l'étape suivante Visual Studio va vous demander de sélectionner la master page à utiliser avec cette WebForm. Vous pouvez alors remarquer que Visual Studio vous affiche une page qui est identique à la master page de laquelle elle hérite, mais cette fois-ci, tout le contenu de la master page est « grisé » et non modifiable, et vous pouvez par contre modifier le contenu du, ou des ContentPlaceHolder intégré(s) dans votre page.
Voici donc la démarche détaillée qu'il vous faut suivre : cliquez avec le bouton droit sur votre projet dans l'explorateur de solution, puis sur « Add new item », sélectionnez WebForm, nommez-la « accueil.aspx », cochez « Select Master Page ». Cliquez sur « Add », une autre fenêtre s'ouvre alors, vous demandant d'indiquer quelle master page vous souhaitez utiliser, sélectionnez « maMasterPage.master ».
Le code d'une page héritant d'une master page est réduit, il ne contient pas les balises que l'on retrouve dans une page aspx normale, en effet, puisqu’elles sont déjà présentes dans la master page. Voici une copie du code contenu dans une « page fille » vide :
<%@ Page Language="VB" MasterPageFile="~/maMasterPage.master" AutoEventWireup="false"
CodeFile="accueil.aspx.vb" Inherits="accueil" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server"></asp:Content>À cet instant votre explorateur de solution doit correspondre à cette image :
Placez les contrôles et les éléments que vous souhaitez dans la zone ContentPlaceHolder, enregistrez les modifications. Définissez la page accueil.aspx comme page de démarrage de votre application , puis appuyez sur F5. Et là miracle !! Votre navigateur s'ouvre et votre page accueil.aspx s'affiche, elle est composée de votre master page et du contenu de la page accueil.aspx qui en hérite, c'est-à-dire du contenu du ou des ContentPlaceHolder.
Vous pouvez ainsi créer autant de pages héritant d'une master page que vous le souhaitez, vous retrouvez dès lors le « squelette » de la master page dans chaque « page fille » de celle-ci.
Conclusion▲
Voilà vous venez de créez votre première master page, vous pouvez facilement imaginer les avantages découlant de cette nouveauté d'ASP.Net 2.0, vous pourrez ainsi avoir une productivité accrue dans la création et la mise à jour de vos sites. On peut envisager utiliser les masters pages en tant que modèle, que squelette, de tout ou partie de votre site, mais aussi, par exemple, pour concevoir différentes versions de pages en fonction des navigateurs clients.
De plus, on se rend donc compte, que même si l'on utilise une master page, cela ne change quasiment rien des méthodes de travail pour le développeur ou le graphiste dans l'édition de sa page, ce qui est fort appréciable.
J'espère qu'au travers de cette courte présentation vous aurez aperçu la puissance et la souplesse que peuvent vous apportez les master pages. Je vous donne d'ores et déjà rendez-vous dans un prochain article.
Un grand merci à Louis-Guillaume Morand pour la relecture de cet article.
