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

Artículo
02/01/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 RenderingTemplate. En el procedimiento de ejemplo se muestra cómo personalizar el campo de título de una lista de anuncios 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 navegar a la página de resultados de búsqueda de noticias de MSN.
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

Finalización del Tutorial: Personalización de títulos de elemento en un formulario de presentación de dispositivo móvil.

Preparación para el desarrollo de controles de representación de campos personalizados

En Visual Studio, seleccione Herramientas externas en el menú Herramientas.
En el cuadro de diálogo Herramientas externas, haga clic en Agregar y escriba Obtener la clave pública de ensamblado en Título.
Para rellenar el cuadro de texto Comando, busque sn.exe. Suele estar en C:\Program Files\Microsoft Visual Studio 8\SDK\v2.0\Bin\sn.exe.
En el cuadro de texto Argumentos, escriba lo siguiente (distingue mayúsculas de minúsculas) -Tp "$(TargetPath)".
Active la casilla Usar ventana de resultados.
Haga clic en Aceptar. El nuevo comando se agrega al menú Herramientas.

Para configurar el proyecto de campos personalizado:

En Visual Studio, seleccione Nuevo proyecto en el menú Archivo.
En el cuadro de diálogo Nuevo proyecto, seleccione Visual C# en el cuadro Tipos de proyecto, seleccione Biblioteca de clases en el cuadro Plantillas y escriba ItemTitleField en el cuadro Nombre. Haga clic en Aceptar.
Haga clic con el botón secundario en el nodo Referencias en el Explorador de soluciones, haga clic en Agregar referencia y mantenga presionada la tecla CTRL mientras selecciona System.Web, System.Web.Mobile y Microsoft SharePoint Services en la ficha .NET del cuadro de diálogo Agregar referencia. Haga clic en Aceptar.
Haga clic con el botón secundario en el nombre del proyecto en el Explorador de soluciones y seleccione Propiedades.
En la ficha Aplicación del cuadro de diálogo Propiedades, escriba MyCompany**.SharePoint.MobileControls.ItemTitleField** como Nombre del ensamblado y MyCompany**.SharePoint.MobileControls** como Espacio de nombres predeterminado. Reemplace MyCompany por el nombre de su compañía. En este tutorial, reemplace MyCompany por el nombre de su compañía.
Abra la ficha Firma y, a continuación, seleccione Firmar el ensamblado.
Elija <Nueva...> en el cuadro de lista desplegable Seleccione un archivo de clave de nombre seguro.
En el cuadro de diálogo Crear clave de nombre seguro, escriba ItemTitleField.snk en el cuadro Nombre del archivo de clave y, a continuación, asegúrese de que la casilla Proteger mi archivo de clave mediante contraseñano está activada. Haga clic en Aceptar. Abra la ficha Eventos de generación y escriba lo siguiente (a continuación) en el cuadro Línea de comandos del evento posterior a la generación. Este código asegura que, cada vez que se vuelva a generar el proyecto, se copien las versiones más recientes de los archivos del proyecto en la ubicación correcta y se reinicie Windows SharePoint Services 3.0 para cargar la versión más reciente del ensamblado.
```
cd "$(ProjectDir)"
"%programfiles%\microsoft visual studio 8\sdk\v2.0\bin\gacutil" /i "$(TargetPath)" /nologo /f
%systemroot%\system32\iisapp.vbs /a "SharePoint_App_Pool" /r
xcopy *.ascx "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\CONTROLTEMPLATES\" /y
```
Reemplace SharePoint_App_Pool por el nombre real del grupo de aplicaciones de Internet Information Services (IIS) asignado a la aplicación web de Windows SharePoint Services. Suele ser el mismo nombre que el del sitio web de IIS que contiene la aplicación; por ejemplo, "SharePoint - 80". (Las comillas se pueden omitir si no se incluyen espacios en el nombre).
Haga clic en cualquier otro control habilitado en la ficha para que Visual Studio detecte los cambios; aparecerá un asterisco en la etiqueta de la ficha.
Haga clic en el botón Guardar todos los archivos de la barra de herramientas.
En el Explorador de soluciones, cambie el nombre del archivo Class1.cs a ItemTitleField.cs.

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;
```
Cambie el espacio de nombres a MyCompany.SharePoint.MobileControls.
Reemplace toda la declaración Class1 por el siguiente código:
```
public class ItemTitleField : SPMobileBaseTextField
{

}// end ItemTitleField class
```
Observe que la clase nueva hereda de 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.NavigateUrl = "https://search.msn.com/results.aspx?q=" + 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 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;
}

Seleccione Generar en el menú Generar. Aunque aún no ha terminado, debe compilar el ensamblado en este momento para poder generar un token de clave pública.

Para crear la plantilla de representación

En el Explorador de soluciones, haga clic con el botón secundario en el nombre del proyecto, ItemTitleField, y seleccione Agregar y, a continuación, Nuevo elemento.
Seleccione Elementos de proyecto de Visual C# en la ventana Categorías y, a continuación, seleccione Archivo de texto en la ventana Plantillas.
En el cuadro Nombre, escriba AnnouncementsItemTitleField.ascx y haga clic en Agregar. (No incluya el archivo en una subcarpeta de la carpeta del proyecto, ya que en ese caso los comandos posteriores a la generación creados no encontrarán dicho archivo).

En el archivo AnnouncementsItemTitleField.ascx que se crea, agregue el siguiente marcado:

<%@ Control Language="C#" %>
<%@ Assembly Name="Microsoft.SharePoint, Version=12.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=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.MobileControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="CustomMobile" Namespace="MyCompany.SharePoint.MobileControls" Assembly="MyCompany.SharePoint.MobileControls.ItemTitleField, Version=1.0.0.0, Culture=neutral, PublicKeyToken=Token" %> 
<%@ Import Namespace="Microsoft.SharePoint" %>

<SharePoint:RenderingTemplate RunAt="Server" ID="MobileCustomListField_Announcements_Text_Title" >
    <Template>
      <CustomMobile:ItemTitleField RunAt="Server" /> 
    </Template>
</SharePoint:RenderingTemplate>

Reemplace MyCompany por el nombre de su compañía en ambas ubicaciones.
Reemplace Token por el token de clave pública real obtenido al hacer clic en Obtener la clave pública de ensamblado en el menú Herramientas. El token de la clave aparece en la última línea de la ventana Resultados. Use sólo el token de la clave y no la clave completa.

Observe que este archivo es prácticamente idéntico al archivo creado en Tutorial: Personalización de títulos de elemento en un formulario de presentación de dispositivo móvil. Las diferencias son las siguientes:
- La línea
  
  <mobile:Label Text="Title field in Announcements List" RunAt="Server" />
  
  de Tutorial: Personalización de títulos de elemento en un formulario de presentación de dispositivo móvil
  
  se reemplaza en el código de ejemplo de este tema por la línea
  
  <CustomMobile:ItemTitleField RunAt="Server" />
  
  para que la plantilla de representación llame al control de representación de campos creado anteriormente en este tutorial.
- Se ha agregado una directiva de registro nueva para registrar el prefijo de etiqueta "CustomMobile".
Guarde y cierre el archivo.
Seleccione Volver a generar en el menú Generar.

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 de anuncios. Navegue a la lista de anuncios. Haga clic en el vínculo Nuevo elemento. Debería ver algo similar a lo siguiente:

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 se corresponda con una fecha anterior. Haga clic en Guardar. De este modo, volverá a la vista de lista. Haga clic en el vínculo Mostrar debajo del elemento nuevo. Debería ver algo similar a lo que se muestra a continuación. Observe el vínculo Buscar que 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

Haga clic en el vínculo Editar. Debería ver algo parecido a lo que se muestra a continuación. Observe que se ha agregado "VENCIDO" al título actual.

Figura 3. Representación condicional de texto en el campo de título del formulario de edición

Formulario de elemento de edición de dispositivo móvil personalizado

Vea también

Otros recursos

Diseño y paginación de las páginas móviles
Procedimiento para personalizar la representación de campos en páginas móviles
Sistema de representación de páginas móviles

Compartir a través de