Tutorial: creación de una página principal personalizada y de XSL de elemento web de consulta de contenido

Artículo
09/18/2014

Última modificación: lunes, 19 de abril de 2010

Hace referencia a: SharePoint Server 2010

En este artículo
Hacer que los vídeos sean flotantes
Creación de una imagen predeterminada para los vídeos que no tienen una imagen en miniatura
Adición de un elemento de descripción a ItemStyle.xsl
Adición de una visualización de calificación a ItemStyle.xsl

Este tema es la cuarta parte de una serie de cinco tutoriales que describen cómo crear y personalizar un sitio para compartir vídeos.

Después de completar las tareas descritas en Tutorial: Creación de un sitio de vídeo y Tutorial: personalización de la experiencia de carga de vídeos, estará listo para crear una página principal personalizada y un XSL de elemento web de consulta de contenido (CQWP) personalizado, que están pensados para compartir, ver y administrar vídeos.

La creación de la página principal y el XSL de CQWP engloba cuatro tareas:

Usar una definición de invalidación de CSS para que los elementos que el objeto ContentByQueryWebPart muestra sean flotantes.
Crear un nuevo estilo de elemento para el objeto ContentByQueryWebPart.
Crear una imagen predeterminada de los vídeos que no tienen una imagen en miniatura.
Agregar una visualización de calificación al estilo de elemento.

Cuando se diseña un sitio, es muy importante agregar uno o más elementos web de consulta de contenido (CQWP) a la página principal para aumentar al máximo las opciones disponibles para ordenar y mostrar vídeos. El CQWP muestra una lista dinámica de vídeos y permite, por ejemplo, dar énfasis a los vídeos cargados más recientemente o a los vídeos mejor calificados. Este tutorial muestra cómo crear un estilo personalizado para el CQWP que está optimizado para mostrar vídeos en un formato que resalta elementos visuales, como mostrar imágenes en miniatura grandes, organizar varios vídeos por línea en un diseño flotante y mostrar las calificaciones.

Además de personalizar la apariencia del sitio, puede dirigir a los usuarios a un formulario de presentación personalizada (creado según Tutorial: Creación de un sitio de vídeo) cuando hacen clic en un resultado de vídeo. Use este formulario en lugar de representar un objeto MediaWebPart para reproducir el archivo de vídeo directamente, que es la acción predeterminada que se desencadena cuando se hace clic en un resultado de vídeo.

Requisitos previos

Realice las tareas descritas en Tutorial: Creación de un sitio de vídeo y Tutorial: personalización de la experiencia de carga de vídeos.

Para crear un nuevo estilo para el CQWP

Inicie Microsoft SharePoint Designer 2010. En el menú Archivo, haga clic en Abrir.
Navegue a la carpeta /Style Library/XSL Style Sheets y, a continuación, abra el archivo ItemStyle.xsl.
Desproteja el archivo para editarlo y, así, poder deshacer los cambios si fuera necesario.
Copie el elemento XSL:Template y todo su contenido de ImageTopCentered como una plantilla nueva en el archivo. Esto es necesario porque ItemStyle se parece al estilo ImageTopCentered existente.
Cambie los valores de los atributos name y match, de modo que coincidan con el valor del nuevo nombre de estilo. Por ejemplo, para cambiar el atributo name a ContosoWithRatings, deberá actualizar la etiqueta XSL:Template tal y como se muestra.
```
<xsl:template name="ContosoWithRatings" match="Row[@Style='ContosoWithRatings']" mode="itemstyle">
```
Guarde el archivo actualizado ItemStyle.xsl.
Compruebe que el estilo está disponible en el panel Propiedades de elementos web de cualquier CQWP.

Agregue el siguiente atributo de estilo a la primera etiqueta <div> del estilo.

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

Al agregar el atributo float y sus parámetros al estilo de elemento centrado, todos los datos de cada elemento se aparecen centrados. Modifique los valores de píxel exactos en el código para obtener el número de píxeles que desee.

Hacer que los vídeos sean flotantes

Puede crear una definición de invalidación de CSS personalizada para que los elementos que el objeto ContentByQueryWebPart devuelve sean flotantes. Después de escribir el código, aplíquelo a todos los diseños de página donde se use el CQWP, en lugar de aplicarlo al propio XSL, ya que alterar el contenido del XSL afecta a todos los estilos de CQWP, no solo a los diseños de página en cuestión donde se usa el CQWP diseñado para vídeo.

Esta definición agrega un atributo float al estilo dfwp-item que el CQWP aplica a cada elemento que se muestra.

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

Creación de una imagen predeterminada para los vídeos que no tienen una imagen en miniatura

De forma predeterminada, el estilo que se creó para el CQWP funciona de forma que se define una dirección URL de imagen de vista previa válida por cada imagen. Las imágenes que no tienen una dirección URL de imagen de vista previa válida no se representan correctamente. Agregue lógica al nuevo estilo para que, cuando la dirección URL de imagen de vista previa no exista, la página muestre la imagen de vídeo predeterminada que está disponible en SharePoint Server 2010 de forma predeterminada.

Nota

La ubicación predeterminada de la imagen de vídeo predeterminada es: http://<server>/_layouts/images/VideoPreview.png

En la hoja de estilo, ajuste la etiqueta <img> existente con una instrucción <xsl:choose>. Cuando hay una dirección URL de imagen de vista previa, la instrucción <xsl:choose> sigue el comportamiento predeterminado de SharePoint Server 2010; en caso contrario, usa la imagen predeterminada.

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

Adición de un elemento de descripción a ItemStyle.xsl

Incorpore un elemento description al estilo agregándole un marcado al estilo debajo de la etiqueta link-item <div>. Las etiquetas link-item <div> y description <div> del estilo predeterminado del archivo ItemStyle.xsl tienen prácticamente el mismo comportamiento. description <div> se muestra en un espacio reducido en la pantalla, de modo que corta la cadena si supera los 128 caracteres. Así, se evita que se representen descripciones largas alineadas.

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

Adición de una visualización de calificación a ItemStyle.xsl

Si agrega la personalización de calificaciones al sitio de vídeo, la visualización de calificaciones permite que se muestren las calificaciones de cada vídeo. La adición del elemento rating al archivo ItemStyle.xsl es similar a la adición del estilo description. Para mostrar la calificación con un rango de estrellas de 0 a 5, cargue un archivo de imagen por cada valor (para un total de seis archivos) en el servidor. Cada archivo debe mostrar un número de estrellas distinto. Después de cargar las imágenes, agregue lógica para mostrar la imagen pertinente en función del valor del campo rating. Se recomienda crear una carpeta nueva en la Biblioteca de estilos del sitio para este fin. En el ejemplo de código se supone que se han cargado todas las imágenes en una carpeta llamada /Style Library/Rating CBQ Images y que los archivos se denominan 0Stars.png, 1Stars.png, 2Stars.png y, así, sucesivamente. Si usa otros nombres, actualice el marcado en consecuencia. En las direcciones URL, reemplace <server> por el nombre del servidor.

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