Master Page. Version 1.0

Master Page Version 1.0 Z

2 Master Page 01/0509 Sommaire 1 Master Page : Généralités... 3 1.1 Description d une Master Page... 3 1.2 Les avantages d une Master Page... 3 1.3 L emplacement de nos Master Pages... 3 1.4 Description des pages de contenu... 4 2 Master Page : Personnalisation... 5 2.1 Zone de Contenues... 5 2.2 La personnalisation avec SharePoint Designer... 5 2.2.1 Présentation d Office SharePoint Designer... 5 2.2.2 Utilisation d Office SharePoint Designer... 6 2.2.3 Création d une Master Page minimal... 9 2.3 La personnalisation par features... 14 2.4 La personnalisation par feuille de style en cascade ( CSS )... 16 2.5 Changer votre Master Page par défaut... 16 3 Conclusion... 17

3 Master Page 01/0509 1 Master Page : Généralités 1.1 Description d une Master Page L élément Master Page est tout d abord une nouveauté apparu avec ASP. NET 2.0. Les Master Pages mettent à disposition la possibilité de définir une structure commune et des éléments d'interfaces pour votre site comme les éléments d'entête de page (Header), pied de page (Footer), de navigation de page. Les Master Pages enrichissent la maintenance de vos sites et limite de manière pragmatique tout duplication de code de vos structures de sites partagés ou de leur comportement. 1.2 Les avantages d une Master Page Les Master Pages nous permettent de modifier facilement l architecture de toutes les pages de nos collections de site. Nous aide à l amélioration de la modification des pages SharePoint, gain de temps significatif quand on compare avec d autre architecture. Modification possible du site, les utilisateurs peuvent modifier des éléments sur cette Master Page comme bon leur semble. Une ergonomie très présente tant au niveau professionnel que sur d autre point. Nous retiendrons donc que la Master Page est vraiment un pas important vers la rapidité et la facilité de mise en place, d édition d un site, car nous travaillons sur une base déjà très bien ficelé. Mais nous le verrons par la suite, vous pouvez bien sur démarrer avec une master page totalement vide et faire une personnalisation complète. Mais comme vous vous en doutez, cela demande beaucoup plus de temps. 1.3 L emplacement de nos Master Pages La page maître par défaut se trouve dans la Galerie des pages maîtres. Dans Office SharePoint Designer 2007, la Galerie des pages maîtres est le dossier masterpage qui se trouve dans le dossier _catalogs de la Liste des dossiers. Si vous créez des pages maîtres personnalisées, il est recommandé de les conserver dans le même dossier masterpage. Vous pouvez ainsi rechercher et gérer facilement toutes les pages maîtres de votre site au même emplacement. Vous pouvez également identifier l'emplacement de la page maître à laquelle une page de contenu est attachée en affichant l'indicateur de la page maître dans la page de contenu. Galeries de pages maîtres Lors de la mise en service d'une collection de sites dans Office SharePoint Server 2007, le système crée une galerie de pages maîtres qui contient toutes les pages maîtres et les mises en page de cette collection de sites. Si la collection de sites utilise les modèles Portail de publication ou Portail de collaboration, la galerie de pages maîtres contient plusieurs pages maîtres fournies dans Office SharePoint Server 2007, telles que BlueBand.master. Ces pages maîtres, ainsi que d'autres exemples de pages.master, figurent dans le dossier C:\Program%20Files\Common%20Files\Microsoft%20Shared\web%20server%20extensions\12\TEM PLATE\FEATURES\PublishingLayouts\MasterPages\. Vous pouvez les utiliser telles quelles ou les personnaliser entièrement afin de donner une identité unique à votre site.

4 Master Page 01/0509 1.4 Description des pages de contenu Les pages de contenu sont des pages ASP.NET portant l'extension de fichier normale.aspx. En outre, chaque page de contenu contient une directive @page identifiant la page maître à laquelle la page de contenu est attachée. Voici un exemple de directive @page : <%@ Page MasterPageFile="~masterurl/default.master" %> Une page de contenu n'est pas une page autonome valide : pour obtenir sa mise en page, elle doit faire référence à une page maître. Les contrôles de contenu de la page de contenu remplacent les contrôles ContentPlaceholder de la page maître. Par défaut, un site comprend plusieurs pages de contenu (des pages en mode Liste, des pages de formulaires de liste et des pages de composants WebPart, par exemple) qui contiennent le contenu à afficher dans le corps de la page. Lorsqu'un visiteur du site demande une page dans le navigateur, le contenu de la page est fusionné à une page maître de manière à produire la page que l'utilisateur voit dans le navigateur. Une page de contenu utilise la même structure de page et les mêmes fonctionnalités que celles utilisées par la page maître à laquelle elle est attachée. Dans Microsoft Windows SharePoint Services 3.0, la page maître Default.master est appliquée à toutes les pages de contenu par défaut, y compris : Default.aspx Pages de contenu par défaut (notamment AllItems.aspx, DispForm.aspx, NewForm.aspx, et EditForm.aspx) contenant des affichages de listes et des formulaires de listes Pages de contenu par défaut (notamment Upload.aspx et WebFldr.aspx) contenant des affichages et des formulaires pour les bibliothèques de documents

5 Master Page 01/0509 2 Master Page : Personnalisation 2.1 Zone de Contenues Les ContentPlaceHolder pemettent de définir les parties dynamiques des Master Pages. Ceuxci sont exactement dans la lignée des contrôles de type System.Web.UI.WebControls.PlaceHolder déjà présent en ASP.NET 1.1. Vous remarquerez la présence par la suite de la propriété «ContentPlaceHolders» dans le type System.Web.UI.MasterPage. Cela représente la liste des contrôles de types ContentPlaceHolders. Voilà la syntaxe d un Control ContentPlaceHolder : <%-- ContentPlaceHolder control --%> <asp:contentplaceholder id="exempletext" runat="server"/> <%-- ContentPlaceHolder with default content --%> <asp:contentplaceholder id="exempletext" runat="server"> <h3>exemple-exemple-exemple h3> </asp:contentplaceholder> Comme vous allez pouvoir le voir au cours de ce chapitre et au moment de l apprentissage de SharePoint Designer, il existe une flopée de control de type ContentPlaceHolders pour la mise en page de votre MasterPage, on les appels aussi des espace réservé de contenues. Vous pouvez vous rendre sur le site de Miscrosoft pour voir la liste des PlaceHolders : http://msdn.microsoft.com/fr-fr/library/ms467402.aspx 2.2 La personnalisation avec SharePoint Designer 2.2.1 Présentation d Office SharePoint Designer Microsoft Office SharePoint Designer est un nouveau produit qui permet la création et personnalisation de nos SharePoint. Il fournit des outils performants pour créer des solutions interactives sur la plate-forme SharePoint sans écrire de code, concevoir des sites SharePoint personnalisés et gérer les performances des sites. Il peut très bien être utilisé par un développeur qu un designer, même si un développeur aura plus de facilité à s en servir grâce a la connaissance du code-behind.

6 Master Page 01/0509 2.2.2 Utilisation d Office SharePoint Designer Nous allons voir dans cette partie une vue générale de SharePoint designer, de son interface à son utilisation, accompagné d une description des points important. Folder List : Il se trouve dans la partie gauche de SharePoint Designer, il nous permet de voir a quoi ressemble l arboréscence de nos dossiers.

7 Master Page 01/0509 ToolBox : On retrouve une ToolBox, tous nos contrôles ASP.NET 2.0 sont utilisables via la toolbox et des petits assistants. CSS Properties : Vous allez voir qu avec l aide du voler CSS Properties vous pourrez l utiliser avec un CSS externe, une page web, et ainsi modifier les propriétés et valeurs de vos styles.

8 Master Page 01/0509 Apply Styles : Ce volet nous propose de visualiser chaque style présent dans notre projet, a l aide de celui-ci vous pourrez agir dans tous les sens du termes sur vos CSS ( Appliquer, Supprimer, Renommer etc. ) Je vous conseille également d aller dans le menu Customize pour ajouter des barre d outils, comme celle de la Master Page présente sur ce screen :

9 Master Page 01/0509 Nous pensons que la clé d un travail efficace réside dans l ergonomie de notre application et notre espace de travail, c est pour cela que je vous invite à personnaliser comme bon vous semblera celle-ci, avec vos préférences. Ainsi il existe la personnalisation des vues, elle nous permet de choisir quelles parties de notre Master Page afficher ou non. 2.2.3 Création d une Master Page minimal La création et la finalisation d'une Master Page en vue de la personnalisation de votre site SharePoint est un travail rigoureux. Si cela était possible, vous aimeriez ne pas avoir à réécrire le code ou à supprimer les sections de code inutiles de votre Master Page. Par le biais de cette partie nous allons donc vous montrer comment réaliser votre Master Page minimal, pour que vous disposiez d'une base stable sur laquelle construire vos propres Master Page. Créer une page maître minimale vous évite d'avoir à supprimer des sections de code d'une page.master préexistante (comme BlueBand.master) ou d'avoir à supprimer des fonctions pour les réintégrer ensuite. Etape de création de notre Master Page minimal : Ouvrez SharePoint Designer. Ensuite rendez-vous dans Fichier > Nouveau > SharePoint > Page > Master Page Cliquez sur Code pour afficher la Master Page en mode Code. Voilà le code qu il faut copier pour obtenir une Master Page minimal :

10 Master Page 01/0509 <%@ Master language="c#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/welcome.ascx" %> <%@ Register TagPrefix="wssuc" TagName="DesignModeConsole" src="~/_controltemplates/designmodeconsole.ascx" %> <%@ Register TagPrefix="PublishingVariations" TagName="VariationsLabelMenu" src="~/_controltemplates/variationslabelmenu.ascx" %> <%@ Register Tagprefix="PublishingConsole" TagName="Console" src="~/_controltemplates/publishingconsole.ascx" %> <%@ Register TagPrefix="PublishingSiteAction" TagName="SiteActionMenu" src="~/_controltemplates/publishingactionmenu.ascx" %> <%-- Uses the Microsoft Office namespace and schema. --%> <html> <WebPartPages:SPWebPartManager runat="server"/> <SharePoint:RobotsMetaTag runat="server"/>

11 Master Page 01/0509 <%-- The head section includes a content placeholder for the page title and links to CSS and ECMAScript (JScript, JavaScript) files that run on the server. --%> <head runat="server"> <asp:contentplaceholder runat="server" id="head"> <title> <asp:contentplaceholder id="placeholderpagetitle" runat="server" /> </title> </asp:contentplaceholder> <Sharepoint:CssLink runat="server"/> <asp:contentplaceholder id="placeholderadditionalpagehead" runat="server" /> </head> <%-- When loading the body of the.master page, SharePoint Server 2007 also loads the SpBodyOnLoadWrapper class. This class handles.js calls for the master page. --%> <body onload="javascript:_spbodyonloadwrapper();"> <%-- The SPWebPartManager manages all of the Web part controls, functionality, and events that occur on a Web page. --%> <form runat="server" onsubmit="return _spformonsubmitwrapper();"> <wssuc:welcome id="explitlogout" runat="server"/> <PublishingSiteAction:SiteActionMenu runat="server"/> <PublishingWebControls:AuthoringContainer id="authoringcontrols" runat="server"> <PublishingConsole:Console runat="server" /> </PublishingWebControls:AuthoringContainer> <%-- The PlaceHolderMain content placeholder defines where to place the page content for all the content from the page layout. The page layout can overwrite any content placeholder from the master page. Example: The PlaceHolderLeftNavBar can overwrite the left navigation bar. --%> <asp:contentplaceholder id="placeholdermain" runat="server" /> <asp:panel visible="false" runat="server"> <%-- These ContentPlaceHolders ensure all default SharePoint Server pages render with this master page. If the system master page is set to any default master page, the only content placeholders required are those that are overridden by your page layouts. --%> <asp:contentplaceholder id="placeholdersearcharea" runat="server"/> <asp:contentplaceholder id="placeholdertitlebreadcrumb" runat="server"/>

12 Master Page 01/0509 <asp:contentplaceholder id="placeholderpagetitleintitlearea" runat="server"/> <asp:contentplaceholder id="placeholderleftnavbar" runat="server"/> <asp:contentplaceholder ID="PlaceHolderPageImage" runat="server"/> <asp:contentplaceholder ID="PlaceHolderBodyLeftBorder" runat="server"/> <asp:contentplaceholder ID="PlaceHolderNavSpacer" runat="server"/> <asp:contentplaceholder ID="PlaceHolderTitleLeftBorder" runat="server"/> <asp:contentplaceholder ID="PlaceHolderTitleAreaSeparator" runat="server"/> <asp:contentplaceholder ID="PlaceHolderMiniConsole" runat="server"/> <asp:contentplaceholder id="placeholdercalendarnavigator" runat ="server" /> <asp:contentplaceholder id="placeholderleftactions" runat ="server"/> <asp:contentplaceholder id="placeholderpagedescription" runat ="server"/> <asp:contentplaceholder id="placeholderbodyareaclass" runat ="server"/> <asp:contentplaceholder id="placeholdertitleareaclass" runat ="server"/> <asp:contentplaceholder id="placeholderbodyrightmargin" runat="server" /> </asp:panel> </form> </body> </html> Une fois celui-ci copié, vous pourrez commencer à travailler sur une base de Master Page. Une Master Page minimal vient donc d être créé. Vous allez donc pouvoir enregistrer votre nouvelle Master Page dans le dossier suivant : C:\Program Files\Common Files\microsoft shared\web Server Extensions\12\TEMPLATE\FEATURES\PublishingLayouts\MasterPages

13 Master Page 01/0509 Votre Master Page minimal ressemblera donc a ceci. Comme vous pouvez le remarquer, il y a des erreurs sur votre Design de Master Page car les références faites dans le code ne sont pas présentes encore. Egalement vous pouvez voir l interface de SharePoint Designer. En ce qui concerne l interface vous pouvez vous mettre en mode split pour voir à quoi correspond le design et le code ( les modes de vue se trouvent en bas à gauche comme indiqué ) :

14 Master Page 01/0509 Ce mode est vraiment pratique pour savoir à quoi ressemble votre code par rapport a votre design. Il existe sur la toile bien d autre modèle de page minimal, de thème personnalisé ou autre. Donc pour vous faire une idée de ce que peut donner un thème de Master Page complet vous pouvez commencer par regarder la Master Page par défaut de votre SharePoint 2.3 La personnalisation par features Maintenant nous allons voir dans cette partie comment personnaliser votre Master Page à l aide de Feature ( Modèle ). Pour plus de détails vous pouvez vous réferez au Chapitre 2 ou nous avons évoqué les features. Nous commencerons tout d abord par créer notre Master Page, nous vous conseillons de partir d une Master Page minimal comme évoqué précédemment. ( Partie 2.2.3 ) Une fois celle-ci personnalisé a votre convenance, il va falloir maintenant la déployer via une feature. Il vous faut vous rendre dans le dossier 12 et ouvrir le dossier FEATURE et créer un nouveau dossier où l on stockera tous les items utiles pour notre Master Page. Créons à présent deux fichiers XML : Un premier que nous appellerons communément feature.xml : <Feature Id=" 7cdccd8d-d523-4d89-964c-730e585a5691" Title="NomMasterPage" Description="Description de VotreMasterPage" Version="12.0.0.0" Scope="Site" Hidden="False" DefaultRessourceFile="core" xmlns="http://schemas.microsoft.com/sharepoint/"> <ElementManifests> <ElementManifest Location="Master_files.xml"/> </ElementManifests> </Feature>

15 Master Page 01/0509 Un second que nous appellerons Master_files.xml : celui-là va nous servir à faire référence a toutes nos images, css et autres. <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <Module Name="OSGMasterPages" Url="_catalogs/masterpage" Path="MasterPages" RootWebOnly="TRUE"> <File Url="VotreNom.master" Type="GhostableInLibrary"> <Property Name="ContentType" Value="Ma MasterPage Custom" /> <Property Name="PublishingPreviewImage" Value="~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Prev iew Images/dotnet-france.png, ~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/dotnet-france.png" /> <Property Name="MasterPageDescription" Value="Exemple VotreMasterPage" /> </File> </Module> <Module Name="PublishingLayoutsPreviewImages" Url="_catalogs/masterpage" IncludeFolders="??-??" Path="" RootWebOnly="TRUE"> <File Url="dotnet-france.png" Name="Preview Images/ dotnetfrance.png " Type="GhostableInLibrary"> </File> </Module> </Elements> Une fois ces étapes achevées, nous vous conseillons de faire une dossier Styles ( CSS ) et un autre Images, ceci peut paraître évident mais indispensable pour un travail collaboratif par exemple. Ne pas appeler un dossier d images avec un nom qui est complètement hors sujet ( exemple : Fenêtre ). Faites un IISRESET sur votre serveur et vous allez pouvoir installer et activer votre feature via une commande stsadm : stsadm -o installfeature -name dotnet-france\feature.xml stsadm -o activatefeature -name dotnet-france\master_files.xml url ( url de votre collection de site ) Vous pouvez également activé votre feature via l interface graphique de votre site. Et pour finir cette installation, vous devez maintenant lier votre Master Page aux pages Layouts.

16 Master Page 01/0509 2.4 La personnalisation par feuille de style en cascade ( CSS ) Comme vous avez pu le voir au cours des deux précédentes parties, une majorité de notre ce fait a l aide de CSS, car c est eux qui vont nous aider à le mettre en place. Il vous faudra avoir des bases en CSS et HTML pour pouvoir faire une Master Page a votre réel convenance, car SharePoint Designer a beau être un logiciel plutôt intuitif il ne fait pas tout à votre place ( exemple : Custom Control ) 2.5 Changer votre Master Page par défaut Nous voilà maintenant dans la dernière étape de création de Master Page, de déploiement et d application. Nous arrivons au moment où vous allez devoir remplacer votre ancienne Master Page par votre nouvelle Master Page personnalisé par vos soins. Pour ce faire, il existe plusieurs façon de s y prendre : Avec l aide de SharePoint designer : il vous suffit de vous placer dans le répertoire masterpage situé dans _catalogs. ( dans le volet Folder List ). Une fois dans celui-ci faites un simple clic droit sur la Master Page de votre choix et faites mettre par défaut. Avec l interface SharePoint : dans un premier temps il faut savoir que cette façon de est unique a MOSS, donc inutilisable sous WSS. Il faut vous rendre dans Site Actions > Site Settings > Modify All Site Settings > Master page. Une fois ici vous pourrez choisir votre nouvelle Master Page.

17 Master Page 01/0509 3 Conclusion Nous arrivons à la fin de ce Chapitre, et vous devez dorénavant arriver à réaliser une Master Page personnalisé, modifier une Master Page existante, changer la Master Page par défaut. Vous avez toutes les clefs en mains pour pouvoir commencer votre travail de façon correcte.