Développement de composants WebPart avancés pour SharePoint 2010 avec Visual Studio 2010 Atelier pratique Manuel de l atelier SPCHOL301 SPCHOL301 Composants WebPart avancés VB
Ce document est fourni en l état. Les informations et les vues contenues dans ce document, y compris les URL et autres références de site Web Internet, sont susceptibles d être modifiées sans préavis. Vous les utilisez à vos risques. Ce document ne vous confère aucun droit sur la propriété intellectuelle contenue dans quelque produit Microsoft que ce soit. Vous pouvez copier ou utiliser ce document pour vos propres besoins de référence internes. 2010 Microsoft. Tous droits réservés.
Sommaire Objectif de l atelier... 2 Ressources supplémentaires... 2 Mise en route... 2 Connexion à l ordinateur virtuel... 2 Emplacements... 2 Préparation de l atelier... 3 Copie des exemples de code à partir du document Word... 3 Extraits de code... 4 Exercice 1 Créer un composant Visual Web Part à l aide de contrôles SharePoint... 5 Tâche 1 Créer un projet SharePoint de type composant Visual Web Part... 5 Tâche 2 Créer un composant WebPart de listage de projets... 7 Tâche 3 Déployer et tester... 8 Exercice 2 Composant WebPart Affichage Liste XSLT... 13 Tâche 1 Ouvrir SharePoint Designer... 13 Tâche 2 Ajouter un composant WebPart Affichage Liste XSLT... 16 Tâche 3 Modifier le composant WebPart Affichage Liste XSLT... 18 Tâche 4 Déployer et tester... 20 Résumé de l atelier... 21 Page 1
Développement de composants WebPart avancés pour SharePoint 2010 avec Visual Studio 2010 Durée estimée de cet atelier : 30 minutes Objectif de l atelier Les composants WebPart constituent l une des principales technologies ASP.NET utilisées par SharePoint pour présenter des informations dynamiques aux utilisateurs. Ils représentent la personnalisation la plus courante créée pour SharePoint. Un composant WebPart est un composant réutilisable qui se trouve sur une page de composants WebPart et qui peut présenter n importe quel type d informations basées sur le Web. L objectif de cet atelier est d apprendre certaines des fonctionnalités de composant WebPart plus avancées spécifiques au système SharePoint. Créer un composant WebPart SharePoint de base qui utilise des contrôles SharePoint pour afficher des informations à partir du site SharePoint Créer et personnaliser un composant WebPart XsltListViewWebPart dans SharePoint Designer 2010. Ressources supplémentaires Cet atelier comprend les ressources supplémentaires suivantes : Ce manuel de l atelier SPCHOL301_Manual_VB.docx Ce document Code source Completed\VB\Ex1 Code source de l atelier complet. Ressources Resources\VB Différentes ressources utilisées tout au long de cet atelier. Mise en route Connexion à l ordinateur virtuel Connectez-vous à l ordinateur virtuel à l aide des informations d utilisateur suivantes : Nom d utilisateur : Administrator Mot de passe : pass@word1 Emplacements Cet atelier pratique contient une série de ressources supplémentaires à des emplacements précis. Par défaut, il est supposé que le répertoire de base de l atelier pratique est C:\Content Packs\Packs\SharePoint 2010 Developer Labs 1.0\SUPPORTING FILES\\SPCHOL301\Resources. Page 2
Le dossier de travail par défaut de cet atelier est C:\SPHOLS\SPCHOL301. Préparation de l atelier Accédez au répertoire de base de l atelier pratique Supporting Files\SPCHOL301\Resources et exécutez le script PowerShell optimize.ps1 (cette opération peut prendre quelques minutes) : 1. Cliquez avec le bouton droit sur optimize.ps1 et sélectionnez Exécuter avec PowerShell : Figure 1 - Exécuter le script PowerShell 2. Cette opération ouvre une fenêtre PowerShell pour exécuter le script. Veuillez attendre la fin de l exécution du script PowerShell et la fermeture de la fenêtre PowerShell : Figure 2 - Fenêtre PowerShell exécutant le script Copie des exemples de code à partir du document Word La copie et le collage de code à partir de ce document Word vers Visual Studio ne sont fiables que pour les parties de code mis en forme, par exemple : Page 3
Console.WriteLine("Ce code est fiable!") Le code qui ne se trouve pas dans ces parties peut contenir des caractères Unicode ou d autres caractères invisibles qui ne sont pas du code C#/VB ou XML valide, par exemple : Console.WriteLine («Ce code n est pas fiable!!») Extraits de code Vous pouvez également utiliser des extraits de code pour insérer le code approprié dans l atelier. Pour utiliser l extrait de code requis pour cet atelier : Cliquez avec le bouton droit sur le fichier de code où vous souhaitez insérer l extrait de code. Sélectionnez Insérer un extrait : Figure 3 - Menu contextuel de code Visual Studio Sélectionnez les extraits de code dans la galerie Mes extraits de code. Page 4
Exercice 1 Créer un composant Visual Web Part à l aide de contrôles SharePoint Durée de l exercice : 15 minutes Vue d ensemble de l exercice Cet exemple montre comment créer un composant Visual Web Part et utiliser des contrôles SharePoint dans Visual Studio 2010. Tâche 1 Créer un projet SharePoint de type composant Visual Web Part Au cours de cette tâche, vous allez créer une solution de composant Visual Web Part et utiliser des contrôles utilisateur SharePoint. 1. Ouvrez Visual Studio 2010 en sélectionnant successivement Menu Démarrer Tous les programmes Microsoft Visual Studio 2010 Microsoft Visual Studio 2010. 2. Dans le menu, sélectionnez Fichier Nouveau Projet. 3. Sélectionnez le modèle de projet Visual Basic SharePoint 2010 Composant Visual Web Part. 4. Dans la zone de texte Nom, entrez ProjectsListWebPart. 5. Dans la zone de texte Emplacement, entrez C:\SPHOLS\SPCHOL301\VB\Ex1. Figure 4 - Boîte de dialogue Nouveau projet Page 5
6. Cliquez sur OK pour créer le projet. 7. Une boîte de dialogue Assistant Personnalisation de SharePoint apparaît. 8. Dans la zone «Quel site local voulez-vous utiliser pour le débogage?», tapez http://intranet.contoso.com. 9. Dans la zone «Quel est le niveau de confiance de cette solution SharePoint?», cliquez sur la case d option Déployer en tant que solution de batterie. Figure 5 - Boîte de dialogue Assistant Personnalisation de SharePoint 10. Cliquez sur Terminer pour terminer l Assistant de personnalisation. 11. Visual Studio ajoute les fichiers nécessaires. Page 6
Tâche 2 Créer un composant WebPart de listage de projets 1. Dans l Explorateur de solutions, double-cliquez sur VisualWebPart1.webpart. 2. Définissez la propriété Title du fichier VisualWebPart1.webpart sur Projects List Web Part. Figure 6 - VisualWebPart1.webpart après modification du titre 3. Dans l Explorateur de solutions, double-cliquez sur VisualWebPart1. 4. Ajoutez le code suivant à la fin de VisualWebPart1UserControl.ascx. Ce code ajoute un contrôle SharePoint ListViewByQuery, un contrôle asp Label et un contrôle SharePoint DateTime. Vous pouvez obtenir le même résultat en faisant glisser le contrôle depuis la boîte à outils vers le canevas de fichiers VisualWebPart1UserControl.ascx. Vous devrez vérifier que les identifiants correspondent à ceux définis dans le code ci-après. <SharePoint:ListViewByQuery runat="server" ID="ProjectsListView" /> <br /> <asp:label ID="Label1" runat="server" Text="Items due by:" /> <SharePoint:DateTimeControl ID="DueDate" AutoPostBack="true" OnDateChanged="OnDate_Changed" DateOnly="true" runat="server"> </SharePoint:DateTimeControl> Extrait de code : Mes extraits HTML spchol301_ex1_usercontrol 5. Dans l Explorateur de solutions, cliquez avec le bouton droit sur VisualWebPart1UserControl.ascx et sélectionnez Afficher le code. 6. Ajoutez les instructions imports suivantes. Imports Microsoft.SharePoint Imports Microsoft.SharePoint.Utilities Imports System.Web Extrait de code : Mes extraits de code spchol301_ex1_namespaces Page 7
7. Ajoutez le code suivant au corps de la méthode Page_Load. Dim duedate As DateTime = DateTime.Now If Not String.IsNullOrEmpty(Request.QueryString("date")) Then duedate = DateTime.Parse(Request.QueryString("date")) End If Me.DueDate.SelectedDate = duedate Dim home As SPWeb = SPContext.Current.Web ProjectsListView.List = home.lists("projects") Dim query As New SPQuery(ProjectsListView.List.DefaultView) query.viewfields = _ "<FieldRef Name=""Title"" /><FieldRef Name=""Due_x0020_Date"" />" query.query = String.Format _ ("<Where><Leq><FieldRef Name=""Due_x0020_Date"" /><Value Type=""DateTime"">{0}</Value></Leq></Where>", duedate.tostring("s")) ProjectsListView.DisableFilter = True ProjectsListView.DisableSort = True ProjectsListView.Query = query Extrait de code : Mes extraits de code spchol301_ex1_pageload 8. Ajoutez le code suivant après la méthode Page_Load. Protected Sub OnDate_Changed(ByVal sender As Object, ByVal e As EventArgs) SPUtility.Redirect(SPContext.Current.ListItem.Name _, SPRedirectFlags.Default _, HttpContext.Current _, String.Format("date={0}", DueDate.SelectedDate.ToString("d"))) End Sub Extrait de code : Mes extraits de code spchol301_ex1_ondatechanged Tâche 3 Déployer et tester 1. Vous pouvez à présent déployer le composant WebPart. Cliquez avec le bouton droit sur le projet dans l Explorateur de solutions. Sélectionnez Déployer. Page 8
2. Si vous observez la fenêtre Sortie, vous pouvez voir que le déploiement a réussi. Figure 7 - Fenêtre de sortie de la génération 3. Ouvrez un navigateur Web à l adresse http://intranet.contoso.com. Vous allez maintenant ajouter le composant WebPart à la page d accueil. 4. Cliquez sur l icône Modifier du Ruban. Figure 8 - Icône Modifier de la page d arrivée Page 9
5. Cliquez sur l onglet Insérer sous Outils d édition dans le Ruban. Figure 9 - Onglet Insérer du Ruban d édition 6. Cliquez sur le bouton Composant WebPart. Ensuite, sous Catégories, sélectionnez Custom. Projects List Web Part doit apparaître dans la liste des composants WebPart. Placez votre curseur dans la zone de la page où vous voulez faire apparaître le composant WebPart. Il doit s agir d une zone qui accepte les composants WebPart. En l occurrence, placez votre curseur dans la zone sous le composant WebPart de bienvenue et avant le contrôle Documents partagés, puis sélectionnez Ajouter dans la partie supérieure droite de la page. Figure 10 - Formulaire d insertion du composant WebPart Page 10
Cliquez sur le bouton Enregistrer et fermer du Ruban. Sélectionnez Oui si la boîte de dialogue Enregistrer les modifications apparaît. Figure 11 - Bouton Arrêter la modification en surbrillance sur le Ruban d édition Page 11
7. Votre nouveau composant WebPart de listage de projets se trouve désormais sur la page d accueil. Figure 12 - Composant WebPart ajouté à la page d accueil Au cours des minutes précédentes, vous vous êtes exercé à la création d un composant Visual Web Part avec des contrôles SharePoint. Vous pouvez fermer votre navigateur après avoir examiné les modifications. Page 12
Exercice 2 Composant WebPart Affichage Liste XSLT Le composant WebPart Affichage Liste XSLT est un nouveau composant WebPart dans SharePoint Foundation 2010. Ce composant WebPart est utilisé à la place du composant WebPart Affichage des données dans Windows SharePoint Services v3.0 (Le composant WebPart Affichage des données est toujours disponible dans SharePoint Foundation 2010). Le composant WebPart Affichage Liste XSLT est très facile à créer dans SharePoint Designer 2010. Dans le cadre de cet exercice, vous allez créer dans SharePoint Designer 2010 un composant WebPart Affichage Liste XSLT qui affiche la liste des employés sur la page d accueil de l intranet de Contoso. La liste des employés sera extraite de la liste Employees qui existe sur le site Contoso. Le composant WebPart sera créé entièrement dans SharePoint Designer 2010. Cela nous permettra de comprendre le balisage créé par le composant WebPart Affichage Liste XSLT. Tâche 1 Ouvrir SharePoint Designer 1. Ouvrez SharePoint Designer 2010 en sélectionnant successivement Démarrer Tous les programmes SharePoint Microsoft SharePoint Designer 2010. 2. Cliquez sur le bouton Ouvrir le site. Dans la boîte de dialogue Ouvrir le site Web, entrez http://intranet.contoso.com dans la zone de texte Nom du site Web. Figure 13 - Menu Site dans SharePoint Designer 2010 Page 13
Figure 14 - Boîte de dialogue Ouvrir le site Web 3. Si un message sollicite votre authentification, entrez les informations suivantes : Nom d utilisateur : administrator Mot de passe : pass@word1 Page 14
4. Dans le volet de navigation de gauche Site SharePoint, sélectionnez Pages du site, puis Accueil.aspx. Figure 15 - Pages du site - Page d accueil 5. Dans le menu du Ruban, sélectionnez Modifier le fichier Modifier le fichier en mode Avancé. Ignorez les erreurs qui s affichent éventuellement sur cet écran, qui s ouvre sur l onglet Parcourir du volet Concepteur. Vous progresserez rapidement. Figure 16 - Bouton du Ruban Modifier le fichier en mode Avancé Page 15
Tâche 2 Ajouter un composant WebPart Affichage Liste XSLT 1. Cliquez sur l onglet Code en bas du volet du concepteur pour afficher le mode Code. Figure 17 - Onglet du mode Code Page 16
2. En mode Code, faites défiler l écran jusqu au bas de la page et placez votre curseur avant la balise de fin </ContentTemplate> (juste après la balise fermante WebPartPages:WebPartZone) Figure 18 - Sélection de la première balise div dans la zone inférieure du composant WebPart 3. Sélectionnez l onglet Insertion du Ruban. 4. Cliquez sur la liste déroulante de l élément Vue de données. Figure 19 - Bouton Vue de données mis en surbrillance 5. Sélectionnez la liste Employees. 6. SharePoint Designer ajoute le nouveau composant WebPart XsltListViewWebPart au fichier HomePage.aspx. Page 17
7. Cliquez sur l icône Enregistrer en haut de la page. Figure 20 - Bouton Enregistrer mis en évidence dans le Ruban 8. Si le système vous invite à confirmer l opération, cliquez sur Oui. 9. Ouvrez un navigateur Web à l adresse http://intranet.contoso.com. 10. Ignorez les avertissements éventuels. 11. Le nouveau composant WebPart XsltListViewWebPart doit désormais apparaître. Tâche 3 Modifier le composant WebPart Affichage Liste XSLT 1. Revenez à SharePoint Designer 2010. Vous allez à présent apporter certaines modifications au composant WebPart XsltListViewWebPart. 2. La colonne Fullname de la liste Employees doit ressortir. 3. Dans le mode concepteur, sélectionnez la cellule de tableau contenant le mot Fullname. Figure 21 - Cellule de tableau Fullname Page 18
4. À l aide de la fenêtre Appliquer les styles en bas à droite (si la fenêtre Appliquer les styles n apparaît pas, sous l onglet Affichage, sélectionnez Appliquer les Styles sous le bouton Volets Office), définissez Sélectionner le style CSS à appliquer sur.ms-bodyarepagemargin. Cliquez avec le bouton droit sur Appliquer le style. Figure 22 - Appliquer le style 5. Dans le mode Code du concepteur, remontez jusqu à RowLimit et remplacez la valeur 30 par 5. Figure 22 - Modifier la limite des lignes Page 19
6. Dans le mode code du concepteur, remontez jusqu à WebPartPages:XsltListViewWebPart, ajoutez la propriété ChromeType et choisissez TitleAndBorder comme style de cadre. Figure 23 - Ajouter la propriété ChromeType 7. Cliquez sur l icône Enregistrer en haut de la page. Figure 23 - Bouton Enregistrer mis en évidence dans le Ruban Tâche 4 Déployer et tester 1. Ouvrez un navigateur Web à l adresse http://intranet.contoso.com. À présent, le composant WebPart XsltListViewWebPart modifié ne doit répertorier que 5 employés par page. Figure 24 - Composant WebPart XsltListViewWebPart modifié Page 20
Résumé de l atelier Dans cet atelier, vous avez effectué les exercices suivants : créer un composant Visual Web Part à l aide de Visual Studio 2010 ; utiliser un contrôle SharePoint à partir de la boîte à outils ; utiliser le contrôle ListViewByQuery SharePoint ; utiliser les fonctionnalités de déploiement au sein de Visual Studio 2010 pour déployer le projet de composant Visual Web Part SharePoint ; utiliser SharePoint Designer pour créer un composant WebPart XsltListViewWebPart ; personnaliser le composant WebPart XsltListViewWebPart ; manipuler un site Web SharePoint pour héberger un composant WebPart. Dans cet atelier, vous avez appris à créer un composant Visual Web Part SharePoint à partir de zéro. Vous avez appris à utiliser des contrôles à partir de la boîte à outils, ainsi que des contrôles SharePoint tels que ListViewByQuery, et déployé la solution de composant WebPart. Vous avez également effectué des actions dans l interface Web SharePoint, notamment l ajout d un composant WebPart à une page existante et la modification de ce composant WebPart en conséquence. Vous avez également utilisé le composant WebPart XsltListViewWebPart et personnalisé celui-ci à l aide de SharePoint Designer. Page 21