Procédure pas à pas : personnalisation de la page d'accueil de l'affichage mobile

Article
09/24/2014

Dernière modification : mercredi 2 février 2011

S’applique à : SharePoint Foundation 2010

Cette procédure pas à pas explique comment personnaliser la page d'accueil de l'affichage mobile en implémentant un contrôle RenderingTemplate personnalisé. L'exemple indique comment personnaliser la section d'en-tête de la page d'accueil. Vous trouverez une vue d'ensemble des étapes de personnalisation d'une page d'accueil de l'affichage mobile dans Procédure : personnaliser les pages d'accueil de l'affichage mobile.

Avant la personnalisation

Un objet SPMobileComponent, dont la propriété TemplateName est explicitement définie sur WebPartMobileSummaryViewTitle, est déclaré dans les deux éléments HeaderTemplate du fichier mblwiki.aspx utilisé comme page d’accueil de l’affichage mobile pour un site d’équipe (STS). Le code suivant montre l’un de ces éléments :

<HeaderTemplate>
  <SPMobile:SPMobileControlContainer RunAt="Server" Weightless="true">
    <SPMobile:SPMobileComponent RunAt="Server" 
       TemplateName="WebPartMobileSummaryViewTitle" />
    <SPMobile:SPMobileComponent RunAt="Server" 
       TemplateName="MobileDefaultSeparator" />
  </SPMobile:SPMobileControlContainer>
</HeaderTemplate>

Cet objet appelle le contrôle RenderingTemplate dans MobileDefaultTemplates.ascx dont l’ID est « WebPartMobileSummaryViewTitle ». Le contrôle RenderingTemplate est illustré ci-après :

<SharePoint:RenderingTemplate RunAt="Server" 
  id="WebPartMobileSummaryViewTitle">
  <Template>
    <SPMobile:SPMobileWebTitle RunAt="Server" Prefix="WebPartMobile" />
  </Template>
</SharePoint:RenderingTemplate>

Comme le montre cet exemple, le modèle de rendu appelle un objet sélecteur de modèles de la classe SPMobileWebTitle. L’objet sélecteur de modèles construit l’ID de modèle de rendu suivant et appelle un modèle de rendu portant cet ID : WebPageMobile_STS_HomePage_Title. S’il n’existe aucun modèle de rendu portant cet ID, il utilise un modèle de rendu nommé WebPageMobile_Default_HomePage_Title.

Microsoft SharePoint Foundation n'inclut pas de contrôle RenderingTemplate portant l’ID Mobile_STS_HomePage_Title. Dans cette procédure pas à pas, vous créez un modèle qui affiche le titre de la page d’accueil dans un panneau à deux tons. Avant la personnalisation, le modèle WebPageMobile_Default_HomePage_Title affiche le titre de la page d’accueil STS tel qu’il apparaît dans la capture d’écran ci-après. Le texte du titre provient du titre de la page d’accueil STS non mobile correspondante. Le texte est restitué dans un panneau bleu foncé en lettres blanches.

Rendu par défaut de la zone de titre d’une page d’accueil de site d’équipe

Page d’accueil de l’affichage mobile non personnalisée

Procédure

Pour personnaliser la section d'en-tête de la page d'accueil de l'affichage mobile STS :

Dans Microsoft Visual Studio, créez un projet SharePoint vide. Définissez-le en tant que solution de batterie de serveurs, non en tant que solution en bac à sable (sandbox).
Ajoutez un dossier mappé SharePoint à TEMPLATE\ControlTemplates.

Cliquez avec le bouton droit sur le nouveau dossier et ajoutez un contrôle utilisateur SharePoint. Attribuez au fichier ascx un nom qui le différencie de ceux des autres fournisseurs de solutions ; par exemple, modèles_rendu_mobile_contoso.ascx. Visual Studio ajoute automatiquement le fichier au manifeste de solution SharePoint et le configure afin qu’il soit déployé sur %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates.

Conseil
N’ajoutez pas le contrôle utilisateur en cliquant avec le bouton droit sur le projet dans l’Explorateur de solutions. Lorsque vous ajoutez un contrôle utilisateur de la sorte, Visual Studio le place dans un sous-dossier de TEMPLATE\ControlTemplates. S’il n’est pas déplacé, Visual Studio le déploie dans un sous-dossier correspondant de %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates. Les modèles de rendu mobile situés dans des sous-dossiers ne sont pas chargés.

N’ajoutez pas le contrôle utilisateur en cliquant avec le bouton droit sur le projet dans l’Explorateur de solutions. Lorsque vous ajoutez un contrôle utilisateur de la sorte, Visual Studio le place dans un sous-dossier de TEMPLATE\ControlTemplates. S’il n’est pas déplacé, Visual Studio le déploie dans un sous-dossier correspondant de %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates. Les modèles de rendu mobile situés dans des sous-dossiers ne sont pas chargés.

Supprimez les fichiers .ascx.cs et .ascx.designer.cs (ou .ascx.vb et .ascx.designer.vb). Ils ne sont pas nécessaires pour ce projet.

Remplacez toute la section de directives du fichier ascx par le marquage suivant

<%@ Register TagPrefix="GroupBoardMobile"   Namespace="Microsoft.SharePoint.Applications.GroupBoard.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#"   %> 
<%@ Assembly Name="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %> 
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="WPMobile" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

Sous les directives, ajoutez le marquage suivant. Celui-ci crée un contrôle RenderingTemplate portant l’ID que recherche l’analyseur de pages lorsqu’il restitue la zone d’en-tête de la page d’accueil STS.
```
<SharePoint:RenderingTemplate 
  ID="WebPartMobile_STS_HomePage_Title" RunAt="Server">


</SharePoint:RenderingTemplate>
```

Dans l’élément RenderingTemplate, définissez un élément Template doté d’un contrôle enfant SPMobilePaddedPanel. Définissez les attributs ForeColor, BackColor, Font-Size et Font-Bold de l’étiquette comme dans l'exemple suivant :

<Template>
    <SPMobile:SPMobilePaddedPanel RunAt="Server" 
      ForeColor="#FFFFFF" 
      BackColor="#990033" 
      Font-Bold="True" 
      Font-Size="13pt">
      <WPMobile:WebPartMobilePageTitle RunAt="Server" />
    </SPMobile:SPMobilePaddedPanel>
</Template>

Dans le menu Générer, sélectionnez Déployer la solution. Cette opération enregistre automatiquement le fichier .ascx, le déploie dans %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATES\ControlTemplates et recycle l’application Web, ce qui permet de recharger tous les fichiers .ascx situés dans ce dossier.
Accédez à la page d’accueil d’un site STS dans votre déploiement avec votre appareil ou émulateur. Le titre doit apparaître dans un panneau rouge interne à l’intérieur du panneau bleu foncé. (Le panneau externe étant déclaré directement sur la page mblwiki.aspx, il n’est pas supprimé par votre personnalisation. Si vous souhaitez le supprimer, vous devez créer une page d’accueil pour les sites STS et utiliser la redirection vers la page d’accueil pour rediriger les appareils mobiles vers votre nouvelle page. Pour plus d’informations sur la redirection vers la page d’accueil, voir Redirection vers la page d’accueil et Procédure pas à pas : personnalisation de la page d’accueil mobile par le biais de la redirection.)