Compartir a través de

Tutorial: Personalización de una página de vista de lista móvil

  • Artículo

Última modificación: miércoles, 02 de febrero de 2011

Hace referencia a: SharePoint Foundation 2010

En este tutorial se describe cómo personalizar una página de vista de lista móvil mediante la implementación de un control RenderingTemplate personalizado. En este ejemplo se muestra cómo personalizar la sección de cuerpo (contenido) de la página. Para obtener información general sobre cómo personalizar cualquier sección de un formulario o página de vista de lista móvil, vea Procedimiento para personalizar las páginas de vista de lista móvil y formulario.

Tal y como se describe en Sistema de representación de páginas móviles, el área de cuerpo de una página de vista de lista se representa mediante una cadena de llamadas que, en última instancia, termina llamando a un objeto RenderingTemplate denominado Mobile_ListTypeID_View_Contents, donde ListTypeID es el número de identificador de una definición de lista o un valor de SPListTemplateType. Si no existe ningún objeto RenderingTemplate con ese identificador, se usará el objeto RenderingTemplate con el identificador Mobile_Default_View_Contents.

En Microsoft SharePoint Foundation, no hay ningún objeto de clase RenderingTemplate con el identificador Mobile_Announcements_View_Contents (o Mobile_104_View_Contents, que hace referencia al mismo tipo de lista). En este tutorial se crea un objeto que agrega un saludo encima de la lista Announcements.

Procedimiento

Para personalizar la sección de contenidos de la página de vista móvil Anuncios.

  1. En Microsoft Visual Studio, cree un Proyecto de SharePoint vacío. Conviértalo en una solución de conjunto o granja de servidores, en lugar de una solución de espacio aislado.

  2. Agregue una Carpeta asignada de SharePoint a TEMPLATE\ControlTemplates.

  3. Haga clic con el botón secundario en la nueva carpeta y agregue un control de usuario de SharePoint. Asigne un nombre al archivo .ascx para distinguirlo de los de otros proveedores de soluciones; por ejemplo, ContosoMobileRenderingTemplates.ascx. Visual Studio agrega automáticamente el archivo al manifiesto de la solución de SharePoint y lo establece para que se implemente en %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates.

    SugerenciaSugerencia

    Para agregar el control de usuario, no haga clic con el botón secundario en el proyecto en el Explorador de soluciones. Cuando se agrega un control de usuario de ese modo, Visual Studio lo coloca en una subcarpeta de TEMPLATE\ControlTemplates. Si no se mueve, Visual Studio lo implementa en una subcarpeta correspondiente de %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates. Las plantillas de representación móvil en las subcarpetas no se cargan.

  4. Elimine los archivos .ascx.cs y .ascx.designer.cs (o .ascx.vb y .ascx.designer.vb). No son necesarios para este proyecto.

  5. Reemplace toda la sección de directivas del archivo .ascx por el siguiente marcado.

    <%@ Register TagPrefix="GroupBoardMobile"   Namespace="Microsoft.SharePoint.Applications.GroupBoard.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#"   %> 
<%@ Assembly Name="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %> 
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="WPMobile" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

  6. Tras las directivas, agregue un objeto RenderingTemplate y asígnele el identificador que el objeto SPMobileListContents de la página de vista busca: Mobile_104_View_Contents.

    <SharePoint:RenderingTemplate ID="Mobile_104_View_Contents" RunAt="Server" >

</SharePoint:RenderingTemplate>

  7. Dentro del elemento RenderingTemplate, defina un elemento Template que tenga un control secundario Label. Establezca el atributo de la etiqueta Text como se muestra en el siguiente código.

    <Template>
    <SPMobile:SPMobileControlContainer RunAt="Server">
      <SPMobile:SPMobileComponent RunAt="Server" 
         TemplateName="MobileViewPicker" />
      <SPMobile:SPMobileComponent RunAt="Server" 
         TemplateName="MobileDefaultSeparator" />
    </SPMobile:SPMobileControlContainer>
    <mobile:Label RunAt="Server" 
      Text="Hello SharePoint Mobile User!"/>
    <SPMobile:SPMobileListItemIterator RunAt="Server" 
       ListItemSeparatorTemplateName="MobileListItemSeparator" />
</Template>

  8. En el menú Generar, seleccione Implementar solución. Esta acción guarda automáticamente el archivo .ascx, lo implementa en %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATES\ControlTemplates y recicla la aplicación web, de modo que todos los archivos .ascx en dicha carpeta se vuelven a cargar.

  9. Navegue a la lista Announcements con el emulador o el dispositivo. Debe ver el saludo encima de la lista tal y como se muestra en la siguiente captura de pantalla.

Sección de cuerpo personalizado en la vista de lista de dispositivos móviles

Vea también

Tareas

Procedimiento para personalizar las páginas de vista de lista móvil y formulario

Conceptos

Diseño y paginación de las páginas móviles

Sistema de representación de páginas móviles

Otros recursos

Procedimientos y tutoriales para el desarrollo de elementos móviles