Пошаговое руководство: создание настраиваемой домашней страницы и XSL-преобразования веб-части запроса контента

Статья
09/18/2014

Дата последнего изменения: 19 апреля 2010 г.

Применимо к: SharePoint Server 2010

В этой статье
Отображение плавающих видеозаписей
Создание изображения по умолчанию для видеозаписей, для которых не определен эскиз
Добавление элемента Description в файл ItemStyle.xsl
Добавление отображения оценки в файл ItemStyle.xsl

Это четвертая часть серии из пяти пошаговых руководств, в которых описывается процесс создания и настройки сайта для общего доступа к видео.

После выполнения задач, описанных в статьях Пошаговое руководство. Создание видеосайта и Пошаговое руководство. Настройка отправки видео, можно создать настраиваемую домашнюю страницу и код XSL настраиваемой веб-части запроса контента, которые будут использоваться для общего доступа к видеозаписям, их просмотра и управления ими.

Процесс создания домашней страницы и кода XSL веб-части запроса контента включает в себя четыре задачи:

Определение переопределения CSS, позволяющего перемещать элементы, отображаемые в веб-части ContentByQueryWebPart.
Создание нового стиля элемента для объекта ContentByQueryWebPart.
Создание изображения по умолчанию для видеозаписей, для которых не определен эскиз.
Добавление отображения оценки к стилю элемента.

Добавление одной или нескольких веб-частей запроса контента на домашнюю страницу является ключевым этапом при разработке сайта, обеспечивающего максимально эффективные функции сортировки и отображения видеозаписей. Веб-часть запроса контента обеспечивает отображение динамического списка видеозаписей. Например, можно выделить последние добавленные или самые популярные видеозаписи. В этом пошаговом руководстве демонстрируется, как создать настраиваемый стиль для веб-части запроса контента, оптимизированный для визуального выделения элементов (например, отображение крупных эскизов, размещение нескольких видеозаписей в один ряд с возможностью перемещения, а также отображение оценок).

Помимо настройки оформления сайта можно реализовать перенаправление пользователей к настраиваемой форме отображения, созданной в статье Пошаговое руководство. Создание видеосайта, при щелчке на видеозаписи в результатах поиска. Настраиваемая форма отображения может использоваться в качестве альтернативы отображению объекта MediaWebPart для непосредственного воспроизведения видеофайла (это действие вызывается по умолчанию при щелчке видеозаписи в результатах поиска).

Необходимые компоненты

Выполните задачи, описанные в статьях Пошаговое руководство. Создание видеосайта и Пошаговое руководство. Настройка отправки видео.

Создание нового стиля для веб-части запроса контента

Запустите Microsoft SharePoint Designer 2010. В меню Файл выберите команду Открыть.
Перейдите в папку /Style Library/XSL Style Sheets и откройте файл ItemStyle.xsl.
Извлеките файл для редактирования, чтобы при необходимости иметь возможность отката изменений.
Скопируйте элемент XSL:Template и все содержимое его элемента ImageTopCentered в виде нового шаблона в файл. Это необходимо, поскольку в элементе ItemStyle используется существующий стиль ImageTopCentered.
Измените значения атрибутов name и match в соответствии со значениями имени нового стиля. Например, чтобы изменить атрибут name на ContosoWithRatings, обновите тег XSL:Template, как показано.
```
<xsl:template name="ContosoWithRatings" match="Row[@Style='ContosoWithRatings']" mode="itemstyle">
```
Сохраните обновленный файл ItemStyle.xsl.
Проверьте доступность стиля. Для этого просмотрите область Свойства веб-части для любой из веб-частей запроса контента.

Добавьте следующий атрибут стиля к первому тегу <div> в стиле.

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

При добавлении атрибута float и его параметров к стилю item centered все данные каждого элемента выравниваются по центру. При необходимости измените точные значения в пикселях в коде.

Отображение плавающих видеозаписей

Можно создать настраиваемое определение переопределения CSS, позволяющее перемещать элементы, отображаемые в веб-части ContentByQueryWebPart. После написания кода примените его к каждому макету страницы, на котором используется веб-часть запроса контента, а не к самому коду XSL. Изменение кода XSL затронет все стили CQWP, а не только те макеты страниц, которые применяются при отображении видеозаписей в веб-частях запроса контента.

В этом определении атрибут float добавляется в стиль dfwp-item, который применяется веб-частью запроса контента к каждому отображаемому элементу.

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

Создание изображения по умолчанию для видеозаписей, для которых не определен эскиз

По умолчанию для функций веб-части запроса контента создается стиль, в котором определяется действительный URL-адрес изображения предварительного просмотра для каждого изображения. Изображения, для которых отсутствует такой URL-адрес, отображаются неправильно. Добавьте в новый стиль логику, определяющую вывод доступного по умолчанию в SharePoint Server 2010 изображения для видеозаписей, если URL-адрес изображения предварительного просмотра отсутствует.

Примечание
Изображение по умолчанию для видеозаписей по умолчанию хранится в папке http://<сервер>/_layouts/images/VideoPreview.png

В таблице стилей заключите существующий тег <img> в выражение <xsl:choose>. При наличии URL-адреса изображения предварительного просмотра выражение <xsl:choose> выполняет установленный по умолчанию в SharePoint Server 2010 действия. В противном случае используется заданное по умолчанию изображение.

<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>

Добавление элемента Description в файл ItemStyle.xsl

Добавьте в стиль элемент description. Для этого добавьте в стиль разметку после тега link-item <div>. Теги link-item <div> и description <div> из стиля Default в файле ItemStyle.xsl определяют практически идентичное поведение. Элемент description <div> отображается на небольшом участке экрана и, поэтому, усекается, если его длина превышает 128 знаков. Это позволяет предотвратить возникновение ошибок, связанных с отображением длинного описания.

<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>

Добавление отображения оценки в файл ItemStyle.xsl

Если на сайт общего доступа к видео добавлена функция оценок, добавление этого элемента позволяет отображать оценки для каждой видеозаписи. Добавление элемента rating в файл ItemStyle.xsl осуществляется так же, как и добавление элемента в стиль description. Чтобы отображать оценку в виде шкалы звезд в диапазоне от 0 до 5, отправьте на сервер файл изображения для каждого значения (всего шесть файлов). Каждое изображение должно содержать разное число звезд. После отправки изображений добавьте логику, определяющую отображение соответствующего изображения на основе значения поля rating. Для этого рекомендуется создать новую папку в разделе Библиотека стилей. В этом примере кода предполагается, что все файлы изображении отправлены в папку /Style Library/Rating CBQ Images и носят имена 0Stars.png, 1Stars.png, 2Stars.png и т. д. Если используются другие имена, обновите разметку соответствующим образом. Параметр <сервер> в URL-адресах замените именем используемого сервера.

<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>