Tutorial: creación de un control de representación de campos personalizado para páginas móviles

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 representación de campos en las páginas móviles mediante la implementación de un control de representación de campos personalizado junto con un objeto RenderingTemplate. En el procedimiento de ejemplo se muestra cómo personalizar el campo Title de un elemento de una lista Announcements en las páginas móviles Mostrar elemento, Nuevo elemento y Editar elemento. La personalización es distinta para los tres tipos de páginas:

Formulario de presentación: agrega un vínculo de búsqueda mediante el cual los usuarios pueden usar Bing para buscar en Internet el título del anuncio.
Formulario de edición: agrega texto predeterminado cuando el valor de la columna Expira es anterior a la fecha actual.
Formulario de creación: agrega texto predeterminado para mostrar a los usuarios un formato específico para los valores.

Para ver una introducción a los pasos para personalizar los campos en las páginas móviles, consulte Procedimiento para personalizar la representación de campos en páginas móviles.

Requisitos previos

Realice al menos uno de los siguientes procedimientos:

Cree una herramienta para obtener el nombre completo de un ensamblado y agréguela al menú Herramientas de Microsoft Visual Studio. Para obtener más información, vea Procedimiento para crear una herramienta para obtener el nombre completo de un ensamblado.
Cree una herramienta para obtener la clave pública de un ensamblado y agréguela al menú Herramientas de Visual Studio. Para obtener más información, vea Procedimiento para crear una herramienta para obtener la clave pública de un ensamblado.

Recomendación: complete el tutorial que se describe en Tutorial: Personalización de títulos de elementos en formularios móviles.

Para configurar el proyecto de campos personalizado

En Visual Studio, cree un Proyecto de SharePoint vacío. Conviértalo en una solución de granja de servidores, en lugar de una solución de espacio aislado, y denomínelo MobileItemTitleField.
En el Explorador de soluciones, haga clic con el botón secundario en el nombre del proyecto y seleccione Propiedades.
En la ficha Aplicación del cuadro de diálogo Propiedades, escriba Contoso.SharePoint.MobileControls.ItemTitleField para Nombre del ensamblado y Contoso.SharePoint.MobileControls para Espacio de nombres predeterminado. Deje la Versión de .NET Framework de destino establecida en .NET Framework 3.5.
Si el cuadro Plataformas de solución en el Menú estándar de Visual Studio no indica "Cualquier CPU" o "x64", abra la ficha Compilación y establezca el Destino de la plataforma en "Cualquier CPU" o "x64". Para obtener más información sobre cómo elegir, vea Procedimiento para establecer el marco de destino y CPU correctos.
Haga clic en el botón Guardar todos los archivos de la barra de herramientas.
Haga clic con el botón secundario en el nombre del proyecto en el Explorador de soluciones, elija Agregar y, a continuación, seleccione Nuevo elemento.
En el cuadro de diálogo Agregar nuevo elemento, seleccione Visual C# y, a continuación, seleccione Código en el árbol Plantillas instaladas.
En el cuadro Plantillas, seleccione Clase y, en el cuadro Nombre, escriba ItemTitleField.cs. Haga clic en Agregar.
En el Explorador de soluciones, haga clic con el botón secundario en el nodo Referencias y, a continuación, haga clic en Agregar referencia. Mientras mantiene presionada la tecla CTRL, seleccione System.Web y System.Web.Mobile en la ficha .NET del cuadro de diálogo Agregar referencia. Haga clic en Aceptar.
En el Explorador de soluciones, haga clic con el botón secundario en el nombre del proyecto, elija Agregar y, a continuación, seleccione Carpeta asignada de SharePoint.
Use el control de árbol que se abre para asignar la carpeta a TEMPLATE\ControlTemplates y, a continuación, haga clic en Aceptar.
En el Explorador de soluciones, haga clic con el botón secundario en la nueva carpeta ControlTemplates (no en el nombre del proyecto), elija Agregar y, a continuación, seleccione Nuevo elemento.
En el cuadro de diálogo Agregar nuevo elemento, en el árbol Plantillas instaladas, seleccione SharePoint y, a continuación, seleccione 2010.

En el cuadro Plantillas, seleccione un Control de usuario de SharePoint y asigne al archivo .ascx el nombre AnnouncementsItemTitleField.ascx. Haga clic en Agregar. 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. También agrega el ensamblado al manifiesto y lo establece para que se implemente en la memoria caché global de ensamblados.

Sugerencia
Para agregar el Control de usuario, no haga clic con el botón secundario en el nombre del 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óviles en las subcarpetas no se cargan.

Para agregar el Control de usuario, no haga clic con el botón secundario en el nombre del 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óviles en las subcarpetas no se cargan.

Elimine los archivos AnnouncementsItemTitleField.ascx.cs y AnnouncementsItemTitleField.ascx.designer.cs que se crearon automáticamente bajo el archivo AnnouncementsItemTitleField.ascx. No son necesarios para este proyecto. El contenido predeterminado de AnnouncementsItemTitleField.ascx hace referencia al archivo AnnouncementsItemTitleField.ascx.cs que acaba de eliminar y el compilador le advertirá acerca del archivo que falta. Pase por alto la advertencia: el contenido predeterminado se cambiará en un paso posterior de este tema.

Para crear el control de representación

Abra el archivo ItemTitleField.cs del proyecto si no está abierto y agregue las siguientes instrucciones using.
```
using System.Web.UI.MobileControls;
using Microsoft.SharePoint;
using Microsoft.SharePoint.MobileControls;
```
Agregue el modificador de acceso public a la declaración ItemTitleField si aún no está allí y modifique la declaración para especificar que hereda de SPMobileBaseTextField.
```
public class ItemTitleField : SPMobileBaseTextField
{

}
```

Agregue la siguiente invalidación del método CreateControlForDisplay().

protected override MobileControl CreateControlForDisplay()
{
   string title = Convert.ToString(this.ItemFieldValue);
   if (!String.IsNullOrEmpty(title))
   {
      this.LabelControl.BreakAfter = false;
      this.LabelControl.Text = title + " ";

      this.LinkControl.BreakAfter = false;
      this.LinkControl.Text = "Search";
      this.LinkControl.href = "https://www.bing.com/?scope=web&mkt=es-ES" + title.Replace(' ', '+');

      Panel panel = new Panel();
      panel.BreakAfter = false;
      panel.Controls.Add(this.LabelControl);
      panel.Controls.Add(this.LinkControl);

      return panel;
   }
   return null;
}

Observe que este método empieza por obtener el valor actual del campo de título del elemento de lista actual. Este valor actual se almacena en la propiedad ItemFieldValue.

Agregue la siguiente invalidación del método CreateControlForNew.

protected override MobileControl CreateControlForNew()
{
   MobileControl myNewControl = null;
   if (this.Field != null)
   {
      string text = "Group: Project Name";
      if (!this.Page.IsPostBack)
      {
         this.TextBoxControl.Text = text;
      }
      myNewControl = this.TextBoxControl;
   }
   return myNewControl;
}

Agregue la siguiente invalidación del método CreateControlForEdit.

protected override MobileControl CreateControlForEdit()
{
   MobileControl myEditControl = null;
   if (this.Item != null && this.Field != null)
   {
      if (this.NeedEllipsisRendering)
      {
         myEditControl = this.CreateControlForDisplay();
      }
      else
      {
         if (!this.Page.IsPostBack)
         {
            string strEdit = this.Field.GetFieldValueForEdit(this.ItemFieldValue);
            string overDue = "OVERDUE: ";

            SPListItem item = this.ListItem;
            if (item["Expires"] != null)
            {
               System.DateTime date = (DateTime)item["Expires"];
               if (date.CompareTo(System.DateTime.Today) < 0)
               {
                  this.TextBoxControl.Text = overDue + strEdit;
               }
               else
               {
                  this.TextBoxControl.Text = strEdit;
               }
            }
         }
         myEditControl = this.TextBoxControl;
      }
   }
   return myEditControl;
}

Para crear la plantilla de representación

Abra el archivo AnnouncementsItemTitleField.ascx y reemplace toda la sección de directivas 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" %>

Agregue un registro de prefijo de etiqueta adicional con el código indicado a continuación.
```
<%@ Register TagPrefix="Contoso" Namespace="Contoso.SharePoint.MobileControls" Assembly="$SharePoint.Project.AssemblyFullName$" %> 
```
El token $SharePoint.Project.AssemblyFullName$ de Visual Studio se sustituye por el nombre de ensamblado de cuatro partes cuando se genera el proyecto.
Agregue una directiva de Import al espacio de nombres Microsoft.SharePoint.
```
<%@ Import Namespace="Microsoft.SharePoint" %>
```
Debajo de las directivas, agregue una RenderingTemplate y asígnele el identificador que está buscando el tiempo de ejecución: MobileCustomListField_Announcements_Text_Title.
```
<SharePoint:RenderingTemplate RunAt="Server" ID="MobileCustomListField_Announcements_Text_Title" >

</SharePoint:RenderingTemplate>
```
Dentro del elemento de RenderingTemplate, defina un elemento Template con el objeto ItemTitleField personalizado como control secundario.
```
<Template>
  <Contoso:ItemTitleField RunAt="Server" />
</Template>
```
Observe que este archivo es similar al archivo creado en Tutorial: Personalización de títulos de elementos en formularios móviles. Las diferencias son las siguientes:
- Se ha agregado una directiva de Register nueva para registrar el prefijo de etiqueta "Contoso".
- Se ha agregado una línea que importa el espacio de nombres Microsoft.SharePoint.
- La siguiente línea se encuentra en Tutorial: Personalización de títulos de elementos en formularios móviles:
  
  <mobile:Label Text="Title field in Announcements List" RunAt="Server" />
  
  Esta línea se reemplaza en el código de ejemplo de este tema por la siguiente línea:
  
  <Contoso:ItemTitleField RunAt="Server" />
  
  Esto permite que la plantilla de representación llame al control de representación de campos creado anteriormente en este tutorial.
Seleccione Implementar solución en el menú Generar. Esto volverá a generar el ensamblado automáticamente, guardará el archivo .ascx, implementará el ensamblado en la memoria caché global de ensamblados, implementará el archivo .ascx en %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATES\ControlTemplates y reciclará la aplicación web.

Prueba del control de representación

Con el dispositivo móvil o el emulador, navegue a un sitio web de la aplicación web que incluya una lista Anuncios. Navegue a la lista Anuncios. Haga clic en el vínculo Nuevo elemento. Debería ver algo similar a la figura 1.

Figura 1. Texto predeterminado especificado para el campo de título del formulario de creación

Formulario de nuevo elemento de dispositivo móvil personalizado

Cree un elemento nuevo y asígnele un valor en Expira que corresponda a una fecha en el pasado. Haga clic en Guardar. De este modo, volverá a la vista de lista. Haga clic para mostrar el elemento nuevo. Debería ver algo similar a la figura 2. Observe que el vínculo Buscar se ha agregado al final del título.

Figura 2. Vínculo de búsqueda agregado al formulario de presentación

Formulario personalizado de presentación de elementos de dispositivos móviles