Tutorial: Crear un adaptador móvil

SharePoint 2010

Última modificación: viernes, 01 de abril de 2011

Hace referencia a: SharePoint Foundation 2010

En este tutorial se muestra cómo crear un adaptador móvil para UserTasksWebPart que se suministra con Microsoft SharePoint Foundation. Para obtener información más detallada sobre el proceso de creación de un adaptador móvil para elementos web, vea Procedimiento para crear un adaptador móvil.

Revise el tema Herramientas de desarrollo de SharePoint Foundation y sus temas secundarios, y realice las tareas que se recomiendan para configurar el entorno de desarrollo. En particular, en esta guía se asume que ha realizado las tareas que se recomiendan en Configuración de emuladores de dispositivos móviles, Procedimiento para crear una herramienta para obtener la clave pública de un ensamblado y Procedimiento para agregar ubicaciones de herramienta a la variable de entorno PATH.

Los siguientes procedimientos describen el proceso de creación de un adaptador móvil.

Configuración del proyecto del adaptador móvil

  1. En Visual Studio, seleccione Nuevo y, a continuación, Proyecto en el menú Archivo.

  2. 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 MobileAdapters en el cuadro Nombre. Haga clic en Aceptar.

  3. Haga clic con el botón secundario en el nodo Referencias en Explorador de soluciones, haga clic en Agregar referencia y, mientras mantiene presionada la tecla CTRL, seleccione System.Web, System.Web.Mobile y Microsoft.SharePoint en la pestaña .NET del cuadro de diálogo Agregar referencia. Haga clic en Aceptar.

  4. Haga clic con el botón secundario en el nombre del proyecto en el Explorador de soluciones y seleccione Propiedades.

  5. En la pestaña Aplicación del cuadro de diálogo Propiedades, escriba MyCompany.SharePoint.WebPartPages.MobileAdapters como el Nombre del ensamblado y MyCompany.SharePoint.WebPartPages como el Espacio de nombres predeterminado. Sustituya MyCompany con el nombre de su compañía. Sustituya MyCompany con el nombre de su compañía a lo largo de todo el tutorial.

  6. Haga clic en Información de ensamblado y realice los cambios que sean necesarios en el cuadro de diálogo Información de ensamblado. En este tutorial se supone que mantiene el ensamblado y las versiones de archivo en 1.0.0.0, y que no cambia el GUID.

  7. Abra la ficha Firma y, a continuación, seleccione Firmar el ensamblado.

  8. Elija <Nueva...> en el cuadro de lista desplegable Seleccione un archivo de clave de nombre seguro.

  9. En el cuadro de diálogo Crear clave de nombre seguro, escriba MobileAdapters.snk en el cuadro Nombre del archivo de clave y, a continuación, asegúrese de que la casilla de verificación Proteger...no esté activada. Haga clic en Aceptar.

  10. Abra la pestaña Eventos de compilación y escriba el siguiente código en el cuadro Línea de comandos del evento posterior a la compilación. Este código ejecuta un archivo de compilación que creará en un paso posterior.

    
    cd "$(ProjectDir)"
    MobileAdapterPostBuild
    
    
  11. Haga clic en el botón Guardar todos los archivos de la barra de herramientas.

  12. En el Explorador de soluciones, cambie el nombre del archivo Class1.cs por UserTasksWebPartMobileAdapter.cs.

Creación del control de adaptador

  1. Abra el archivo UserTasksWebPartMobileAdapter.cs del proyecto, si es que aún no está abierto, y agregue las siguientes instrucciones using.

    using System.Web.UI.MobileControls;
    using Microsoft.SharePoint;
    using Microsoft.SharePoint.WebPartPages;
    using Microsoft.SharePoint.Utilities;
    
    
  2. Cambie el espacio de nombres por MyCompany.SharePoint.WebPartPages.MobileAdapters.

  3. Reemplace toda la declaración Class1 por el siguiente código.

    public class UserTasksWebPartMobileAdapter : WebPartMobileAdapter
    {
    
    }// end UserTasksWebPartMobileAdapter class
    

    Tenga en cuenta que la nueva clase hereda de WebPartMobileAdapter.

  4. Agregue la siguiente declaración de una invalidación del método CreateControlsForDetailView().

    protected override void CreateControlsForDetailView()
    {
    
    } // end CreateControlsForDetailView
    
  5. Comience la implementación de CreateControlsForDetailView() con las siguientes líneas. Este código crea una cabeza de flecha que apunta hacia abajo a la izquierda del título del elemento web. Al pasar LinkToSummaryView al método auxiliar CreateWebPartIcon(WebPartMobileAdapter.WebPartIconLink), esta cabeza de flecha se convierte en un modificador en los dispositivos cuyos exploradores admiten CSS y ECMAScript 1.0 o superiores. Cuando un usuario hace clic en ella, el elemento web se contrae a su vista de resumen. (Si el explorador no admite CSS y ECMAScript 1.0 o superiores, se muestra un icono distinto y, al hacer clic en él, se abre una página con una vista de resumen del elemento web).

    
    Image iconImage = this.CreateWebPartIcon(WebPartIconLink.LinkToSummaryView);
    iconImage.BreakAfter = false;
    this.Controls.Add(iconImage);
    
    
  6. Agregue las siguientes líneas para representar el título predeterminado del elemento web de tareas de usuario, que es "Tareas de usuario" en negrita.

    
    Label titleLabel = this.CreateWebPartLabel();
    this.Controls.Add(titleLabel);
    
    
  7. Agregue las siguientes líneas para obtener las referencias a los objetos a los que va a hacer referencia el código en la lógica de presentación. Reemplace CustomSite con el nombre del sitio web al que va a obtener acceso desde el dispositivo móvil. Puede ser cualquier sitio que contenga una lista Tareas de SharePoint Foundation estándar.

    SPSite siteCollection = SPContext.Current.Site;
    SPUser currentUser = SPContext.Current.Web.CurrentUser;
    SPList taskList = siteCollection.AllWebs["CustomSite"].Lists["Tasks"];
    SPListItemCollection allTasks = taskList.GetItems(taskList.DefaultView);
    
  8. Agregue la siguiente consulta LINQ. La cláusula where asegura que solo las tareas de usuario actuales se incluirán en la vista móvil. La cláusula select proyecta un nuevo tipo anónimo que contiene solo dos propiedades. No es necesario incluir campos que el adaptador no va a representar.

    Nota Nota

    Este código usa LINQ to Objects y filtra datos (el objeto allTasks) que ya están en la memoria. Para evitar que los elementos de lista y los campos que no son necesarios pasen a través del cable desde la base de datos de contenido, tendría que usar el proveedor LINQ to SharePoint. Sin embargo, si se proporcionaran detalles sobre el uso de este proveedor, se alargaría el tutorial y se desviaría del tema central.

    
    // Use LINQ to filter out other users ... 
    var lightweightTasksOfUser = from SPListItem task in allTasks
                                 where task["AssignedTo"].ToString().EndsWith(currentUser.Name)
                                 select new {task.Title, Priority=task["Priority"]}; // ... and unneeded columns.
    
    
  9. Agregue un bucle foreach que, cuando se complete, presente todos los elementos de la lista de tareas de usuario actual hasta un máximo de tres.

    foreach (var lightweightTask in lightweightTasksOfUser)
    {
    
    } // end "for each lightweight task of the current user"
    
    
  10. Dentro del bucle, agregue el siguiente código para que se presente la viñeta de elemento de lista móvil estándar de SharePoint Foundation. El código usa sintaxis de inicializador de objeto, que necesita C# 3.0, para inicializar las propiedades. De todas maneras, también podría usar instrucciones de asignación separadas.

    
    Image taskIcon = new Image() { ImageUrl = this.ItemBulletIconUrl,
                                   BreakAfter = false};
    this.Controls.Add(taskIcon);
    
  11. Agregue el siguiente código para representar el nombre de la tarea. Tenga en cuenta que la propiedad Font() es de solo lectura y tiene subpropiedades modificables, incluidas Bold y Size. Estas subpropiedades no se pueden establecer con sintaxis de inicializador de objeto.

    
    Label taskTitle = new Label { Text = lightweightTask.Title,
                                  BreakAfter = false};
    taskTitle.Font.Bold = BooleanOption.True;
    this.Controls.Add(taskTitle);
    
  12. Agregue el siguiente código para que después del título de la tarea se vea la prioridad de tarea en fuentes pequeñas. Tenga en cuenta que la propiedad Priority a la que se hace referencia aquí se creó ad hoc en el tipo anónimo que declaró la consulta LINQ. En C#, debe hacer referencia a este valor mediante "task["Priority"]", donde task es una referencia a un objeto SPListItem de la lista Tasks.

    Label priority = new Label() { Text = " " + lightweightTask.Priority };
    priority.Font.Size = FontSize.Small; 
    this.Controls.Add(priority);
    
    
  13. Agregue el siguiente código para colocar una línea en blanco después de cada tarea.

    this.Controls.Add(new LiteralText());
    
  14. Por último, agregue la siguiente estructura if para limitar el número de tareas que se muestran a tres y para representar un vínculo a la lista de tareas de usuario completa en caso de que haya más de tres tareas. Tenga en cuenta, nuevamente, el uso de la sintaxis de inicializador de objeto.

    // Render no more than 3 tasks, but provide link to others.
    if (itemCount++ >= 3)
    {
        Link moreItemLink = new Link
        {
            Text = "All my tasks",
            NavigateUrl = SPMobileUtility.GetViewUrl(taskList, taskList.Views["My Tasks"])
        };
        this.Controls.Add(moreItemLink);
        break;
    } // end "if limit has been reached"
    
    ' Render no more than 3 tasks, but provide link to others.
            If itemCount >= 3 Then
                itemCount += 1
                Dim moreItemLink As Link = New Link With {.Text = "All my tasks", .NavigateUrl = SPMobileUtility.GetViewUrl(taskList, taskList.Views("My Tasks"))}
                Me.Controls.Add(moreItemLink)
                Exit For
            End If ' end "if limit has been reached"
            itemCount += 1
    

    Agregue la siguiente instrucción justo sobre el comienzo del bucle foreach para inicializar la variable itemCount.

    Int16 itemCount = 1;
    

    Toda la declaración debería tener el aspecto de la que se muestra en este ejemplo de código.

    protected override void CreateControlsForDetailView()
    {
        Image iconImage = this.CreateWebPartIcon(WebPartIconLink.LinkToSummaryView);
        iconImage.BreakAfter = false;
        this.Controls.Add(iconImage);
    
        Label titleLabel = this.CreateWebPartLabel();
        this.Controls.Add(titleLabel);
    
        SPSite siteCollection = SPContext.Current.Site;
        SPUser currentUser = SPContext.Current.Web.CurrentUser;
        SPList taskList = siteCollection.AllWebs["MyGPSite"].Lists["Tasks"];
        SPListItemCollection allTasks = taskList.GetItems(taskList.DefaultView);
    
        // Use LINQ to filter out other users ... 
        var lightweightTasksOfUser = from SPListItem task in allTasks
                                     where task["AssignedTo"].ToString().EndsWith(currentUser.Name)
                                     select new {task.Title, Priority=task["Priority"]}; // ... and unneeded columns.
         
        Int16 itemCount = 1;
        foreach (var lightweightTask in lightweightTasksOfUser)
        {
            Image taskIcon = new Image() { ImageUrl = this.ItemBulletIconUrl,
                                           BreakAfter = false};
            this.Controls.Add(taskIcon);
    
            Label taskTitle = new Label { Text = lightweightTask.Title,
                                          BreakAfter = false};
            taskTitle.Font.Bold = BooleanOption.True;
            this.Controls.Add(taskTitle);
    
            Label priority = new Label() { Text = " " + lightweightTask.Priority };
            priority.Font.Size = FontSize.Small; 
            this.Controls.Add(priority);
    
            this.Controls.Add(new LiteralText());
    
            // Render no more than 3 tasks, but provide link to others.
            if (itemCount++ >= 3)
            {
                Link moreItemLink = new Link
                {
                    Text = "All my tasks",
                    NavigateUrl = SPMobileUtility.GetViewUrl(taskList, taskList.Views["My Tasks"])
                };
                this.Controls.Add(moreItemLink);
                break;
            } // end "if limit has been reached"
    
        } // end "for each lightweight task of the current user"
    } // end CreateControlsForDetailView
    
  15. Seleccione Generar solución en el menú Generar. Aún no ha finalizado, pero necesita compilar el ensamblado en este punto para poder generar un token de clave pública.

Registro del adaptador móvil en el archivo compat.browser

  1. Abra el archivo \\Inetpub\wwwroot\wss\VirtualDirectories\80\App_Browsers\compat.browser en un editor de texto o Visual Studio y desplácese hasta el elemento <browser> cuyo valor de atributo refID es "default". (Si es necesario, reemplace "80" en la dirección URL por el puerto de la aplicación web de destino).

  2. Dentro del elemento <controlAdapters>, agregue lo siguiente como elemento secundario.

    <adapter controlType="Microsoft.SharePoint.WebPartPages.UserTasksWebPart, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"
        adapterType="MyCompany.SharePoint.WebPartPages.MobileAdapters.UserTasksWebPartMobileAdapter, MyCompany.SharePoint.WebPartPages.MobileAdapters, Version=1.0.0.0, Culture=neutral, PublicKeyToken=yourAssemblyPublicToken" />
    
    

    Reemplace MyCompany en ambos lugares con el nombre de su compañía. Reemplace yourAssemblyPublicKeyToken con el token de clave pública del ensamblado, que puede obtenerlo al hacer clic en el elemento Obtener la clave pública de ensamblado en el menú Herramientas de Visual Studio. La clave aparecerá en la ventana Resultados. (Si el elemento no se encuentra allí, vea Procedimiento para crear una herramienta para obtener la clave pública de un ensamblado.)

    NotaNota

    Si el entorno de desarrollo es un conjunto o granja de varios servidores, deberá editar el archivo compat.browser en todos los servidores. Para obtener información acerca de cómo hacerlo mediante programación, vea Procedimiento para ejecutar código en todos los servidores web.

Registro del adaptador como control seguro en el equipo de desarrollo

  1. Haga clic con el botón secundario en el nombre del proyecto en el Explorador de soluciones y seleccione Agregar y, a continuación, Nuevo elemento.

    Nota Nota

    Si realiza la implementación en una granja de servidores con varios servidores front-end web, no siga este procedimiento. En su lugar, implemente el adaptador con una solución de SharePoint Foundation y agregue un elemento <SafeControl> en el archivo manifest.xml de la solución. Para obtener más información sobre las soluciones de SharePoint Foundation, vea Uso de soluciones y sus temas secundarios.

  2. En el cuadro de diálogo Agregar nuevo elemento, agregue un archivo XML llamado webconfig.MyCompany.xml, donde MyCompany es el nombre de su compañía, y haga clic en Agregar.

  3. Agregue el siguiente fragmento al archivo.

    
    <action>
      <remove path="configuration/SharePoint/SafeControls/SafeControl[@Assembly=MyCompany.SharePoint.WebPartPages.MobileAdapters3, Version=1.0.0.0, Culture=neutral, PublicKeyToken=yourAssemblyPublicKeyToken']" />
    
      <add path="configuration/SharePoint/SafeControls">
        <SafeControl
          Assembly="MyCompany.SharePoint.WebPartPages.MobileAdapters3, Version=1.0.0.0, Culture=neutral, PublicKeyToken=yourAssemblyPublicKeyToken"
          Namespace="MyCompany.SharePoint.WebPartPages.MobileAdapters3"
          TypeName="*"
          Safe="True"
          AllowRemoteDesigner="True"
        />
      </add>
    </action>
    

    Reemplace MyCompany en los tres lugares con el nombre de su compañía. Reemplace yourAssemblyPublicKeyToken en ambos lugares con el mismo token de clave pública que usó en el marcado del archivo compat.browser.

  4. Guarde el archivo. Un archivo por lotes que va a crear en el siguiente procedimiento va a ejecutar dos acciones cada vez que recompile. La acción <add> va a registrar el adaptador como control seguro al agregar el elemento <SafeControl> específico a todos los archivos web.config en la raíz de todas las aplicaciones web en el equipo de desarrollo. La acción <remove> no hará nada la primera vez que se ejecute el archivo por lotes. En todas las ejecuciones posteriores, eliminará el elemento <SafeControl> que se agregó en la ejecución anterior. Esto es necesario porque los elementos <SafeControl> duplicados pueden pausar elementos web en SharePoint Foundation.

Creación de un archivo por lotes posterior a la compilación

  1. Haga clic con el botón secundario en el nombre del proyecto en el Explorador de soluciones y seleccione Agregar. A continuación, seleccione Nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, seleccione Archivo de texto, asigne al archivo el nombre MobileAdapterPostBuild.bat y haga clic en Agregar.

  3. Abra el archivo y agregue las siguientes líneas.

    Nota Nota

    En este código se supone que ha seguido las recomendaciones de Procedimiento para agregar ubicaciones de herramienta a la variable de entorno PATH.

    gacutil if bin\debug\MyCompany.SharePoint.WebPartPages.MobileAdapters.dll
    xcopy /y webconfig.MyCompany.xml "C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\CONFIG"
    stsadm –o copyappbincontent
    iisreset
    
    
  4. En el menú Archivo, haga clic en Guardar MobileAdapterPostBuild.bat como...

  5. En el cuadro de diálogo Guardar archivo como, haga clic en la flecha abajo al lado del botón Guardar y seleccione Guardar con codificación.

  6. En el cuadro de diálogo Opciones avanzadas para guardar, seleccione Europeo occidental (Windows) - Página de códigos 1252 en el menú desplegable Codificación y haga clic en Aceptar.

    Este archivo asegura que cada vez que recompila el proyecto, se copian las últimas versiones de los archivos del proyecto en la ubicación correcta, y que la clase de adaptador se registra como control seguro. También reinicia SharePoint Foundation para que cargue la versión más reciente del ensamblado.

Recompilación de la solución

  • Seleccione Recompilar solución en el menú Generar de Visual Studio.

Los siguientes procedimientos describen cómo probar el adaptador.

Creación de una página de elementos web personalizada con un elemento web de tareas de usuario

  1. En un explorador de equipo, navegue hasta el sitio web al que desea obtener acceso desde dispositivos móviles. Este es el mismo sitio cuyo nombre usó para invalidar CustomSite en el código para la invalidación de CreateControlsForDetailView().

  2. En la interfaz de usuario de SharePoint Foundation, cree una página de elementos web y agregue el elemento web de tareas de usuario. Los pasos son los siguientes:

    1. En el menú Acciones del sitio, seleccione Más opciones de creación.

    2. En la página Crear, haga clic en Página de elementos web.

    3. En la página Nueva página de elementos web, nombre la página como "MyWPpage" y seleccione la plantilla de diseño que desee.

    4. Elija la biblioteca de documentos del sitio web que desee, como Documentos compartidos y, a continuación, haga clic en Crear. Se abrirá la nueva página en modo de edición.

    5. Seleccione una zona de elementos web de la página, por ejemplo Columna derecha, y haga clic en Insertar arriba de la cinta de opciones de edición.

    6. En la página que se abre, haga clic en Personas en el área Categorías.

    7. Seleccione Tareas de usuario en el área Elementos web y haga clic en Agregar.

    8. Haga clic en Detener edición para ver la apariencia de la página con el elemento web de tareas de usuario. Continúe inmediatamente con el siguiente procedimiento.

Rellenado de la lista de tareas del sitio web

  1. Desde cualquier página de sitio estándar del sitio web, haga clic en Tareas en la barra de navegación izquierda.

  2. En la página Tareas, abra la pestaña Elementos.

  3. Haga clic en Nuevo elemento en la cinta de opciones para abrir el formulario Nuevo elemento. Complételo para crear una nueva tarea y haga clic en Guardar. Repita este paso para crear varias tareas para varios usuarios. Se deben asignar cuatro o más tareas al menos a un usuario.

  4. Abra la pestaña Explorar para ver la apariencia de la lista rellenada.

Instalación, configuración y uso de un emulador de dispositivo móvil

  1. Si aún no lo ha hecho, instale y configure un emulador de dispositivo móvil, como se explica en Configuración de emuladores de dispositivos móviles, en cualquier equipo con conexión de red al servidor o granja de servidores de desarrollo. Puede ser el equipo de desarrollo.

  2. Inicie sesión en el equipo como uno de los usuarios a los que les asignó tareas e inicie un explorador en el emulador, como se explica en el procedimiento Inicio de un emulador en Configuración de emuladores de dispositivos móviles.

  3. Navegue hasta la página de elementos web personalizada. Los pasos varían según en tipo de sitio web. Generalmente, la página principal incluye un vínculo a Ver todo el contenido del sitio. Esa página, a su vez, tiene un vínculo a las bibliotecas de documentos del sitio, como Documentos compartidos. La lista Todos los documentos para la biblioteca de documentos incluye un vínculo a la página de elementos web personalizada.

    La versión móvil de la página se abre con todos los elementos web adaptados para móvil contraídos (no cerrados). No se muestran aquellos elementos web para los que no existe un adaptador móvil, o que se cerraron en la versión normal (no móvil) de la página de elementos web. En SharePoint Foundation, si cierra un elemento web, se oculta. (Si ningún elemento web de la página cumple las condiciones necesarias para verse en móvil, la página no se abre. En su lugar, se abre la versión móvil de la página Todo el contenido del sitio). En la figura 1 se muestra una página de elementos web en la que el elemento web de tareas de usuario es el único elemento web que no está cerrado y que tiene un adaptador móvil. Esta imagen se tomó con un emulador de Windows Mobile 5.0 Pocket PC.

    Figura 1. El elemento web de tareas de usuario contraído en un dispositivo móvil.

    Adaptador móvil de tareas de usuario en estado contraído
  4. Haga clic en el icono de cabeza de flecha al lado de Tareas de usuario para expandir el elemento web. En la figura 2 se muestra el elemento web después de que se adaptó, como se explica en este tema, expandido para un usuario que tiene menos de cuatro tareas asignadas. Tenga en cuenta que no hay un vínculo para Todas mis tareas en la parte inferior de la lista y que solo se muestran las tareas actuales del usuario.

    Figura 2. El elemento web de tareas de usuario expandido en un dispositivo móvil.

    Adaptador móvil de tareas de usuario en estado expandido

    En la figura 3 se muestra el elemento web expandido para un usuario que tiene más de tres tareas asignadas. Tenga en cuenta que solo se enumeran tres y luego hay un vínculo para Todas mis tareas. El mismo abre la vista Mis tareas de la lista Tareas. Nuevamente, se muestran solo las tareas actuales del usuario.

    Figura 3. El elemento web de tareas de usuario expandido para un usuario con más de tres tareas asignadas.

    Adaptador web de tareas de usuario con más de tres tareas
Mostrar: