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

Artículo
09/24/2014

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

Hace referencia a: SharePoint Foundation 2010

En este tutorial se muestra cómo personalizar la página principal móvil mediante la implementación de un control RenderingTemplate personalizado. El ejemplo muestra cómo personalizar la sección de encabezado de la página principal. Para obtener una descripción general sobre los pasos para personalizar cualquier sección de una página principal móvil, consulte Procedimiento para personalizar las páginas principales móviles.

Antes de la personalización

Un objeto SPMobileComponent, cuya propiedad TemplateName se establece explícitamente en WebPartMobileSummaryViewTitle, se declara en los dos elementos HeaderTemplate del archivo mblwiki.aspx usado como página principal móvil para un sitio de grupo (STS). A continuación, se muestra uno de estos elementos:

<HeaderTemplate>
  <SPMobile:SPMobileControlContainer RunAt="Server" Weightless="true">
    <SPMobile:SPMobileComponent RunAt="Server" 
       TemplateName="WebPartMobileSummaryViewTitle" />
    <SPMobile:SPMobileComponent RunAt="Server" 
       TemplateName="MobileDefaultSeparator" />
  </SPMobile:SPMobileControlContainer>
</HeaderTemplate>

Este objeto llama a RenderingTemplate en MobileDefaultTemplates.ascx cuyo identificador es "WebPartMobileSummaryViewTitle". A continuación se muestra RenderingTemplate:

<SharePoint:RenderingTemplate RunAt="Server" 
  id="WebPartMobileSummaryViewTitle">
  <Template>
    <SPMobile:SPMobileWebTitle RunAt="Server" Prefix="WebPartMobile" />
  </Template>
</SharePoint:RenderingTemplate>

Como se muestra en este ejemplo, la plantilla de representación llama a un objeto selector de plantilla de la clase SPMobileWebTitle. El objeto selector de plantilla construirá el siguiente identificador de plantilla de representación y llamará a una plantilla de representación con dicho identificador: WebPageMobile_STS_HomePage_Title. Si no hay ninguna plantilla de representación con dicho identificador, usará una denominada WebPageMobile_Default_HomePage_Title.

Microsoft SharePoint Foundation no incluye una RenderingTemplate con el identificador Mobile_STS_HomePage_Title. En este tutorial se creará una que presentará el título de la página principal en un panel de dos tonos. Antes de la personalización, WebPageMobile_Default_HomePage_Title presenta el título de la página principal del STS, tal como se muestra en esta captura de pantalla. El texto de título deriva del título de la página principal del STS no móvil correspondiente. El texto se presenta dentro de un panel de color azul marino en letras blancas.

Representación predeterminada del área de título de una página principal del sitio de grupo

Página principal de Mobile no personalizada

Procedimiento

Para personalizar el área de encabezado de la página principal móvil de STS

En Microsoft Visual Studio, cree un Proyecto de SharePoint vacío. Conviértalo en una solución de granja de servidores, no en una solución de espacio aislado.
Agregue una Carpeta asignada de SharePoint a TEMPLATE\ControlTemplates.

Haga clic con el botón secundario en la nueva carpeta y agregue un control de usuario de SharePoint. Asigne al archivo .ascx un nombre que lo distinga 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.

Sugerencia
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 subcarpetas no se cargan.

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 subcarpetas no se cargan.

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

Reemplace toda la sección de directivas del archivo .ascx con 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" %>

Debajo de las directivas, agregue el siguiente marcado. Se creará una RenderingTemplate con el identificador que el analizador de la página busca al representar el área de encabezado de la página principal del STS.
```
<SharePoint:RenderingTemplate 
  ID="WebPartMobile_STS_HomePage_Title" RunAt="Server">


</SharePoint:RenderingTemplate>
```

Dentro del elemento RenderingTemplate, defina un elemento Template que tenga un control secundario SPMobilePaddedPanel. Establezca los atributos ForeColor, BackColor, Font-Size y Font-Bold de la etiqueta, como se muestra en el siguiente ejemplo.

<Template>
    <SPMobile:SPMobilePaddedPanel RunAt="Server" 
      ForeColor="#FFFFFF" 
      BackColor="#990033" 
      Font-Bold="True" 
      Font-Size="13pt">
      <WPMobile:WebPartMobilePageTitle RunAt="Server" />
    </SPMobile:SPMobilePaddedPanel>
</Template>

En el menú Generar, seleccione Implementar solución. Esta acción guardará automáticamente el archivo .ascx, lo implementará en %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATES\ControlTemplates y reciclará la aplicación web, de modo que todos los archivos .ascx en dicha carpeta se volverán a cargar.
Navegue a la página principal de cualquier sitio STS en la implementación con el emulador o dispositivo. El título aparecerá en un panel interior rojo que se encuentra dentro del panel de color azul marino. (El panel externo se declara directamente en la página mblwiki.aspx, por lo que no se quita con la personalización. Si deseara quitarlo, debería crear una nueva página principal para los sitios STS y usar la redirección de página principal para redirigir los dispositivos móviles a la nueva página. Para obtener más información acerca de la redirección de página principal, vea Redirección de página principal y Procedimiento para personalizar la página principal móvil mediante redireccionamiento).