Procédure pas à pas : créer un contrôle de rendu de champ personnalisé pour les pages mobiles

Windows SharePoint Services 3

Cette procédure pas à pas montre comment personnaliser le rendu des champs dans les pages mobiles en implémentant un contrôle de rendu de champ personnalisé conjointement avec un RenderingTemplate. L'exemple de procédure montre comment personnaliser le champ Titre d'un élément dans une liste Annonces sur les pages mobiles Afficher l'élément, Nouvel élément et Modifier l'élément. La personnalisation est différente pour les trois types de pages :

  • Formulaire d'affichage—Ajoute un lien de recherche qui permet aux utilisateurs d'accéder à la page de résultats de la recherche sur MSN Actualités.

  • Formulaire de modification—Ajoute un texte par défaut lorsque la valeur de la colonne Expire est antérieure à la date actuelle.

  • Nouveau formulaire—Ajoute du texte par défaut afin d'afficher aux utilisateurs un format spécifique pour les valeurs.

Pour une vue d'ensemble des étapes de la personnalisation des champs des pages mobiles, voir Procédure : personnaliser le rendu des champs sur les pages mobiles.

  1. Dans Visual Studio, sélectionnez Outils externes dans le menu Outils.

  2. Dans la boîte de dialogue Outils externes, cliquez sur Ajouter et entrez Obtenir la clé publique d'assembly en guise de titre.

  3. Remplissez la zone de texte Commande en accédant à sn.exe, qui se trouve généralement à l'emplacement C:\Program Files\Microsoft Visual Studio 8\SDK\v2.0\Bin\sn.exe.

  4. Dans la zone de texte Arguments, tapez le texte suivant (en respectant la casse) : -Tp "$(TargetPath)".

  5. Activez la case à cocher Utiliser la fenêtre Sortie.

  6. Cliquez sur OK. La nouvelle commande est ajoutée au menu Outils.

  1. Dans Visual Studio, sélectionnez Nouveau projet dans le menu Fichier.

  2. Dans la boîte de dialogue Nouveau projet, sélectionnez Visual C# dans la zone Types de projets, sélectionnez Bibliothèque de classes dans la zone Modèles et entrez ItemTitleField dans la zone Nom. Cliquez sur OK.

  3. Cliquez avec le bouton droit sur le nœud Références dans l'Explorateur de solutions, cliquez sur Ajouter une référence et, tout en maintenant enfoncée la touche CTRL, sélectionnez System.Web, System.Web.Mobile et Microsoft SharePoint Services dans l'onglet .NET de la boîte de dialogue Ajouter une référence. Cliquez sur OK.

  4. Cliquez avec le bouton droit sur le nom du projet dans l'Explorateur de solutions et sélectionnez Propriétés.

  5. Sous l'onglet Application de la boîte de dialogue Propriétés, entrez MaSociété.SharePoint.MobileControls.ItemTitleField comme nom de l'assembly et MaSociété.SharePoint.MobileControls en guise de d'espace de noms par défaut. Remplacez MaSociété par le nom de votre société. Dans cette procédure pas à pas, remplacez MaSociété par le nom de votre société.

  6. Ouvrez l'onglet Signature, puis sélectionnez Signer l'assembly.

  7. Choisissez <Nouveau...> dans la zone de liste déroulante Choisir un fichier de clé de nom fort.

  8. Dans la boîte de dialogue Créer une clé de nom fort, tapez ItemTitleField.snk dans la zone Nom du fichier de clé, puis vérifiez que la case à cocher Protection ...n'est pas activée. Cliquez sur OK. Ouvrez l'onglet Événements de génération et tapez le texte ci-dessous dans la zone Ligne de commande de l'événement après génération. Ce code garantit que chaque fois que vous régénérez le projet, les dernières versions de vos fichiers projet sont copiées dans l'emplacement adéquat et que Windows SharePoint Services 3.0 est redémarré afin qu'il charge la version la plus récente de l'assembly.

    cd "$(ProjectDir)"
    "%programfiles%\microsoft visual studio 8\sdk\v2.0\bin\gacutil" /i "$(TargetPath)" /nologo /f
    %systemroot%\system32\iisapp.vbs /a "SharePoint_App_Pool" /r
    xcopy *.ascx "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\CONTROLTEMPLATES\" /y
    
  9. Remplacez SharePoint_App_Pool par le nom réel du pool d'applications Internet Information Server (IIS) affecté à votre application Web Windows SharePoint Services. Il s'agit généralement du même nom que le site Web IIS qui contient l'application ; par exemple, "SharePoint - 80". (Les guillemets peuvent être omis si le nom ne contient pas d'espace.)

  10. Cliquez sur n'importe quel autre contrôle activé dans l'onglet de manière à ce que Visual Studio détecte vos modifications et qu'un astérisque apparaisse dans l'étiquette de l'onglet.

  11. Cliquez sur le bouton Enregistrer tous les fichiers de la barre d'outils.

  12. Dans l'Explorateur de solutions, renommez le fichier Class1.cs en ItemTitleField.cs.

  1. Ouvrez le fichier ItemTitleField.cs du projet s'il n'est pas déjà ouvert, puis ajoutez les instructions using suivantes :

    using System.Web.UI.MobileControls;
    using Microsoft.SharePoint;
    using Microsoft.SharePoint.MobileControls;
    
  2. Attribuez à l'espace de noms la valeur MaSociété.SharePoint.MobileControls.

  3. Remplacez la déclaration Class1 entière par le code suivant :

    public class ItemTitleField : SPMobileBaseTextField
    {
    
    }// end ItemTitleField class
    

    Notez que votre nouvelle classe hérite de SPMobileBaseTextField.

  4. Ajoutez la substitution suivante de la méthode CreateControlForDisplay :

    protected override MobileControl CreateControlForDisplay()
    {
       string title = Convert.ToString(this.ItemFieldValue);
       if (!String.IsNullOrEmpty(title))
       {
          this.LabelControl.BreakAfter = false;
          this.LabelControl.Text = title + " ";
    
          this.LinkControl.BreakAfter = false;
          this.LinkControl.Text = "Search";
          this.LinkControl.NavigateUrl = "http://search.msn.com/results.aspx?q=" + title.Replace(' ', '+');
    
          Panel panel = new Panel();
          panel.BreakAfter = false;
          panel.Controls.Add(this.LabelControl);
          panel.Controls.Add(this.LinkControl);
    
          return panel;
       }
       return null;
    }
    

    Notez que la première opération de cette méthode consiste à obtenir la valeur actuelle du champ Titre de l'élément de liste actuel. Cette valeur actuelle est stockée dans ItemFieldValue.

  5. Ajoutez la substitution suivante de la méthode CreateControlForNew :

    protected override MobileControl CreateControlForNew()
    {
       MobileControl myNewControl = null;
       if (this.Field != null)
       {
          string text = "Group: Project Name";
          if (!this.Page.IsPostBack)
          {
             this.TextBoxControl.Text = text;
          }
          myNewControl = this.TextBoxControl;
       }
       return myNewControl;
    }
    
  6. Ajoutez la substitution suivante de la méthode CreateControlForEdit :

    protected override MobileControl CreateControlForEdit()
    {
       MobileControl myEditControl = null;
       if (this.Item != null && this.Field != null)
       {
          if (this.NeedEllipsisRendering)
          {
             myEditControl = this.CreateControlForDisplay();
          }
          else
          {
             if (!this.Page.IsPostBack)
             {
                string strEdit = this.Field.GetFieldValueForEdit(this.ItemFieldValue);
                string overDue = "OVERDUE: ";
    
                SPListItem item = this.ListItem;
                if (item["Expires"] != null)
                {
                   System.DateTime date = (DateTime)item["Expires"];
                   if (date.CompareTo(System.DateTime.Today) < 0)
                   {
                      this.TextBoxControl.Text = overDue + strEdit;
                   }
                   else
                   {
                      this.TextBoxControl.Text = strEdit;
                   }
                }
             }
             myEditControl = this.TextBoxControl;
          }
       }
       return myEditControl;
    }
    
  7. Sélectionnez Générer dans le menu Version. Bien que vous n'ayez pas tout à fait terminé, vous devez compiler l'assembly à ce stade pour pouvoir générer un jeton de clé publique.

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, ItemTitleField, sélectionnez Ajouter, puis Nouvel élément.

  2. Sélectionnez Éléments de projet Visual C# dans la fenêtre Catégories, puis Fichier texte dans la fenêtre Modèles.

  3. Dans la zone Nom, tapez AnnouncementsItemTitleField.ascx et cliquez sur Ajouter. (Ne placez pas le fichier dans un sous-dossier du dossier de projet, car les commandes après génération que vous avez créées ne pourraient pas le trouver.)

  4. Dans le fichier AnnouncementsItemTitleField.ascx qui est créé, ajoutez le balisage suivant :

    <%@ Control Language="C#" %>
    <%@ Assembly Name="Microsoft.SharePoint, Version=12.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=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
    <%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.MobileControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register TagPrefix="CustomMobile" Namespace="MyCompany.SharePoint.MobileControls" Assembly="MyCompany.SharePoint.MobileControls.ItemTitleField, Version=1.0.0.0, Culture=neutral, PublicKeyToken=Token" %> 
    <%@ Import Namespace="Microsoft.SharePoint" %>
    
    <SharePoint:RenderingTemplate RunAt="Server" ID="MobileCustomListField_Announcements_Text_Title" >
        <Template>
          <CustomMobile:ItemTitleField RunAt="Server" /> 
        </Template>
    </SharePoint:RenderingTemplate>
    
  5. Remplacez MaSociété par le nom de votre société dans les deux emplacements.

  6. Remplacez Token par le jeton de clé publique réel que vous obtenez en cliquant sur Obtenir la clé publique d'assembly dans le menu Outils. Le jeton de clé apparaît dans la dernière ligne de la fenêtre Sortie. Utilisez uniquement le jeton de la clé, et non pas la totalité de la clé.

    Notez que ce fichier est presque identique à celui créé dans Procédure pas à pas : personnalisation des titres d'élément sur un formulaire d'affichage mobile. Les différences sont les suivantes :

    • La ligne

      <mobile:Label Text="Title field in Announcements List" RunAt="Server" />

      dans Procédure pas à pas : personnalisation des titres d'élément sur un formulaire d'affichage mobile

      est remplacée dans l'exemple de code de cette rubrique par la ligne

      <CustomMobile:ItemTitleField RunAt="Server" />

      afin que le modèle de rendu appelle le contrôle de rendu de champ que vous avez précédemment créé dans cette procédure pas à pas.

    • Une nouvelle directive Register a été ajoutée pour enregistrer le préfixe de balise "CustomMobile".

  7. Enregistrez et fermez le fichier.

  8. Sélectionnez Régénérer dans le menu Version.

Avec votre appareil mobile ou votre émulateur, accédez dans votre application Web à un site Web qui possède une liste Annonces. Accédez à la liste Annonces. Cliquez sur le lien Nouvel élément. Le résultat obtenu devrait ressembler à ceci :

Figure 1. Texte par défaut spécifié pour le champ du titre du formulaire de création
Formulaire mobile personnalisé de création d’élément

Créez un nouvel élément et attribuez-lui une valeur d'expiration correspondant à une date passée. Cliquez sur Enregistrer. Cette opération active l'affichage de liste. Cliquez sur le lien Afficher sous le nouvel élément. Le résultat obtenu devrait ressembler à ceci. Notez le lien Rechercher ajouté à la fin du titre.

Figure 2. Lien de recherche ajouté au formulaire d'affichage
Formulaire mobile personnalisé d’affichage d’élément

Cliquez sur le lien Modifier. Le résultat obtenu devrait ressembler à ceci. Notez la mention « En retard » ajoutée au titre actuel.

Figure 3. Rendu conditionnel du texte dans le champ du titre du formulaire de modification
Formulaire mobile personnalisé de modification d’élément
Afficher: