Exemplarische Vorgehensweise: Erstellen einer angepassten Homepage und von XSL für ein Webpart für Inhaltsabfragen (Content Query Web Part, CQWP)

Artikel
09/18/2014

Letzte Änderung: Montag, 19. April 2010

Gilt für: SharePoint Server 2010

Inhalt dieses Artikels
Nicht verankertes Anzeigen von Videos
Erstellen eines Standardbilds für Videos, die nicht über ein Miniaturbild verfügen
Hinzufügen eines Description-Elements zu "ItemStyle.xsl"
Hinzufügen einer Bewertungsanzeige zu "ItemStyle.xsl"

Dieses Thema ist der vierte Teil einer fünfteiligen Reihe von exemplarischen Vorgehensweisen, in denen Sie lernen, eine Videofreigabewebsite zu erstellen und anzupassen.

Wenn Sie die unter Exemplarische Vorgehensweise: Erstellen einer Videowebsite und Exemplarische Vorgehensweise: Anpassen der Vorgehensweise zum Hochladen von Videos beschriebenen Aufgaben ausgeführt haben, sind Sie bereit, eine angepasste Homepage und XSL für ein angepasstes Webpart für Inhaltsabfragen (Content Query Web Part, CQWP) zu erstellen, die jeweils für die Freigabe, die Anzeige und die Verwaltung von Videos entworfen sind.

Zum Erstellen der Homepage und der CQWP-XSL gehören vier Aufgaben:

Verwenden Sie eine CSS-Außerkraftsetzungsdefinition, damit die vom ContentByQueryWebPart-Objekt angezeigten Elemente nicht verankert angezeigt werden.
Erstellen Sie ein neues Elementformat für das ContentByQueryWebPart-Objekt.
Erstellen Sie ein Standardbild für Videos, die nicht über ein Miniaturbild verfügen.
Fügen Sie dem Elementformat eine Bewertungsanzeige hinzu.

Das Hinzufügen eines oder mehrerer Webparts für Inhaltsabfragen (Content Query Web Parts, CQWPs) zur Homepage ist ein zentraler Bestandteil des Entwurfs einer Website, bei dem die verfügbaren Optionen zum Sortieren und Anzeigen von Videos maximiert werden. Mit dem CQWP wird eine dynamische Liste von Videos angezeigt; Sie können beispielsweise auswählen, dass die zuletzt hochgeladenen Videos oder die Videos mit den höchsten Bewertungen hervorgehoben werden. In dieser exemplarischen Vorgehensweise wird das Erstellen eines benutzerdefinierten Formats für das CQWP veranschaulicht. Das Format ist so optimiert, dass Videos in einem Format angezeigt werden, bei dem die visuellen Elemente betont werden, beispielsweise indem große Miniaturbilder angezeigt werden, mehrere Videos pro Zeile in einem nicht verankerten Layout angeordnet werden und Bewertungen angezeigt werden.

Zusätzlich zur Anpassung des Erscheinungsbilds der Website können Sie Benutzer zu einem angepassten Anzeigeformular leiten (das gemäß Exemplarische Vorgehensweise: Erstellen einer Videowebsite erstellt wurde), wenn auf ein Videoergebnis geklickt wird. Verwenden Sie das angepasste Anzeigeformular als Alternative zum Rendern eines MediaWebPart-Objekts für die direkte Wiedergabe der Videodatei (die Standardaktion, die beim Klicken auf ein Videoergebnis ausgelöst wird).

Voraussetzungen

Führen Sie die unter Exemplarische Vorgehensweise: Erstellen einer Videowebsite und Exemplarische Vorgehensweise: Anpassen der Vorgehensweise zum Hochladen von Videos beschriebenen Aufgaben aus.

So erstellen Sie ein neues Format für das CQWP

Starten Sie den Microsoft SharePoint Designer 2010. Klicken Sie im Menü Datei auf Öffnen.
Navigieren Sie zum Ordner /Style Library/XSL Style Sheets, und öffnen Sie die Datei ItemStyle.xsl.
Checken Sie die Datei zum Bearbeiten aus, damit Sie bei Bedarf ein Rollback für die Änderungen ausführen können.
Kopieren Sie das XSL:Template-Element und den gesamten ImageTopCentered-Inhalt als neue Vorlage in die Datei. Dies ist notwendig, da das ItemStyle-Element dem vorhandenen ImageTopCentered-Format ähnelt.
Ändern Sie die Werte der Attribute name und match so, dass diese dem Wert des neuen Formatnamens entsprechen. Zum Ändern des name-Attributs in ContosoWithRatings beispielsweise aktualisieren Sie das XSL:Template-Tag wie gezeigt.
```
<xsl:template name="ContosoWithRatings" match="Row[@Style='ContosoWithRatings']" mode="itemstyle">
```
Speichern Sie die aktualisierte Datei ItemStyle.xsl.
Vergewissern Sie sich, dass das Format verfügbar ist, indem Sie den Bereich Webparteigenschaften eines CQWP anzeigen.

Fügen Sie das folgende Formatattribut dem ersten <div>-Tag im Format hinzu.

<div class="item centered" style="float:left;padding-left:20px;padding-right:20px; width:160px; height:240px; margin-left:auto; margin-right:auto">

Durch das Hinzufügen des float-Attributs und der zugehörigen Parameter in das item centered-Format werden alle Daten der einzelnen Elemente zentriert gerendert. Ändern Sie die genauen Pixelwerte im Code in die gewünschte Pixelanzahl.

Nicht verankertes Anzeigen von Videos

Sie können eine benutzerdefinierte CSS-Außerkraftsetzungsdefinition erstellen, damit von ContentByQueryWebPart-Objekten zurückgegebene Elemente nicht verankert angezeigt werden. Wenden Sie den geschriebenen Code anstelle der XSL selbst auf jedes Seitenlayout an, in dem das CQWP verwendet wird: Das Ändern der XSL wirkt sich auf alle CQWP-Formate aus, nicht nur auf die Seitenlayouts, die dort angewendet werden, wo das für Video entworfene CQWP verwendet wird.

Durch diese Definition wird dem dfwp-item-Format ein float-Attribut hinzugefügt, das vom CQWP auf jedes angezeigte Element angewendet wird.

<style type=”text/css”>
.dfwp-item
{ 
float:left;
}
</style>

Erstellen eines Standardbilds für Videos, die nicht über ein Miniaturbild verfügen

Standardmäßig wird das für das CQWP erstellte Format so verwendet, dass für jedes Bild eine gültige Vorschaubild-URL definiert wird. Bilder ohne gültige Vorschaubild-URL werden nicht richtig gerendert. Fügen Sie dem neuen Format eine Logik hinzu, damit auf der Seite, wenn keine Vorschaubild-URL vorhanden ist, das standardmäßig in SharePoint Server 2010 verfügbare Videobild angezeigt wird.

Hinweis
Der Standardspeicherort für das Standardvideobild lautet http://<Server>/_layouts/images/VideoPreview.png.

Umschließen Sie das vorhandene <img>-Tag im Stylesheet mit einer <xsl:choose>-Anweisung. Wenn eine Vorschaubild-URL vorhanden ist, folgt die <xsl:choose>-Anweisung dem SharePoint Server 2010-Standardverhalten; anderenfalls wird das Standardbild verwendet.

<xsl:choose>
   <xsl:when test="string-length($SafeImageUrl) != 0">
      <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}"height="120" width="160"/>
      </xsl:when>
      <xsl:otherwise>
      <img class="image" src="http://<server>/_layouts/images/VideoPreview.png" alt="{@ImageUrlAltText}"  height="120" width="160"/>
   </xsl:otherwise>
</xsl:choose>

Hinzufügen eines Description-Elements zu "ItemStyle.xsl"

Fügen Sie dem Format ein description-Element hinzu, indem Sie dem Format unter dem link-item <div>-Tag Markup hinzufügen. Das Verhalten der Tags link-item <div> und description <div> aus dem Default-Format in der Datei ItemStyle.xsl ist nahezu identisch. Da das description <div>-Element in einem kleinen Bereich des Bildschirms angezeigt wird, wird die Zeichenfolge nach 128 Zeichen abgeschnitten. Durch das Abschneiden der Zeichenfolge wird verhindert, dass lange Beschreibungen inline gerendert werden.

<div class="description">
        <xsl:if test="string-length(@Description) &gt; 128">
           <xsl:value-of select="concat(substring(@Description,1,128),'…')" />
        </xsl:if>
        <xsl:if test="string-length(@Description) &lt; 128">
           <xsl:value-of select="@Description"/>
        </xsl:if>
     </div>

Hinzufügen einer Bewertungsanzeige zu "ItemStyle.xsl"

Wenn Sie die Bewertungsanpassung der Videowebsite hinzufügen, können über die Bewertungsanzeige Bewertungen für die einzelnen Videos angezeigt werden. Das Hinzufügen des rating-Elements zur Datei ItemStyle.xsl ist vergleichbar mit dem Hinzufügen des description-Formats. Zum Anzeigen der Bewertung mit Sternen im Bereich von 0 bis 5 laden Sie für jeden Wert eine Bilddatei auf den Server hoch (insgesamt sechs Dateien). Mit jeder Datei sollte eine andere Anzahl von Sternen angezeigt werden. Wenn Sie die Bilder hochgeladen haben, fügen Sie eine Logik hinzu, damit basierend auf dem Wert im rating-Feld das entsprechende Bild angezeigt wird. Es wird empfohlen, zu diesem Zweck in der Formatbibliothek der Website einen neuen Ordner zu erstellen. Im Codebeispiel wird angenommen, dass alle Bilder in einen Ordner mit dem Namen /Style Library/Rating CBQ Images hochgeladen wurden und dass die Dateien die Namen 0Stars.png, 1Stars.png, 2Stars.png usw. haben. Wenn Sie andere Namen verwenden, aktualisieren Sie das Markup entsprechend. Ersetzen Sie in URLs die Zeichenfolge <Server> durch den Namen Ihres Servers.

<div> 
         <span id = "rating" style = "vertical-align:top">
<xsl:choose>
                    <xsl:when test = "@Rating &gt;= 5">
                    <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/5stars.png"></img>
                    </xsl:when>
                        <xsl:when test = "@Rating &gt;= 4">
                        <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/4stars.png"></img>
                        </xsl:when>
                        <xsl:when test = "@Rating &gt;= 3">
                        <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/3stars.png"></img>
                        </xsl:when>
<xsl:when test = "@Rating &gt;= 2">
                            <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/2stars.png"></img>
                        </xsl:when>
                        <xsl:when test = "@Rating &gt;= 1">
                            <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/1stars.png"></img>
                        </xsl:when>
                        <xsl:when test = "@Rating &gt;= 0">
                        <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/0stars.png"></img>
                        </xsl:when>
                        <xsl:otherwise>
                            <img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/0stars.png"></img>
                        </xsl:otherwise>
                   </xsl:choose>
                </span>
            </div>