Bereitstellen von Brandinglösungen für SharePoint 2010-Websites mithilfe von Sandkastenlösungen

Zusammenfassung: Informationen zum Erstellen von Sandkasten-kompatiblen Brandinglösungen mithilfe von benutzerdefinierten Gestaltungsvorlagen, CSS-Dateien und Bildern, die in Microsoft SharePoint 2010-Farmen bereitgestellt werden können.

Letzte Änderung: Dienstag, 16. August 2011

Gilt für: Business Connectivity Services | Office 2010 | Open XML | SharePoint Designer 2010 | SharePoint Foundation 2010 | SharePoint Online | SharePoint Server 2010 | Visual Studio

Inhalt dieses Artikels
Übersicht
Gründe für die Sandkastenarchitektur
Erstellen des Projekts "Branding101"
Schlussbemerkung
Weitere Ressourcen
Informationen zum Autor

Inhalt

• Übersicht

• Gründe für die Sandkastenarchitektur

• Erstellen des Projekts "Branding101"

• Schlussbemerkung

• Weitere Ressourcen

Codebeispiel von der MSDN Code Gallery herunterladen 

Übersicht

Die SharePoint-Entwicklungstools in Microsoft Visual Studio 2010 bieten eine einfache und effektive Methode zum Packen und Bereitstellen der Dateien und des Codes, die für das Branding von Microsoft SharePoint 2010-Websites mithilfe einer Lösung mit eingeschränkter Sicherheitsstufe erforderlich sind. In diesem Artikel wird eine bewährte Methode zum Erstellen von Sandkasten-kompatiblen Brandinglösungen mithilfe von benutzerdefinierten Gestaltungsvorlagen, Cascading Stylesheets (CSS-Dateien) und Bildern beschrieben, die in SharePoint 2010-Farmen bereitgestellt werden können, in denen entweder SharePoint Foundation 2010 oder SharePoint Server 2010 ausgeführt wird.

Gründe für die Sandkastenarchitektur

Es gibt nur eine Methode zum Bereitstellen einer Unternehmenslösung, die für die vorherige Version der SharePoint-Produkte und -Technologien entwickelt wurde. Eine für eine Windows SharePoint Services 3.0- oder eine Office SharePoint Server 2007-Farm entwickelte SharePoint-Lösung muss auf der Farmebene durch einen Farmadministrator bereitgestellt werden. Bei der Bereitstellung einer Farmlösung müssen benutzerdefinierte Dateien auf Front-End-Webservern abgestimmt werden, was gewisse Risiken für die Integrität der Farm darstellt. Darüber hinaus werden von den meisten Farmlösungen benutzerdefinierte Assembly-DLLs im globalen Assemblycache auf dem Webserver installiert, wodurch der darin enthaltene Code als voll vertrauenswürdig ausgeführt werden kann. Deshalb verlangen viele Farmadministratoren, dass SharePoint-Lösungen langwierige Codeüberprüfungen und strenge Testverfahren durchlaufen, bevor sie in einer SharePoint-Farm bereitgestellt werden können. Farmadministratoren in einigen SharePoint-Umgebungen gehen noch einen Schritt weiter und verbieten die Bereitstellung von SharePoint-Lösungen auf Farmebene vollständig.

In SharePoint 2010 gibt es eine neue Sandkastenarchitektur, die eine echte Alternative zur Bereitstellung auf Farmebene darstellt. Im Gegensatz zur Bereitstellung einer Farmlösung ist für die Bereitstellung einer Sandkastenlösung kein Farmadministrator erforderlich. Stattdessen kann eine als Sandkastenlösung entwickelte SharePoint-Lösung von einem Unternehmensbenutzer im Bereich einer Websitesammlung hochgeladen und aktiviert werden. Dadurch kann die Bereitstellung einer benutzerdefinierten SharePoint-Lösung erheblich beschleunigt werden. Mit Sandkastenlösungen können Sie außerdem in Visual Studio 2010 benutzerdefinierte SharePoint-Lösungen für Umgebungen entwickeln, die die Bereitstellung von Farmlösungen nicht erlauben, wie z. B. SharePoint Online.

Im Zusammenhang mit der neuen Sandkastenarchitektur gibt es einen wichtigen Punkt, den Sie unbedingt verstehen sollten. Durch das Entwerfen und Entwickeln von Sandkasten-kompatiblen SharePoint-Lösungen erhöhen sich Ihre Bereitstellungsoptionen. Denn Sie können eine für den Sandkasten entwickelte SharePoint-Lösung als Sandkastenlösung oder als Farmlösung bereitstellen. Die Tatsache, dass Sie eine SharePoint-Lösung als Sandkastenlösung entwickeln, bedeutet nicht, dass Sie immer als Sandkastenlösung bereitgestellt werden muss.

Dieser Artikel enthält ein Beispiel für die höhere Flexibilität einer Sandkastenlösung. In einer SharePoint-Farm, die die Bereitstellung von Lösungen auf Farmebene nicht erlaubt, können Benutzer ihre SharePoint-Lösung im Kontext einer Websitesammlung hochladen und aktivieren. In einer anderen SharePoint-Farm ohne diese Einschränkungen kann dieselbe SharePoint-Lösung als Farmlösung bereitgestellt werden, was eine höhere Leistung und eine bessere Wartbarkeit ermöglicht. Dies stellt eine Motivation dar, stets die Sandkastenarchitektur zu verwenden, wenn Sie durch die Einschränkungen des Sandkastens nicht behindert werden.

Entwicklungstechniken für den Sandkasten

Viele SharePoint-Entwicklungstechniken können beim Entwickeln von Sandkastenlösungen nicht verwendet werden. Beispielsweise können mit einer Sandkastenlösung keine Dateien im SharePoint-Stammverzeichnis oder in einem anderen Speicherort im Dateisystem des Webservers bereitgestellt werden. Demnach können Sie Brandingdateien nicht in vertrauten Speicherorten bereitstellen, die bei Farmlösungen häufig verwendet werden, wie z. B. das Verzeichnis IMAGES oder LAYOUTS. Stattdessen müssen Sie Brandingdateien, wie z. B. Bilder und CSS-Dateien, innerhalb der Inhaltsdatenbank im Bereich der Hostwebsitesammlung bereitstellen.

Beim Erstellen von Code für eine Sandkastenlösung gibt es weitere nennenswerte Einschränkungen. Sie haben zwar Zugriff auf das serverseitige Objektmodell von SharePoint Foundation 2010, aber die in einer Sandkastenlösung verfügbare Funktionalität ist im Vergleich zu der beim Schreiben von Code in einer Farmlösung verfügbaren Funktionalität ziemlich eingeschränkt.

Der allgemeine Entwurf einer Sandkastenlösung beginnt in der Regel mit dem Hinzufügen von Features. Beim Hinzufügen eines Features zu einer Sandkastenlösung können Sie dem Feature einen Aktivierungsbereich auf der Ebene der Website oder der Websitesammlung zuweisen. Eine Sandkastenlösung darf jedoch kein Feature mit einem Aktivierungsbereich auf Farm- oder Webanwendungsebene enthalten.

Wenn Sie mit dem Entwickeln von Sandkastenlösungen beginnen, müssen Sie unbedingt unterscheiden zwischen Features, die im Websitesammlungsbereich aktiviert werden, und Features, die im Websitebereich aktiviert werden. Denn ein Feature, für das die Aktivierung im Websitesammlungsbereich konfiguriert ist, wird automatisch aktiviert, wenn der Benutzer die Sandkastenlösung aktiviert, die dieses Feature enthält. Andererseits werden Features, für die die Aktivierung im Websitebereich konfiguriert ist, nicht automatisch aktiviert. Sie müssen manuell vom Benutzer oder mithilfe von benutzerdefiniertem Code aktiviert werden. Deshalb sollten Sie in der Regel eine Sandkastenlösung mit mindestens einem Feature entwerfen, für das die Aktivierung im Websitesammlungsbereich aktiviert ist. Auf diese Weise haben Sie die Kontrolle, wenn der Benutzer Ihre Sandkastenlösung aktiviert.

Einem Feature in einer Sandkastenlösung können Sie einen Featureempfänger hinzufügen, so wie dies bei einer Farmlösung der Fall ist. Beachten Sie jedoch, dass der für einen Featureempfänger in einer Sandkastenlösung geschriebene Code im SharePoint Foundation-Sandkasten-Codedienst ausgeführt wird und den Einschränkungen der Sandkastenarchitektur unterliegt. Glücklicherweise können Sie auf grundlegende Funktionalität im serverseitigen Objektmodell zugreifen, mit dem Sie für alle Websites in einer Websitesammlung die Verwendung benutzerdefinierter Gestaltungsvorlagen und benutzerdefinierter CSS-Dateien konfigurieren können.

Bereitstellen von Dateien mithilfe von Modulen

Beim Erstellen einer SharePoint-Lösung für das Branding einer SharePoint 2010-Website müssen Sie benutzerdefinierte Dateien bereitstellen, wie z. B. Gestaltungsvorlagen, CSS-Dateien und Bilder. Wenn Sie eine Sandkastenlösung erstellen, können Sie nicht auf in Farmlösungen verwendete gängige Techniken zurückgreifen, bei denen benutzerdefinierte Dateien im SharePoint-Stammverzeichnis im Dateisystem des Webservers bereitgestellt werden. Stattdessen müssen Sie Instanzen dieser Dateien über Dateivorlagen mit dem Module-Element (Modul) bereitstellen.

Angenommen, Sie möchten die Gestaltungsvorlage MyCustomLayout.master im Gestaltungsvorlagenkatalog der Website auf oberster Ebene bereitstellen. Sie können zunächst ein Feature mit der Websitesammlungsebene als Bereich erstellen. Anschließend können Sie die Vorlagendatei MyCustomLayout.master im Verzeichnis Feature hinzufügen, die das HTML-Layout für Ihre benutzerdefinierte Brandinglösung enthält. Schließlich fügen Sie ein Elementmanifest hinzu, das das folgende Module-Element enthält, mit dem eine Instanz von MyCustomLayout.master im Gestaltungsvorlagenkatalog bereitgestellt wird.

<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <Module Name="MasterPageGallery" Url="_catalogs/masterpage" >
    <File Url="MyCustomLayout.master" Type="GhostableInLibrary" >
      <Property Name="UIVersion" Value="4" />
      <Property Name="ContentTypeId" Value="0x010105" />
    </File>
  </Module>
</Elements>

Wenn Sie ein solches Module-Element zum Bereitstellen von Dateien in einer Dokumentbibliothek wie z. B. dem Gestaltungsvorlagenkatalog erstellen, müssen Sie unbedingt das Url-Attribut des Module-Elements mithilfe des websiterelativen Pfads für das Stammverzeichnis der Dokumentbibliothek konfigurieren. Beim Bereitstellen einer Gestaltungsvorlage im Gestaltungsvorlagenkatalog sollte für das Url-Attribut des Module-Elements stets der Standardpfad _catalogs/masterpage konfiguriert sein.

Wenn Sie eine Datei im Bereich einer Dokumentbibliothek bereitstellen, sollte jedes File-Element (Module) ein Type-Attribut mit dem Wert GhostableInLibrary enthalten (siehe vorheriges Codebeispiel). Beim Bereitstellen von Gestaltungsvorlagen in SharePoint 2010 sollten Sie außerdem zwei Property-Elemente im File-Element hinzufügen, um die beiden wichtigen Eigenschaften UIVersion und ContentTypeId zu konfigurieren.

SharePoint Foundation unterscheidet mithilfe der UIVersion-Eigenschaft einer Gestaltungsvorlage zwischen Gestaltungsvorlagen, die für die neue SharePoint 2010-Benutzeroberfläche bzw. für die ältere Benutzeroberfläche von Office SharePoint Server 2007 entworfen wurden. Wenn Sie Ihre Gestaltungsvorlage basierend auf der SharePoint 2010-Benutzeroberfläche entwerfen, sollten Sie für die UIVersion-Eigenschaft den Wert 4 konfigurieren. Sie können für die UIVersion-Eigenschaft den Wert 3 in visuellen Upgradeszenarien konfigurieren, wenn Sie die Gestaltungsvorlage basierend auf der älteren Benutzeroberfläche entworfen haben.

Mithilfe der ContentTypeId-Eigenschaft werden Gestaltungsvorlagen und Seitenlayouts unterschieden, die von SharePoint Server 2010-Veröffentlichungssites verwendet werden. Beim Bereitstellen einer Gestaltungsvorlage sollten Sie für ContentTypeId den entsprechenden Wert für Gestaltungsvorlagen konfigurieren, nämlich 0x010105.

Bereitstellen von CSS-Dateien und Bildern in der Formatbibliothek

In Office SharePoint Server 2007 wird mit den Veröffentlichungsfeatures eine spezielle Dokumentbibliothek, die so genannte Formatbibliothek, erstellt, die von Microsoft zum Bereitstellen standardmäßiger CSS-Dateien und Bilddateien für Veröffentlichungssites verwendet wird. Die Formatbibliothek wird von Webdesignern und Entwicklern, die mithilfe von CSS-Dateien und Bilddateien Brandingelemente auf Office SharePoint Server 2007-Veröffentlichungssites anwenden, häufig auch als Bereitstellungsziel verwendet.

Beim Entwickeln einer allgemeinen, wiederverwendbaren Brandinglösung für SharePoint Server 2010-Farmen können Sie die Formatbibliothek nicht verwenden, da sie nur in Veröffentlichungssites vorhanden ist. Die Formatbibliothek wird von Windows SharePoint Services 3.0 nicht erstellt, wenn Sie andere Websitetypen erstellen, wie z. B. eine Teamwebsite, eine leere Website oder einen Dokumentarbeitsbereich. Glücklicherweise stellt dies in SharePoint 2010 kein Problem mehr dar.

In SharePoint 2010 weist jede Websitesammlung eine eigene Formatbibliothek auf. Deshalb hat Microsoft die standardmäßigen Bereitstellungsanweisungen zum Erstellen der Formatbibliothek in den Veröffentlichungsfeatures entfernt und in die globale Websitedefinition aufgenommen. Jedes Mal, wenn von SharePoint Foundation 2010 eine neue Websitesammlung erstellt wird, wird die Formatbibliothek der Website auf oberster Ebene hinzugefügt. Deshalb ist die Formatbibliothek ideal für das Bereitstellen von CSS-Dateien und Bilddateien in einer allgemeinen Brandinglösung geeignet.

Erstellen des Projekts "Branding101"

Nun ist es an der Zeit, mit den SharePoint-Entwicklungstools in Visual Studio 2010 die Schritte zum Erstellen einer allgemeinen Brandinglösung auszuführen. Sie können zunächst wie in Abbildung 1 dargestellt ein Leeres SharePoint-Projekt mit dem Namen Branding101 erstellen.

Abbildung 1. Neues leeres SharePoint-Projekt

Beim Erstellen des neuen SharePoint-Projekts werden Sie vomAssistenten zum Anpassen von SharePoint aufgefordert, eine URL zu einer lokalen SharePoint-Testwebsite einzugeben und Als Sandkastenlösung bereitstellen oder Als Farmlösung bereitstellen zu Testzwecken auszuwählen. Wählen Sie wie in Abbildung 2 dargestellt unbedingt Als Sandkastenlösung bereitstellen aus.

Abbildung 2. Als Sandkastenlösung bereitstellen

Erstellen und Bereitstellen einer benutzerdefinierten Gestaltungsvorlage

Der erste Schritt beim Erstellen einer benutzerdefinierten Brandinglösung ist das Erstellen einer neuen benutzerdefinierten Gestaltungsvorlage. Erstellen Sie zunächst ein neues Projektelement vom Typ Modul, mit dem die benutzerdefinierte Gestaltungsvorlage im Gestaltungsvorlagenkatalog bereitgestellt wird.

Klicken Sie in Visual Studio 2010 imProjektmappen-Explorer mit der rechten Maustaste auf den Projektknoten Branding101. Klicken Sie im Menü Projekt auf Hinzufügen und anschließend auf Neues Element.

Erstellen Sie wie in Abbildung 3 dargestellt im Dialogfeld Neues Element hinzufügen das neue Projektelement vom Typ Modul mit dem Namen MasterPageGallery.

Abbildung 3. MasterPageGallery-Modul

Das neu erstellte Modul enthält das Elementmanifest Elements.xml und die Beispielelementdatei Sample.txt. Klicken Sie mit der rechten Maustaste auf die Datei Sample.txt, und benennen Sie sie wie in Abbildung 4 dargestellt in Branding101.master um.

Abbildung 4. MasterPageGallery-Projektelement

Im nächsten Schritt ändern Sie den Inhalt der Vorlagendatei Branding101.master, die als Ausgangspunkt für eine benutzerdefinierte Gestaltungsvorlage dient. Eine beliebte Technik ist das Kopieren und Einfügen des Texts aus der standardmäßigen SharePoint 2010-Gestaltungsvorlage v4.master. Suchen Sie mithilfe von Windows-Explorer nach der Vorlagendatei v4.master, die im folgenden Pfad vorhanden ist.

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\v4.master

Wenn Sie die Vorlagendatei v4.master gefunden haben, öffnen Sie sie und kopieren deren Inhalt in die Zwischenablage. Anschließend öffnen Sie die Vorlagendatei Branding101.master in Ihrem Projekt und löschen den gesamten Dateiinhalt. Fügen Sie den Inhalt aus v4.master in Branding101.master ein, und speichern Sie die Änderungen. Nachdem Sie den Inhalt erfolgreich aus v4.master kopiert haben, schließen Sie diese Vorlagendatei ohne Speichern der Änderungen.

Aktuell ist der Inhalt Ihrer benutzerdefinierten Gestaltungsvorlage und der standardmäßigen SharePoint 2010-Gestaltungsvorlage, v4.master, identisch. Es ist sinnvoll, Branding101.master mindestens eine Schnelländerung hinzuzufügen, um visuelles Feedback zu erhalten und dadurch feststellen zu können, wenn Ihre benutzerdefinierte Gestaltungsvorlage verwendet wird. Dazu können Sie in Branding101.master nach dem öffnenden body-Tag suchen und direkt darunter das folgende Element hinzufügen.

<div style="background-color:yellow">Branding101.master</div>

Nachdem Sie Ihre benutzerdefinierte Gestaltungsvorlage erstellt haben, müssen Sie die Datei Elements.xml im MasterPageGallery-Modul ändern, um sicherzustellen, dass sie bei der Funktionsaktivierung ordnungsgemäß im Gestaltungsvorlagenkatalog bereitgestellt wird. Öffnen Sie die Datei Elements.xml, und aktualisieren Sie das Module-Element und das innere File-Element mit dem folgenden XML-Inhalt.

<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <Module Name="MasterPageGallery" 
          Path="MasterPageGallery" 
          Url="_catalogs/masterpage" >

    <File Url="Branding101.master" Type="GhostableInLibrary" >
      <Property Name="UIVersion" Value="4" />
      <Property Name="ContentTypeId" Value="0x010105" />
    </File>

  </Module>
</Elements>

Damit haben Sie die ersten Schritte für das MasterPageGallery-Modul abgeschlossen. Nun sollten Sie Ihre Aufmerksamkeit dem Feature widmen, mit dem dieses Modul bereitgestellt wird. Beachten Sie, dass beim Hinzufügen des Moduls zum Projekt Branding101 , von SharePoint-Entwicklungstools in Visual Studio 2010 automatisch das neue Feature Feature1 erstellt wurde. Suchen Sie imProjektmappen-Explorer nach diesem Feature, klicken Sie mit der rechten Maustaste darauf, und benennen Sie es in Main um.

Doppelklicken Sie nach der Umbenennung des Features auf den Knoten Feature, damit das Feature im Feature-Designer angezeigt wird. Ändern Sie den Titel des Features wie in Abbildung 5 dargestellt in einen aussagekräftigeren Namen, wie z. B. Branding 101 Sample Feature. Sie müssen unbedingt auch den Bereich des Features von Web in Site ändern, damit es nicht auf der Websiteebene, sondern auf der Websitesammlungsebene aktiviert wird.

Abbildung 5. "Branding 101 Sample Feature" im Feature-Designer

Erstellen und Bereitstellen einer benutzerdefinierten CSS-Datei

Nachdem Sie eine benutzerdefinierte Gestaltungsvorlage erstellt haben, müssen Sie im nächsten Schritt eine benutzerdefinierte CSS-Datei hinzufügen, die die CSS-Regeln für Ihre Brandinglösung enthält. Es wurde bereits darauf hingewiesen, dass es in SharePoint 2010 die bewährte Methode gibt, benutzerdefinierte CSS-Dateien in der Formatbibliothek bereitzustellen, da sie mit Sandkastenlösungen und Farmlösungen kompatibel ist. Diese Technik kann für Farmen, in denen SharePoint Server 2010 ausgeführt wird, sowie für Farmen, in denen nur SharePoint Foundation ausgeführt wird, verwendet werden. Sie sollten beachten, dass viele andere gängige Methoden für das Branding von SharePoint 2010-Websites diesen Grad an Flexibilität nicht bieten.

Klicken Sie imProjektmappen-Explorer mit der rechten Maustaste auf den Projektknoten Branding101. Klicken Sie im Menü Projekt auf Hinzufügen und anschließend auf Neues Element.

Erstellen Sie wie in Abbildung 6 dargestellt im Dialogfeld Neues Element hinzufügen das neue Projektelement vom Typ Modul mit dem Namen Style Library.

Abbildung 6. Modul "Style Library"

Das neue Projektelement vom Typ Modul enthält zunächst das Elementmanifest Elements.xml und die Beispielelementdatei Sample.txt. Klicken Sie mit der rechten Maustaste auf die Datei Sample.txt, und benennen Sie sie in Styles.css um.

Klicken Sie im nächsten Schritt mit der rechten Maustaste auf den Modulknoten Style Library, und klicken Sie im Menü Projekt auf Hinzufügen und anschließend auf Neuer Ordner, um einen neuen untergeordneten Ordner im Modul Style Library zu erstellen. Benennen Sie den Ordner Branding101.

Nachdem Sie diesen Ordner erstellt haben, können Sie die Datei styles.css in den Ordner imProjektmappen-Explorer ziehen.

Abbildung 7. Die Datei "Styles.css" im Modul "Style Library"

Nachdem Sie die Datei styles.css in den Ordner Branding101 verschoben haben, öffnen Sie die Datei, und löschen Sie den gesamten Inhalt. Im nächsten Schritt fügen Sie eine einfache CSS-Regel für das body-Tag hinzu, und stellen Sie sicher, dass IntelliSense ordnungsgemäß ausgeführt wird. Fügen Sie das folgende padding-top-Attribut hinzu, um visuelles Feedback zu erhalten, ob Sie diese CSS-Datei ordnungsgemäß verknüpfen.

body {
  padding-top: 50px;
}

Im nächsten Schritt fügen Sie dem Projekt Bilddateien hinzu. Die optimale Methode ist das Hinzufügen Ihrer benutzerdefinierten Bilddateien zu Style Library, damit in Ihrer benutzerdefinierten CSS-Datei einfacher darauf verwiesen werden kann. Erstellen Sie im Ordner Branding101 den Ordner Images, und fügen Sie diesem Ordner Bilddateien hinzu. In diesem Beispiel werden zwei Bilder verwendet, nämlich die Bilddatei Background.jpg, die als Wiederholungshintergrundbild für den Seitenkörper verwendet wird, und die Bilddatei Logo.gif, die als Websitelogo verwendet wird.

Abbildung 8. Bilddateien in "Style Library"

Nachdem Sie die Bilddateien dem Ordner Images hinzugefügt haben, können Sie über die CSS-Regeln in styles.css auf einfache Weise darauf verweisen. Um dies zu veranschaulichen, fügen Sie der Datei styles.css die folgenden Updates hinzu, um Background.jpg als Wiederholungshintergrundbild für den Seitenkörper zu verwenden.

body {
  padding-top: 50px;
  background-image: url('Images/Background.jpg');
  background-repeat: repeat;  
}

Damit haben Sie die ersten Schritte für Style Library abgeschlossen. Im Gegensatz zum zuvor erstellten MasterPageGallery-Modul müssen Sie die Datei Elements.xml nicht manuell ändern. Von den SharePoint-Entwicklungstools in Visual Studio 2010 können alle erforderlichen File-Elemente im Hintergrund hinzugefügt werden. Darüber hinaus können Sie im Ordner Images weitere Bilddateien hinzufügen, die automatisch im entsprechenden Speicherort von Style Library bereitgestellt werden.

Hinzufügen eines Featureempfängers zum Anwenden von Brandingattributen

Nachdem Sie zwei Projektelemente vom Typ Modul hinzugefügt haben, um eine benutzerdefinierte Gestaltungsvorlage und eine benutzerdefinierte CSS-Datei bereitzustellen, sollten Sie nun Code zu deren Verwendung schreiben. Dazu fügen Sie dem Feature Main einen Featureempfänger hinzu. Klicken Sie imProjektmappen-Explorer mit der rechten Maustaste auf den Featureknoten Main, und wählen Sie dann Ereignisempfänger hinzufügen aus, um eine Featureempfängerklasse hinzuzufügen.

Abbildung 9. Ereignisempfänger hinzufügen

In der Featureempfängerklasse müssen Sie die beiden Methoden FeatureActivated(SPFeatureReceiverProperties) und FeatureDeactivating(SPFeatureReceiverProperties) überschreiben und implementieren. Beginnen Sie die Codeerstellung mit dem Bereinigen und Neustrukturieren der Quelldatei, damit Ihre Featureempfängerklasse wie im folgenden Beispiel aussieht.

using System;
using System.Runtime.InteropServices;
using Microsoft.SharePoint;

namespace Branding101.Features.Main {
  [Guid("cc5874a5-695b-49d2-9cd2-4fa12be83874")]
  public class MainEventReceiver : SPFeatureReceiver {
    public override void FeatureActivated(
                           SPFeatureReceiverProperties properties) {

      // TODO: add activation code here.
    }

    public override void FeatureDeactivating(
                           SPFeatureReceiverProperties properties) {

      // TODO: add deactivation code here.
    }
  }
}

Betrachten wir nun die Schritte, die Sie ausführen müssen, wenn das Feature Main aktiviert ist. Zunächst müssen Sie den Pfad zur Vorlagendatei Branding101.master im Gestaltungsvorlagenkatalog bestimmen, damit sie für Websites als Gestaltungsvorlage konfiguriert werden kann. Beachten Sie, dass der Pfad zur Gestaltungsvorlage in Bezug auf das Stammverzeichnis der Hostwebanwendung berechnet werden muss. Anschließend müssen Sie alle Websites in der aktuellen Websitesammlung aufzählen und mehrere Eigenschaften jeder Website aktualisieren, damit die benutzerdefinierte Gestaltungsvorlage und die benutzerdefinierte CSS-Datei verwendet werden. Mit der folgenden Implementierung der FeatureActivated(SPFeatureReceiverProperties)-Methode werden die erforderlichen SPWeb-Eigenschaften für jede Website aktualisiert.

public override void FeatureActivated(
                       SPFeatureReceiverProperties properties) {
  SPSite siteCollection = properties.Feature.Parent as SPSite;
  if (siteCollection != null) {
    SPWeb topLevelSite = siteCollection.RootWeb;

    // Calculate relative path to site from Web Application root.
    string WebAppRelativePath = topLevelSite.ServerRelativeUrl;
    if (!WebAppRelativePath.EndsWith("/")) {
      WebAppRelativePath += "/";
    }

    // Enumerate through each site and apply branding.
    foreach (SPWeb site in siteCollection.AllWebs) {
      site.MasterUrl = WebAppRelativePath + 
                       "_catalogs/masterpage/Branding101.master";
      site.CustomMasterUrl = WebAppRelativePath + 
                             "_catalogs/masterpage/Branding101.master";
      site.AlternateCssUrl = WebAppRelativePath + 
                             "Style%20Library/Branding101/Styles.css";
      site.SiteLogoUrl = WebAppRelativePath + 
                         "Style%20Library/Branding101/Images/Logo.gif";
      site.UIVersion = 4;
      site.Update();
    }
  }
}

Mit der MasterUrl-Eigenschaft des SPWeb-Objekts leiten Sie Websiteseiten und Anwendungsseiten um, um sie mit einer benutzerdefinierten Gestaltungsvorlage wie z. B. Branding101.master zu verknüpfen. Im vorherigen Codebeispiel wird der Pfad zu Branding101.master berechnet, indem der webanwendungsrelative Pfad zur Website und der websiterelative Pfad zum Gestaltungsvorlagenkatalog in der Website auf oberster Ebene kombiniert wird, der immer den Wert _catalogs/masterpage aufweist.

Hinweis

In diesem Beispiel wird die SPWeb-Eigenschaft CustomMasterUrl zusätzlich zur MasterUrl-Eigenschaft aktualisiert. Das Aktualisieren der CustomMasterUrl-Eigenschaft spielt nur für Veröffentlichungssites eine Rolle, die Veröffentlichungsseiten in der Seitendokumentbibliothek enthalten. Mit der CustomMasterUrl-Eigenschaft wird die Gestaltungsvorlage für Veröffentlichungsseiten erneut zugewiesen. Das Zuweisen eines neuen Werts zur CustomMasterUrl-Eigenschaft in einer SharePoint Foundation-Website hat keine Auswirkungen und verursacht keine Probleme.

Mit der AlternateCssUrl-Eigenschaft werden die Seiten in einer Website mit der benutzerdefinierten CSS-Datei Styles.css verknüpft. Das Verknüpfungsverhalten der AlternateCssUrl-Eigenschaft wird durch das CssLink-SharePoint-Steuerelement implementiert, das im Kopfbereich aller standardmäßigen SharePoint 2010-Gestaltungsvorlagen definiert wird. Darüber hinaus wird mit dem CssLink-SharePoint-Steuerelement eine Verknüpfung zu einer wichtigen CSS-Datei mit dem Namen CoreV4.css hinzugefügt. Es sollte deshalb in jeder benutzerdefinierten Gestaltungsvorlage für SharePoint 2010 vorhanden sein.

Für die Brandinglösung in diesem Artikel wird zwar die Methode des Verknüpfens mit einer benutzerdefinierten CSS-Datei mithilfe der AlternateCssUrl-Eigenschaft verwendet. Sie sollten jedoch beachten, dass bei manchen Brandinglösungen eine alternative Methode des Verknüpfens mit einer benutzerdefinierten CSS-Datei mithilfe des CSSRegistration-Steuerelements verwendet wird. Beispielsweise können Sie das folgende CssRegistration-Element dem Kopfbereich einer benutzerdefinierten Gestaltungsvorlage hinzufügen, um eine Verknüpfung mit einer CSS-Datei in Style Library zu erstellen.

<SharePoint:CssRegistration
  name="<% $SPUrl:~sitecollection/Style Library/styles.css %>" 
  After="corev4.css"
  runat="server"
/>

Die Verwendung des CssRegistration-Steuerelements im Vergleich zur AlternateCssUrl-Eigenschaft hat den Vorteil, dass damit mehrere CSS-Dateien verknüpft werden können. Ein zweiter Vorteil ist, dass Sie das CssRegistration-Steuerelement in einzelnen Seiten für Szenarien mit einer CSS-Datei verwenden können, die von einigen, aber nicht von allen Seiten in einer Website verwendet wird. Die Verwendung des CssRegistration-Steuerelements hat jedoch auch den Nachteil, dass diese Technik auf dem $SPUrl-Ausdruck basiert, für den in der Hostfarm SharePoint Server 2010 ausgeführt werden muss. Falls die Möglichkeit besteht, dass Ihre Brandinglösung in Farmen verwendet wird, in denen nur SharePoint Foundation ausgeführt wird, sollten Sie die Technik des Verknüpfens mit einer benutzerdefinierten CSS-Datei mithilfe der AlternateCssUrl-Eigenschaft der Verwendung des CssRegistration-Steuerelements vorziehen.

In diesem Beispiel wird die SiteLogoUrl-Eigenschaft verwendet, da damit schnell und effektiv das Websitebild in der linken oberen Ecke der Seite ersetzt werden kann. Beachten Sie, dass das Verhalten der SiteLogoUrl-Eigenschaft vom SiteLogoImage-SharePoint-Steuerelement implementiert wird, das im Titelzeilenabschnitt von standardmäßigen SharePoint 2010-Gestaltungsvorlagen definiert wird, wie z. B. v4.master.

Mit der UIVersion-Eigenschaft wird konfiguriert, ob die aktuelle Website im Benutzeroberflächenmodus für SharePoint 2010-Websites oder im älteren Benutzeroberflächenmodus, der beim Migrieren von Office SharePoint Server 2007-Websites nach SharePoint 2010 verwendet wird, ausgeführt werden soll. Die Einstellung der UIVersion-Eigenschaft bewirkt in erster Linie, ob das CssLink-Steuerelement eine Verknüpfung mit der neuen standardmäßigen CSS-Datei corev4.css, die für SharePoint 2010 erstellt wird, oder mit der älteren standardmäßigen CSS-Datei core.css, die für Formatseiten in Office SharePoint Server 2007 entwickelt wurde, herstellt. Bei dem Beispiel in diesem Artikel wird der UIVersion-Eigenschaft der Wert 4 zugewiesen, um sicherzustellen, dass Seiten nicht mit core.css, sondern mit corev4.css verknüpft werden.

Bisher haben Sie erfahren, wie und weshalb mit der Lösung Branding101 bei der Funktionsaktivierung wichtige SPWeb-Eigenschaften in jeder Website der aktuellen Websitesammlung konfiguriert werden. In diesem Abschnitt wird der Code beschrieben, der bei der Funktionsaktivierung ausgeführt werden sollte. Es ist sinnvoll, alle benutzerdefinierten Brandingelemente zu entfernen, um die aktuelle Websitesammlung auf den ursprünglichen Zustand zurückzusetzen.

Es folgt ein Beispiel für die Implementierung der FeatureDeactivating-Methode, mit der alle Seiten auf die Verwendung der standardmäßigen Gestaltungsvorlage v4.master zurückgesetzt und die Verknüpfung zur benutzerdefinierten CSS-Dateien und zum benutzerdefinierten Websitelogo entfernt wird.

public override void FeatureDeactivating(
                       SPFeatureReceiverProperties properties) {
  SPSite siteCollection = properties.Feature.Parent as SPSite;
  if (siteCollection != null) {
    SPWeb topLevelSite = siteCollection.RootWeb;

    // Calculate relative path of site from Web Application root.
    string WebAppRelativePath = topLevelSite.ServerRelativeUrl;
    if (!WebAppRelativePath.EndsWith("/")) {
      WebAppRelativePath += "/";
    }

    // Enumerate through each site and remove custom branding.
    foreach (SPWeb site in siteCollection.AllWebs) {
      site.MasterUrl = WebAppRelativePath + 
                       "_catalogs/masterpage/v4.master";
      site.CustomMasterUrl = WebAppRelativePath + 
                             "_catalogs/masterpage/v4.master";
      site.AlternateCssUrl = "";
      site.SiteLogoUrl = "";
      site.Update();
    }
  }
} 

Hinzufügen eines Ereignisempfängers zu untergeordneten Brandingwebsites

Zum Abschließen des Projekts Branding101 sollten Sie eines oder mehrere Projektelemente hinzufügen. Sie benötigen noch eine Möglichkeit, um Ihre benutzerdefinierten Brandingelemente automatisch auf untergeordnete Websites anzuwenden, die in einer Websitesammlung erstellt werden, für die das Feature Branding101 aktiviert ist. Dazu müssen Sie in Windows SharePoint Services 3.0 oder Office SharePoint Server 2007 die Funktionsanheftung verwenden. In SharePoint 2010 wird jedoch das neue WebProvisioned-Ereignis unterstützt, wodurch diese Aufgabe erheblich vereinfacht wird.

Klicken Sie im Projektmappen-Explorermit der rechten Maustaste auf den Projektknoten Branding101, und klicken Sie im Menü Projekt auf Hinzufügen und dann auf Neues Element. Erstellen Sie im Dialogfeld Neues Element hinzufügen das neue Ereignisempfänger-Projektelement ChildSiteInit.

Beim Erstellen eines neuen Ereignisempfänger-Projektelements werden Sie vomAssistenten zum Anpassen von SharePoint aufgefordert, den gewünschten Typ auszuwählen. Wählen Sie einen Ereignisempfänger vom Typ Webereignisse aus. Wählen Sie unten im Dialogfeld unter Die folgenden Ereignisse behandeln die Option Eine Site wurde bereitgestellt aus.

Abbildung 10. Assistent zum Anpassen von SharePoint

Wenn Sie auf Fertig stellen klicken, werden von den SharePoint-Entwicklungstools in Visual Studio 2010 der neue Ereignishandler WebProvisioned sowie eine Datei Elements.xml, die das zum Registrieren dieses Ereignishandlers in der aktuellen Websitesammlung erforderliche Receivers-Element enthält, hinzugefügt. Das Hinzufügen dieses Ereignisses hat den Vorteil, dass dies bei jedem Hinzufügen einer neuen untergeordneten Website erfolgt. Dadurch wird das Erstellen des Codes, mit dem die entsprechenden SPWeb-Eigenschaften von der Website auf oberster Ebene in die neue untergeordnete Website kopiert werden, ziemlich vereinfacht. Im Folgenden finden Sie den dafür erforderlichen Code.

using System;
using Microsoft.SharePoint;

namespace Branding101.ChildSiteInit {

  public class ChildSiteInit : SPWebEventReceiver {
    public override void WebProvisioned(
                           SPWebEventProperties properties) {
      SPWeb childSite = properties.Web;
      SPWeb topSite = childSite.Site.RootWeb;
      childSite.MasterUrl = topSite.MasterUrl;
      childSite.CustomMasterUrl = topSite.CustomMasterUrl;
      childSite.AlternateCssUrl = topSite.AlternateCssUrl;
      childSite.SiteLogoUrl = topSite.SiteLogoUrl;
      childSite.Update();
    }
  }
}

Bereitstellen und Testen

Die Entwicklungsarbeit für das Projekt Branding101 ist damit abgeschlossen. Als Zusammenfassung der notwendigen Schritte lässt sich sagen, dass das SharePoint-Projekt mithilfe von vier primären Projektelementen strukturiert wurde:

1. Zunächst fügten Sie ein Modul mit einer benutzerdefinierten Gestaltungsvorlage hinzu und konfigurierten es so, dass eine Instanz dieser Gestaltungsvorlage im Gestaltungsvorlagenkatalog bereitgestellt wird.

2. Im zweiten Schritte fügten Sie ein Modul für Style Library hinzu, um eine Instanz einer benutzerdefinierten CSS-Datei und mehrere Bilddateien bereitzustellen.

3. Im dritten Schritt fügten Sie einen Featureempfänger mit Code hinzu, um alle Websites in der aktuellen Websitesammlung aufzuzählen und die SPWeb-Eigenschaften für jede Website so zu konfigurieren, dass sie mit Ihrer benutzerdefinierten Gestaltungsvorlage und Ihrer benutzerdefinierten CSS-Datei verknüpft werden.

4. Schließlich haben Sie einen Ereignisempfänger hinzugefügt, um automatisch neue untergeordnete Websites mit den erforderlichen Brandingmerkmalen zu initialisieren.

Das fertige Projekt sollte nun wie in Abbildung 11 strukturiert sein.

Abbildung 11. Fertiges Projekt im Projektmappen-Explorer

Nun ist es an der Zeit, das Ergebnis zu testen. Klicken Sie imProjektmappen-Explorer mit der rechten Maustaste auf den ProjektknotenBranding101, und klicken Sie dann auf Bereitstellen. Das Projekt wird von Visual Studio 2010 als Lösungspaket mit dem Namen Branding101.wsp erstellt. Das ausgegebene Lösungspaket des Projekts wird dann von Visual Studio in den Lösungskatalog Ihrer Testwebsite hochgeladen und aktiviert. Nach Abschluss der Bereitstellung sollten Sie in der Lage sein, zu Ihrer Testwebsite zu navigieren und zu überprüfen, dass nun Ihre benutzerdefinierte Gestaltungsvorlage und Ihre benutzerdefinierte CSS-Datei verwendet werden.

Abbildung 12. Testwebsite

Die Entwicklungsarbeit ist zwar abgeschlossen, aber die Designarbeiten beginnen damit erst. Sie stehen nun vor der Herausforderung, die Gestaltungsvorlage und die CSS-Datei zu bearbeiten, um ein beeindruckendes Design zu erstellen. Auf Wunsch können Sie weiterhin Visual Studio 2010 zum Entwerfen der Gestaltungsvorlage und der CSS-Datei verwenden.

Beim Bearbeiten der Gestaltungsvorlage und der CSS-Datei in Visual Studio 2010 können Sie das Ergebnis auf einfache Weise testen. Experimentieren Sie beispielsweise mit einer geringfügigen Änderung am HTML-Code in Branding101.master oder an einer CSS-Regel in styles.css. Führen Sie anschließend den Befehl Bereitstellen erneut aus, und aktualisieren Sie die aktuelle Seite im Browser, um die Auswirkungen der Änderungen anzuzeigen.

Es gibt eine weitere hilfreiche Designtechnik, die Sie berücksichtigen sollten, nämlich das Integrieren von SharePoint Designer 2010 in Ihre Designanstrengungen. Beispielsweise können Sie Ihre Testwebsite mithilfe von SharePoint Designer 2010 öffnen und anschließend die Gestaltungsvorlage Branding101.master im erweiterten Bearbeitungsmodus öffnen. Diese Methode hat den großen Vorteil, dass mit SharePoint Designer 2010 Gestaltungsvorlagen für SharePoint-Websites wesentlich professioneller als mit allen von Visual Studio 2010 angebotenen Methoden gestaltet werden können. SharePoint Designer 2010 bietet außerdem einige Vorteile für das Bearbeiten von CSS-Dateien.

Sie müssen unbedingt beachten, dass Sie mit SharePoint Designer die Vorlagen für Gestaltungsvorlagen wie z. B. Branding101.master oder die Vorlagen für CSS-Dateien wie z. B. styles.css nicht direkt bearbeiten können. Beim Arbeiten in SharePoint Designer 2010 nehmen Sie stattdessen Anpassungen an bereitgestellten Instanzen vor, die in der Inhaltsdatenbank gespeichert sind. Dies stellt jedoch kein großes Problem dar, da Sie nur wissen müssen, wie Sie in SharePoint Designer 2010 kopieren und in Visual Studio 2010 einfügen.

Nachdem Sie die Designanpassungen an einer Gestaltungsvorlage in SharePoint Designer 2010 vorgenommen haben, können Sie den Inhalt der angepassten Gestaltungsvorlage in der Codeansicht in die Zwischenablage kopieren. Anschließend wechseln Sie wieder zu Visual Studio 2010 und fügen den Inhalt der Zwischenablage in die Vorlagendatei für Branding101.master ein. Mithilfe derselben Vorgehensweise können Sie den angepassten Inhalt von styles.css in SharePoint Designer kopieren und in die Vorlagenversion von styles.css in Visual Studio 2010 einfügen.

Schlussbemerkung

Sie nutzen nun das Beste aus beiden Systemen. Mit den starken Funktionen von SharePoint Designer 2010 können Sie eine beeindruckende Brandinglösung erstellen. Darüber hinaus haben Sie die Möglichkeit, Ihre Brandingarbeit als Lösungspaket zu packen, das als Sandkastenlösung oder Farmlösung in jeder Farm, in der SharePoint Foundation oder SharePoint Server 2010 ausgeführt wird, bereitgestellt werden kann.

Weitere Ressourcen

Weitere Informationen finden Sie in den folgenden Ressourcen:

• SharePoint Developer Center auf MSDN

• Erste Schritte mit den SharePoint 2010-Entwicklungstools in Visual Studio 2010

• SharePoint-Teamblog

• Channel 9: Sandkastenlösungen

Informationen zum Autor

Ted Pattison ist Autor, Trainer und Mitbegründer von Critical Path Training, ein auf Schulungen zu SharePoint-Technologien spezialisiertes Unternehmen. Als Microsoft SharePoint-MVP (Most Valuable Professional) arbeitet Ted Pattison häufig mit dem Developer Platform Evangelism-Team von Microsoft zusammen, um SharePoint-Schulungsunterlagen für Entwickler in einem frühen Stadium des Produktlebenszyklus (Alpha- und Betaphase) zu erstellen. Ted Pattison ist außerdem Mitverfasser von Inside Microsoft SharePoint 2010.