Entwickeln erweiterter Webparts für SharePoint 2010 mit Visual Studio 2010

Transkript

1 Entwickeln erweiterter Webparts für SharePoint 2010 mit Visual Studio 2010 Praktische Übung Übungsanleitung SPCHOL301 SPCHOL301 Erweiterte Webparts VB

2 Dieses Dokument wird wie besehen bereitgestellt. Die in diesem Dokument enthaltenen Informationen und Ansichten, einschließlich URLs und Verweise auf Internetwebsites, können ohne vorherige Ankündigung geändert werden. Das Risiko der Nutzung liegt bei Ihnen. Mit diesem Dokument werden keine Rechte an geistigem Eigentum an einem Microsoft-Produkt auf Sie übertragen. Sie sind berechtigt, dieses Dokument zu kopieren und für eigene interne Referenzzwecke zu nutzen Microsoft Corporation. Alle Rechte vorbehalten.

3 Inhalt Übungsziel... 2 Weitere Ressourcen... 2 Erste Schritte... 2 Anmelden beim virtuellen Computer... 2 Speicherorte... 2 Voraussetzungen für diese praktische Übung... 3 Kopieren von Codebeispielen aus einem Word-Dokument... 3 Codeausschnitte... 4 Übung 1: Erstellen eines visuellen Webparts mit SharePoint-Steuerelementen... 5 Aufgabe 1: Erstellen eines SharePoint-Projekts vom Typ Visuelles Webpart... 5 Aufgabe 2: Erstellen eines Projektlisten-Webparts... 7 Aufgabe 3: Erstellen und Testen... 8 Übung 2: Das Webpart XSLT-Listenansicht Aufgabe 1: Öffnen von SharePoint Designer Übung 2: Hinzufügen des Webparts XSLT-Listenansicht Aufgabe 3: Ändern des Webparts XSLT-Listenansicht Aufgabe 4: Erstellen und Testen Übungszusammenfassung Seite 1

4 Entwickeln erweiterter Webparts für SharePoint 2010 mit Visual Studio 2010 Voraussichtliche Zeit zum Durcharbeiten dieser Übung: 30 Minuten Übungsziel Eine der wichtigsten ASP.NET-Technologien, die von SharePoint verwendet werden, um Benutzern dynamische Informationen zu präsentieren, sind Webparts. Webparts sind die gängigsten Anpassungen, die für SharePoint erfolgen. Ein Webpart ist eine wiederverwendbare Komponente auf einer Webpartseite, die einen beliebigen Typ webbasierter Informationen darstellen kann. Ziel dieser Übung ist das Vermitteln einiger der erweiterten Webpartfunktionen, die für das SharePoint- System spezifisch sind. Erstellen eines einfachen SharePoint-Webparts, das mithilfe von SharePoint-Steuerelementen Informationen in der SharePoint-Website anzeigt Erstellen eines Webparts vom Typ XsltListViewWebPart in SharePoint Designer 2010 Weitere Ressourcen Zu dieser Übung gehören die folgenden weiteren Ressourcen: Diese Übungsanleitung SPCHOL301_Manual_VB.docx Dieses Dokument Quellcode Completed\VB\Ex1 Vervollständigter Übungsquellcode Ressourcen Resources\VB Verschiedene andere im Verlauf dieser Übung verwendete Ressourcen Erste Schritte Anmelden beim virtuellen Computer Melden Sie sich beim virtuellen Computer als der folgende Benutzer an: Benutzername: Administrator Kennwort: Speicherorte Zu dieser praktischen Übung gehören verschiedene weitere Ressourcen an festen Speicherorten. Standardmäßig wird vorausgesetzt, dass C:\Content Packs\Packs\SharePoint 2010 Developer Labs 1.0\SUPPORTING FILES\SPCHOL301\Resources das Basisverzeichnis dieser praktischen Übung ist. Der standardmäßige Arbeitsordner für diese praktische Übung ist C:\SPHOLS\SPCHOL301. Seite 2

5 Voraussetzungen für diese praktische Übung Wechseln Sie zum Basisverzeichnis Supporting Files\SPCHOL301\Resources dieser praktischen Übung, und führen Sie das PowerShell-Skript optimize.ps1 aus (was einige Minuten dauern kann): 1. Klicken Sie mit der rechten Maustaste auf optimize.ps1, und wählen Sie Mit PowerShell ausführen aus: Abbildung1: Ausführen des PowerShell-Skripts 2. Hierdurch wird ein PowerShell-Fenster zum Ausführen des Skripts geöffnet. Warten Sie ab, bis die Ausführung des PowerShell-Skripts beendet und das PowerShell-Fenster geschlossen wurde: Abbildung 2: PowerShell-Fenster, in dem das Skript ausgeführt wird Kopieren von Codebeispielen aus einem Word-Dokument Das Kopieren und Einfügen von Code aus diesem Word-Dokument in Visual Studio ist nur für die Abschnitte mit formatiertem Code sicher. Beispiel: Console.WriteLine("Dieser Code ist sicher!") Seite 3

6 Nicht in diesen Abschnitten enthaltener Code kann Unicode- oder andere unsichtbare Zeichen erhalten, die keinen gültigen XML- oder C#-/VB-Code darstellen. Beispiel: Console.WriteLine ( Dieser Code ist NICHT sicher!! ) Codeausschnitte Sie können auch mit Codeausschnitten arbeiten, um den in dieser Übung benötigten Code einzufügen. So verwenden Sie den für diese Übung benötigten Codeausschnitt Klicken Sie mit der rechten Maustaste an der Stelle auf die Codedatei, an der Sie den Codeausschnitt einfügen möchten. Wählen Sie Codeausschnitt einfügen aus. Abbildung 3: Kontextmenü für Visual Studio-Code Wählen Sie im Katalog Eigene Codeausschnitte Codeausschnitte aus. Seite 4

7 Übung 1: Erstellen eines visuellen Webparts mit SharePoint- Steuerelementen Dauer der Übung: 15 Minuten Übersicht über die Übung Dieses Beispiel veranschaulicht das Erstellen eines visuellen Webparts und Verwenden von SharePoint-Steuerelementen in Visual Studio Aufgabe 1: Erstellen eines SharePoint-Projekts vom Typ Visuelles Webpart In dieser Aufgabe erstellen Sie eine Projektmappe vom Typ Visuelles Webpart und verwenden SharePoint-Benutzersteuerelemente. 1. Öffnen Sie Visual Studio 2010, indem Sie im Startmenü Alle Programme, dann Microsoft Visual Studio 2010 und danach Microsoft Visual Studio 2010 auswählen. 2. Wählen Sie im Menü Datei die Option Neu und dann Projekt aus. 3. Wählen Sie Visual Basic, danach SharePoint und dann 2010 und hier die Projektvorlage Visuelles Webpart aus. 4. Geben Sie ProjectsListWebPart in das Textfeld Name ein. 5. Geben Sie C:\SPHOLS\SPCHOL301\VB\Ex1\ in das Textfeld Speicherort ein. Abbildung 4: Dialogfeld Neues Projekt 6. Klicken Sie auf OK, um das Projekt zu erstellen. Seite 5

8 7. Der Assistent zum Anpassen von SharePoint wird angezeigt. 8. Geben Sie für Welche lokale Site soll für das Debugging verwendet werden? die Adresse ein. 9. Wählen Sie für Wie lautet die Vertrauensebene für diese SharePoint-Lösung? die Option Als Farmlösung bereitstellen. Abbildung 5: Assistent zum Anpassen von SharePoint 10. Klicken Sie auf Fertig stellen, um den Anpassungs-Assistenten abzuschließen. 11. Die benötigten Dateien werden von Visual Studio hinzugefügt. Seite 6

9 Aufgabe 2: Erstellen eines Projektlisten-Webparts 1. Doppelklicken Sie im Projektmappen-Explorer auf VisualWebPart1.webpart. 2. Ändern Sie die Eigenschaft Title in der Datei VisualWebPart1.webpart in Projektlisten-Webpart. Abbildung 6: VisualWebPart1.webpart nach Änderung des Titels 3. Doppelklicken Sie im Projektmappen-Explorer auf VisualWebPart1. 4. Fügen Sie den folgenden Code am Ende von VisualWebPart1UserControl.ascx hinzu. Mit diesem Code werden das SharePoint-Steuerelement ListViewByQuery, das ASP-Steuerelement Label und das SharePoint-Steuerelement DateTime hinzugefügt. Dasselbe kann erreicht werden, indem das Steuerelement aus der Toolbox auf den Zeichenbereich der Datei VisualWebPart1UserControl.ascx gezogen wird. Vergewissern Sie sich, dass die IDs denjenigen im folgenden Code entsprechen. <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> Codeausschnitt: Eigene HTML-Ausschnitte spchol301_ex1_usercontrol 5. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf VisualWebPart1UserControl.ascx, und wählen Sie Code anzeigen aus. Seite 7

10 6. Fügen Sie die folgenden Imports-Anweisungen hinzu. Imports Microsoft.SharePoint Imports Microsoft.SharePoint.Utilities Imports System.Web Codeausschnitt: Eigene Codeausschnitte spchol301_ex1_namespaces 7. Fügen Sie den folgenden Code dem Codetext der Page_Load-Methode hinzu. 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 Codeausschnitt: Eigene Codeausschnitte spchol301_ex1_pageload 8. Fügen Sie den folgenden Code hinter der Page_Load-Methode ein: 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 Codeausschnitt: Eigene Codeausschnitte spchol301_ex1_ondatechanged Aufgabe 3: Erstellen und Testen 1. Sie können das Webpart nun bereitstellen. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt. Wählen Sie Bereitstellen aus. Seite 8

11 2. Im Fenster Ausgabe können Sie prüfen, ob die Bereitstellung erfolgreich war. Abbildung 7: Fenster mit der Erstellungsausgabe 3. Öffnen Sie in einem Webbrowser Sie fügen nun das Webpart der Homepage hinzu. 4. Klicken Sie im SharePoint-Menüband auf das Symbol Bearbeiten. Abbildung 8 - Symbol Bearbeiten auf der Homepage Seite 9

12 5. Klicken Sie im Menüband in der Gruppe Bearbeitungstools auf die Registerkarte Einfügen. Abbildung 9: Registerkarte Einfügen im Bearbeitungsmenüband 6. Klicken Sie auf die Schaltfläche Webpart. Wählen Sie unter Kategorien die Option Benutzerdefiniert aus. Projektlisten-Webpart sollte in der Liste der Webparts angezeigt werden. Platzieren Sie den Cursor in dem Bereich der Seite, in dem das Webpart angezeigt werden soll. Es muss sich um eine Zone handeln, die Webparts akzeptiert. Platzieren Sie in diesem Fall den Cursor in der Zone unter dem Begrüßungs-Webpart und vor dem Steuerelement Freigegebene Dokumente, und klicken Sie dann rechts unten auf der Seite auf Hinzufügen. Abbildung 10: Formular zum Einfügen von Webparts Seite 10

13 Klicken Sie im Menüband auf Speichern und schließen. Klicken Sie auf Ja, wenn das Dialogfeld Änderungen speichern angezeigt wird. Abbildung 11: Bearbeitungsmenüband mit hervorgehobener Schaltfläche zum Beenden der Bearbeitung Seite 11

14 7. Das neue Webpart zum Auflisten von Projekten befindet sich nun auf der Homepage. Abbildung 12: Der Homepage hinzugefügtes Webpart In den vergangenen Minuten haben Sie ein visuelles Webpart mit SharePoint-Steuerelementen erstellt. Nach Überprüfen der Änderungen können Sie Ihren Browser schließen. Seite 12

15 Übung 2: Das Webpart XSLT-Listenansicht Das Webpart XSLT-Listenansicht ist ein neues Webpart in SharePoint Foundation Dieses Webpart wird anstelle des Webparts Datenansicht in Windows SharePoint Services 3.0 verwendet. (Das Webpart Datenansicht steht in SharePoint Foundation 2010 weiter zur Verfügung.) Das Webpart XSLT-Listenansicht kann in SharePoint Designer 2010 ganz einfach erstellt werden. Für diese Übung erstellen Sie das Webpart XSLT-Listenansicht in SharePoint Designer 2010, in dem auf der Homepage des Intranets von Contoso eine Liste mit Mitarbeitern angezeigt wird. Die Liste der Mitarbeiter wird aus der Liste Employees extrahiert, die auf der Contoso-Website vorhanden ist. Das Webpart wird vollständig in SharePoint Designer 2010 erstellt. Dadurch wird das Markup veranschaulicht, das vom Webpart XSLT-Listenansicht generiert wird. Aufgabe 1: Öffnen von SharePoint Designer 1. Öffnen Sie SharePoint Designer 2010, indem Sie im Startmenü Alle Programme, dann SharePoint und anschließend Microsoft SharePoint Designer 2010 auswählen. 2. Klicken Sie auf die Schaltfläche Website öffnen. Geben Sie im eingeblendeten Dialogfeld in das Textfeld Websitename ein. Abbildung 13 - Menü Websites in SharePoint Designer 2010 Seite 13

16 Abbildung 14 - Dialogfeld Website öffnen 3. Geben Sie die folgenden Informationen ein, wenn Sie aufgefordert werden, sich zu authentifizieren: Benutzername: administrator Kennwort: pass@word1 Seite 14

17 4. Wählen Sie linken Navigationsbereich Websiteseiten und dann Homepage.aspx aus. Abbildung 15: Websiteseiten - Homepage 5. Wählen Sie im Menüband Datei bearbeiten und dann Datei im erweiterten Modus bearbeiten aus. Ignorieren Sie etwaige auf diesem Bildschirm angezeigte Fehler, der mit der Registerkarte Durchsuchen im Designerbereich geöffnet wird. Fahren Sie einfach fort. Abbildung 16 Schaltfläche Datei im erweiterten Modus bearbeiten im Menüband Übung 2: Hinzufügen des Webparts XSLT-Listenansicht Seite 15

18 6. Klicken Sie unten im Designerbereich auf die Registerkarte Code, um die Ansicht Code zu öffnen. Abbildung 17: Registerkarte für Codeansicht Seite 16

19 7. Führen Sie in der Ansicht Code einen Bildlauf nach unten durch, und platzieren Sie den Cursor vor dem Endtag </ContentTemplate> (direkt hinter dem Endtag WebPartPages:WebPartZone) Abbildung 18 - Auswählen des ersten div-elements in der unteren Webpartzone 8. Klicken Sie im Menüband auf die Registerkarte Einfügen. 9. Klicken Sie auf das Dropdownelement Datenansicht. Abbildung 19: Ausgewählte Schaltfläche Datenansicht 10. Wählen Sie die Liste Employees aus. 11. Das neue Webpart XSLT-Listenansicht wird von SharePoint Designer der Datei HomePage.aspx hinzugefügt. Seite 17

20 12. Klicken Sie oben auf der Seite auf das Symbol Speichern. Abbildung 20: Schaltfläche Speichern im Menüband 13. Klicken bei einer Bestätigungsaufforderung auf Ja. 14. Öffnen Sie in einem Webbrowser Ignorieren Sie etwaige Warnungen. 16. Das neue Webpart XSLT-Listenansicht sollte nun angezeigt werden. Aufgabe 3: Ändern des Webparts XSLT-Listenansicht 1. Kehren Sie zu SharePoint Designer 2010 zurück, um nun Änderungen am Webpart XSLT- Listenansicht vorzunehmen. 2. Die Spalte Fullname in der Liste Employees muss hervorgehoben werden. 3. Wählen Sie in der Entwurfsansicht die Tabellenzelle mit dem Eintrag Fullname aus. Abbildung 21: Tabellenzelle Fullname Seite 18

21 4. Wechseln Sie rechts unten zum Fenster Formatvorlagen übernehmen (wenn das Fenster Formatvorlagen übernehmen nicht sichtbar ist, wechseln Sie zur Registerkarte Ansicht und wählen Formatvorlagen übernehmen unter der Schaltfläche Aufgabenbereiche aus). Führen Sie im Feld Anzuwendende CSS-Formatvorlage auswählen einen Bildlauf zu msbodyareaagemargin aus. Klicken Sie mit der rechten Maustaste auf Formatvorlage übernehmen. Abbildung 22: Formatvorlage übernehmen 5. Führen Sie in der Ansicht Code des Designers einen Bildlauf nach oben zu RowLimit durch, und ändern Sie den Wert 30 in 5. Abbildung 22: Ändern der maximalen Anzahl der Datensätze Seite 19

22 6. Führen Sie in der Ansicht Code des Designers einen Bildlauf nach oben zu WebPartPages:XsltListViewWebPart durch, und wählen Sie TitleAndBorder als Chrometyp. Abbildung 23: Hinzufügen der Eigenschaft ChromeType 7. Klicken Sie oben auf der Seite auf das Symbol Speichern. Abbildung 23: Schaltfläche Speichern im Menüband Aufgabe 4: Erstellen und Testen 1. Öffnen Sie in einem Webbrowser Im geänderten Webpart XSLT- Listenansichts- sollten nun nur fünf Mitarbeiter pro Seite angezeigt werden. Abbildung 24: Geändertes XSLT-Listenansichts-Webpart Seite 20

23 Übungszusammenfassung In dieser praktischen Übung haben Sie die folgenden Aufgaben ausgeführt: Erstellen eines visuellen Webparts in Visual Studio 2010 Verwenden eines SharePoint-Steuerelements aus der Toolbox Verwenden des SharePoint-Steuerelements ListViewByQuery Verwenden der integrierten Bereitstellung in Visual Studio 2010 zum Bereitstellen des SharePoint-Projekts Visuelles Webpart Erstellen eines Webparts vom Typ Listenansicht in SharePoint Designer Anpassen des Webparts XSLT-Listenansicht Einrichten einer SharePoint-Website für das Hosten eines Webparts In dieser praktischen Übung haben Sie gelernt, ein visuelles SharePoint-Webpart neu zu erstellen. Sie haben gelernt, wie Sie Steuerelemente aus der Toolbox sowie SharePoint-Steuerelemente wie ListViewByQuery verwenden, und die Webpartlösung bereitgestellt. Aktionen sind außerdem auf der SharePoint-Webbenutzeroberfläche erfolgt, auf der Sie ein Webpart einer vorhandenen Seite hinzugefügt und das Webpart entsprechend geändert haben. Ferner haben Sie das XSLT-Listenansicht eingesetzt-webpart und es mit SharePoint Designer angepasst. Seite 21