Tutorial: Creación de un elemento web de Silverlight que muestre OData para SharePoint

SharePoint 2010 expone sus datos de lista mediante OData. En SharePoint, el servicio OData se implementa mediante el servicio RESTful ListData.svc. En este tutorial se muestra cómo crear un elemento web de SharePoint que hospede una aplicación de Silverlight. La aplicación de Silverlight muestra información de lista de anuncios de SharePoint mediante ListData.svc. Para más información, consulte Interfaz de REST de SharePoint Foundation y Open Data Protocol.

Nota:

Es posible que tu equipo muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario de Visual Studio en las siguientes instrucciones. La edición de Visual Studio que se tenga y la configuración que se utilice determinan estos elementos. Para obtener más información, vea Personalizar el IDE.

Requisitos previos

Necesitará los componentes siguientes para completar este tutorial:

• Ediciones compatibles de Microsoft Windows y SharePoint.

• Visual Studio 2012.

Creación de una aplicación de Silverlight y un elemento web de Silverlight

En primer lugar, cree una aplicación de Silverlight en Visual Studio. La aplicación de Silverlight recupera datos de la lista Anuncios de SharePoint mediante el servicio ListData.svc.

Nota

Ninguna versión de Silverlight anterior a la 4.0 admite las interfaces necesarias para hacer referencia a datos de lista de SharePoint.

Para crear una aplicación de Silverlight y un elemento web de Silverlight

1. En la barra de menús, elija Archivo>Nuevo>Proyecto para mostrar el cuadro de diálogo Nuevo proyecto.

2. Expanda el nodo SharePoint en Visual C# o Visual Basic y, a continuación, seleccione el nodo 2010.

3. En el panel de plantillas, seleccione la plantilla Elemento web de Silverlight de SharePoint 2010.

4. En el cuadro Nombre, escriba SLWebPartTest y seleccione el botón Aceptar.

   Aparece el cuadro de diálogo Asistente para la personalización de SharePoint.

5. En la página Especifique el sitio y el nivel de seguridad de la depuración, escriba la dirección URL del sitio del servidor de SharePoint donde desea depurar la definición de sitio o utilice la ubicación predeterminada (http://nombre del sistema/).

6. En la sección ¿Cuál es el nivel de confianza de esta solución de SharePoint?, active el botón de opción Implementar como solución de granja.

   Aunque en este ejemplo se usa una solución de granja, los proyectos de elementos web de Silverlight se pueden implementar como soluciones de granja de servidores o de espacio aislado. Para más información sobre las soluciones en espacio aislado y las soluciones de granja, consulte Consideraciones sobre las soluciones de espacio aislado.

7. En la sección ¿Cómo desea asociar el elemento web de Silverlight? de la página Especificar información de configuración de Silverlight, elija el botón de opción Crear un nuevo proyecto de Silverlight y asociarlo al elemento web.

8. Cambie Nombre a SLApplication, establezca Lenguaje en Visual Basic o Visual C# y, después, establezca Versión de Silverlight en Silverlight 4.0.

9. Elija el botón Finalizar. Los proyectos aparecen en el Explorador de soluciones.

   La solución contiene dos proyectos: una aplicación de Silverlight y un elemento web de Silverlight. La aplicación Silverlight recupera y muestra los datos de lista de SharePoint y el elemento web de Silverlight hospeda la aplicación Silverlight, lo que le permite verlo en SharePoint.

Personalización de la aplicación de Silverlight

Agregue código y elementos de diseño a la aplicación de Silverlight.

Para personalizar la aplicación de Silverlight

1. Agregue una referencia de ensamblado a System.Windows.Data en la aplicación de Silverlight. Para obtener más información, consulte Procedimientos: Agregar o quitar referencias utilizando el cuadro de diálogo Agregar referencia.

2. En el Explorador de soluciones, abra el menú contextual Referencias y, después, elija Agregar referencia de servicio.

   Nota

   Si usa Visual Basic, debe elegir el icono Mostrar todos los archivos en la parte superior del Explorador de soluciones para mostrar el nodo Referencias.

3. En el cuadro Dirección del cuadro de diálogo Agregar referencia de servicio , escriba la dirección URL del sitio de SharePoint, como http://MySPSitey, después, elija el botón Ir .

   Cuando Silverlight localiza el servicio OData de SharePoint ListData.svc, reemplaza la dirección por la dirección URL completa del servicio. En este ejemplo http://myserver se convierte en http://myserver/_vti_bin/ListData.svc..

4. Elija el botón Aceptar para agregar la referencia de servicio al proyecto y use el nombre de servicio predeterminado ServiceReference1.

5. En la barra de menús, elija Compilar>Compilar solución.

6. Agregue un nuevo origen de datos al proyecto basado en el servicio de SharePoint. Para ello, en la barra de menús, elija Ver>Otras ventanas>Orígenes de datos.

   La ventana Orígenes de datos muestra todos los datos de lista de SharePoint disponibles, como Tareas, Anuncios y Calendario.

7. Agregue los datos de la lista Anuncios a la aplicación Silverlight. Puede arrastrar "Anuncios" desde la ventana Orígenes de datos al diseñador de Silverlight.

   Esto crea un control de cuadrícula enlazado a la lista Anuncios del sitio de SharePoint.

8. Cambie el tamaño del control de cuadrícula para que se ajuste a la página de Silverlight.

9. En el archivo de código MainPage.xaml (MainPage.xaml.cs para Visual C# o MainPage.xaml.vb para Visual Basic), agregue las siguientes referencias de espacio de nombres.

   C#

   // Add the following three using directives.
   using SLApplication.ServiceReference1;
   using System.Windows.Data;
   using System.Data.Services.Client;
   

   VB

   ' Add the following three Imports statements.
   Imports SLApplication.ServiceReference1
   Imports System.Windows.Data
   Imports System.Data.Services.Client
   

10. Agregue las declaraciones de variables siguientes al principio de la clase.

    C#

    private TeamSiteDataContext context;
    private CollectionViewSource myCollectionViewSource;
    DataServiceCollection<AnnouncementsItem> announcements = new DataServiceCollection<AnnouncementsItem>();
    

    VB

    Private context As TeamSiteDataContext
    Private myCollectionViewSource As CollectionViewSource
    Private announcements As New DataServiceCollection(Of AnnouncementsItem)()
    

11. Reemplace el procedimiento UserControl_Loaded por lo siguiente.

    C#

    private void UserControl_Loaded_1(object sender, RoutedEventArgs e)
    {
        // The URL for the OData service.
        // Replace <server name> in the next line with the name of your
        // SharePoint server.
        context = new TeamSiteDataContext(new Uri("http://ServerName>/_vti_bin/ListData.svc"));
    
        // Do not load your data at design time.
        if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
        {
            //Load your data here and assign the results to the CollectionViewSource.
            myCollectionViewSource = (System.Windows.Data.CollectionViewSource)this.Resources["announcementsViewSource"];
            announcements.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(announcements_LoadCompleted);
            announcements.LoadAsync(context.Announcements);
        }
    }
    

    VB

    Private Sub UserControl_Loaded_1(sender As Object, e As RoutedEventArgs)
        ' The URL for the OData service.
        ' Replace <server name> in the next line with the name of your SharePoint server.
        context = New TeamSiteDataContext(New Uri("http://<server name>/_vti_bin/ListData.svc"))
    
        ' Do not load your data at design time.
        If Not System.ComponentModel.DesignerProperties.GetIsInDesignMode(Me) Then
            'Load your data here and assign the results to the CollectionViewSource.
            myCollectionViewSource =   DirectCast(Me.Resources("announcementsViewSource"), System.Windows.Data.CollectionViewSource)
            announcements.LoadCompleted += New EventHandler(Of LoadCompletedEventArgs)(AddressOf announcements_LoadCompleted)
            announcements.LoadAsync(context.Announcements)
        End If
    End Sub
    

    Asegúrese de reemplazar el marcador de posición ServerName por el nombre del servidor que ejecuta SharePoint.

12. Agregue el siguiente procedimiento de control de errores.

    C#

    void announcements_LoadCompleted(object sender, LoadCompletedEventArgs e)
    {
        // Handle any errors.
        if (e.Error == null)
        {
            myCollectionViewSource.Source = announcements;
        }
        else
        {
            MessageBox.Show(string.Format("ERROR: {0}", e.Error.Message));
        }
    }
    

    VB

    Private Sub announcements_LoadCompleted(sender As Object, e As LoadCompletedEventArgs)
        ' Handle any errors.
        If e.[Error] Is Nothing Then
            myCollectionViewSource.Source = announcements
        Else
            MessageBox.Show(String.Format("ERROR: {0}", e.[Error].Message))
        End If
    End Sub
    
    

Modificación del elemento web de Silverlight

Cambie una propiedad en el proyecto de elemento web de Silverlight para habilitar la depuración de Silverlight.

Para modificar el elemento web de Silverlight

1. Abra el menú contextual del proyecto de elemento web de Silverlight (SLWebPartTest) y, después, elija Propiedades.

2. En la ventana Propiedades, seleccione la pestaña SharePoint.

3. Si aún no está seleccionada, active la casilla Habilitar depuración de Silverlight (en lugar de depuración de script).

4. Guarde el proyecto.

Prueba del elemento web de Silverlight

Pruebe el nuevo elemento web de Silverlight en SharePoint para asegurarse de que muestra correctamente los datos de la lista de SharePoint.

Para probar el elemento web de Silverlight

1. Seleccione la tecla F5 para compilar y ejecutar la solución de SharePoint.

2. En SharePoint, en el menú Acciones del sitio, elija Nueva página.

3. En el cuadro de diálogo Nueva página, escriba un título, como Prueba del elemento web de SL y, después, elija el botón Crear.

4. En el diseñador de páginas, en la pestaña Herramientas de edición , elija Insertar.

5. En la franja de pestañas, elija Elemento web.

6. En el cuadro Categorías, elija la carpeta Personalizada.

7. En la lista Elementos web, elija el elemento web de Silverlight y, después, elija el botón Agregar para agregar el elemento web al diseñador.

8. Después de haber realizado todas las incorporaciones a la página web que desee, elija la pestaña Página y, después, elija el botón Guardar y cerrar de la barra de herramientas.

   El elemento web de Silverlight debería mostrar ahora datos de anuncio desde el sitio de SharePoint. De forma predeterminada, la página se almacena en la lista Páginas del sitio en SharePoint.

   Nota

   Al acceder a los datos de Silverlight entre dominios, Silverlight protege contra vulnerabilidades de seguridad que se pueden usar para aprovechar la vulnerabilidad de seguridad de las aplicaciones web. Si tiene problemas al acceder a datos remotos en Silverlight, consulte Hacer que un servicio esté disponible a través de los límites del dominio.

Contenido relacionado

• Creación de elementos web para SharePoint
• Implementación, publicación y actualización de paquetes de soluciones de SharePoint