Tutorial: mostrar datos en una aplicación de negocios de Silverlight

  • Artículo

En este tutorial, creará una aplicación de negocios de Silverlight que muestra los datos de la base de datos de ejemplo AdventureWorks en dos páginas diferentes de Silverlight. La primera página muestra los datos de la tabla SalesOrderHeader y proporciona compatibilidad con la página a través de los registros de base de datos. La segunda página permite al usuario ejecutar una consulta basada en una fecha.

En este tutorial se muestran las tareas siguientes:

  • Crear una aplicación de negocios de Silverlight formada por dos proyectos: un cliente de Silverlight y una aplicación web ASP.NET.

  • Cambiar el nombre de la aplicación modificando una cadena de recurso.

  • Crear un Entity Data Model basándose en un archivo de base de datos.

  • Crear un servicio de dominio que exponga los datos del Entity Data Model al cliente de Silverlight. Para obtener más información, vea Servicios de dominio.

  • Modificar y agregar consultas personalizadas al servicio de dominio.

  • Crear páginas de Silverlight adicionales para presentar los datos a los usuarios.

  • Agregar botones a la barra de navegación predeterminada para obtener acceso a las páginas de Silverlight.

  • Configurar las páginas de Silverlight para mostrar datos arrastrando elementos desde la ventana Orígenes de datos hasta Silverlight Designer.

  • Ordenar y paginar los datos.

  • Configurar una interfaz de usuario para tomar parámetros de la consulta.

Requisitos previos

Este tutorial y los demás tutoriales presentados en la documentación de WCF RIA Services requieren la instalación y configuración correctas de varios programas de requisitos previos, como Visual Studio 2010 y Silverlight Developer Runtime y SDK, además de WCF RIA Services y el Kit de herramientas de WCF RIA Services. También requieren la instalación y configuración de SQL Server 2008 R2 Express con Advanced Services, así como la instalación de las bases de datos OLTP y LT de AdventureWorks.

Los temas del nodo Requisitos previos para WCF RIA Services proporcionan instrucciones detalladas para el cumplimiento de cada uno de estos requisitos previos. Siga las instrucciones proporcionadas en ellos antes de realizar este tutorial para asegurarse de encontrar el menor número de problemas posibles al trabajar en estos tutoriales de RIA Services .

En este tutorial se supone que puede crear una aplicación de negocios de Silverlight. El procedimiento para completar esta tarea se describe en Tutorial: utilizar la plantilla de aplicación de negocios de Silverlight.

Crear la aplicación de negocios de Silverlight

Las aplicaciones de negocios de Silverlight son soluciones con dos proyectos: una aplicación de Silverlight y una aplicación web ASP.NET que hospeda la aplicación de Silverlight. Las aplicaciones de negocios de Silverlight tienen funcionalidad integrada. De forma predeterminada, tienen una página Inicio, una página Acerca de, una barra de navegación y funcionalidad de registro en el sitio. También se proporciona un nombre predeterminado de aplicación como cadena de recurso que puede modificar para cambiar el nombre de sus aplicaciones.

Para crear la aplicación

  1. En Visual Studio 2010, cree un nuevo proyecto de aplicación de negocios de Silverlight en Visual Basic o C# denominado AdventureWorksApp. El procedimiento para completar esta tarea se describe en Tutorial: utilizar la plantilla de aplicación de negocios de Silverlight.

    La solución AdventureWorksApp se crea con dos proyectos: un proyecto AdventureWorksApp de Silverlight y un proyecto AdventureWorksApp.Web de aplicación web.

  2. En el Explorador de soluciones, expanda el proyecto AdventureWorksApp.

  3. Expanda la carpeta Assets y, a continuación, expanda Resources.

  4. Haga doble clic en ApplicationStrings.resx para abrir el Diseñador de recursos.

  5. Cambie el Valor de la cadena de recurso ApplicationName a Adventure Works Application.

  6. Guarde los cambios y cierre el archivo ApplicationStrings.resx.

  7. Ejecute la aplicación.

    La página Inicio se abre y muestra el diseño predeterminado, que incluye el nombre de aplicación actualizado.

Crear un modelo de datos para la aplicación

Para administrar los datos en la aplicación, debe utilizar un Entity Data Model.

Para crear un Entity Data Model

  1. En el Explorador de soluciones, haga clic con el botón secundario en AdventureWorksApp.Web, haga clic en Agregar y, a continuación, en Nuevo elemento.

    Aparece el cuadro de diálogo Agregar nuevo elemento.

  2. En la categoría Datos, haga clic en la plantilla Entity Data Model de ADO.NET.

    RIADisplayingData01EDMX

  3. Cambie el nombre a AdventureWorksEDM.edmx y, a continuación, haga clic en Agregar.

    Se abre el Asistente para Entity Data Model.

  4. En la página Elegir contenido de Model, haga clic en Generar desde la base de datos y, a continuación, en Siguiente.

  5. En la página Elegir la conexión de datos, haga clic en Nueva conexión.

    Aparece el cuadro de diálogo Propiedades de la conexión.

  6. Seleccione Archivo de base de datos de Microsoft SQL Server para el origen de datos y especifique la ubicación del archivo de base de datos AdventureWorksLT.

  7. Haga clic en Aceptar.

  8. En la página Elegir la conexión de datos, haga clic en Siguiente.

  9. Si aparece un mensaje preguntando si desea copiar el archivo de base de datos en su proyecto y modificar la conexión, haga clic en Sí.

  10. En la página Elija los objetos de base de datos expanda el nodo Tablas.

  11. Agregue una marca de verificación al lado de la tabla SalesOrderHeader (Sales LT).

  12. Haga clic en Finalizar.

    Aparece la tabla SalesOrderHeader en Entity Designer.

  13. Genere la solución.

    Debe generar la solución antes de agregar un servicio de dominio.

Crear un servicio de dominio

Un servicio de dominio expone al cliente las entidades y operaciones de datos en el modelo de datos. En este procedimiento, agregará un servicio de dominio al proyecto de servidor.

Para crear un servicio de dominio

  1. En el Explorador de soluciones, haga clic con el botón secundario en AdventureWorksApp.Web, haga clic en Agregar y, a continuación, en Nuevo elemento.

    Aparece el cuadro de diálogo Agregar nuevo elemento.

  2. En la categoría Web, haga clic en la plantilla Clase de servicio de dominio.

  3. Asigne el nombre AdventureWorksService a la clase de servicio de dominio y, a continuación, haga clic en Agregar.

    Se abre el cuadro de diálogo Agregar nueva clase de servicio de dominio.

  4. Active las casillas SalesOrderHeader y Habilitar edición y, a continuación, haga clic en Aceptar.

    RIADisplayingData02AddNewDomainServiceClass

  5. Genere la solución.

Cambiar una consulta de servicio de dominio

Cuando se agrega una clase de servicio de dominio, viene rellenada con métodos de consulta. Puede utilizar estos métodos de consulta sin realizar ninguna modificación. Sin embargo, en muchos casos, es necesario realizar alguna modificación. En este procedimiento, editará el método de consulta GetSalesOrderHeaders.

Para cambiar una consulta de servicio de dominio

  1. En el Explorador de soluciones, haga doble clic en AdventureWorksService.vb o en AdventureWorksService.cs para abrir este archivo.

  2. Actualice el método GetSalesOrderHeaders tal como se muestra en el código siguiente.

    Public Function GetSalesOrderHeaders() As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.OrderBy(Function(e) e.SalesOrderID)
End Function

    public IQueryable<SalesOrderHeader> GetSalesOrderHeaders()
{
    return this.ObjectContext.SalesOrderHeaders.OrderBy(e=>e.SalesOrderID);
}

  3. Genere la solución.

Crear una página de Silverlight para mostrar datos

En este procedimiento, agregará una página OrderList para mostrar los datos de la tabla SalesOrderHeader.

Para crear una página de Silverlight

  1. En el Explorador de soluciones, en el proyecto AdventureWorksApp, haga clic con el botón secundario en la carpeta Views y agregue un nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, seleccione la categoría Silverlight y, a continuación, haga clic en la plantilla Página de Silverlight.

  3. Cambie el nombre a OrderList.xaml y, a continuación, haga clic en Agregar.

    Se abre OrderList.xaml en el diseñador.

  4. En el cuadro de herramientas, arrastre un elemento TextBlock hasta la parte superior del diseñador.

  5. En la ventana Propiedades, cambie la propiedad Text a Lista de pedidos.

  6. Guarde la página OrderList.xaml.

Agregar un botón de navegación a la página Inicio

En este procedimiento, agregará un botón a la página principal de la aplicación para navegar a la página OrderList.

Para crear un botón de navegación

  1. En el Explorador de soluciones, haga doble clic en MainPage.xaml para abrirlo en el diseñador.

  2. En la vista XAML, agregue el siguiente marcado después de la línea <HyperlinkButton x:Name="Link2" ... />.

    <Rectangle x:Name="Divider3" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link3" Content="Order List" Style="{StaticResource LinkStyle}" NavigateUri="/OrderList" TargetName="ContentFrame"/>

  3. Ejecute la aplicación.

    Debe aparecer el botón Lista de pedidos en la barra de navegación.

  4. Haga clic en el botón Lista de pedidos.

    Aparece la página OrderList.

Mostrar datos de pedidos en la página OrderList

En este procedimiento, creará y configurará un elemento DataGrid para mostrar los datos de pedidos arrastrando una entidad de pedido desde la ventana Orígenes de datos hasta el diseñador.

Para crear un elemento DataGrid enlazado a datos

  1. En el Explorador de soluciones haga doble clic en OrderList.xaml.

  2. Haga clic en el menú Datos y, a continuación, en Mostrar orígenes de datos.

    Se abre la ventana Orígenes de datos. Observe que la ventana Orígenes de datos ya contiene las entidades disponibles para la aplicación.

  3. En la ventana Orígenes de datos, arrastre el nodo SalesOrderHeader hasta el diseñador (debajo del bloque de texto Lista de pedidos).

    Aparece en la superficie de diseño un elemento DataGrid rellenado con encabezados de columna de la tabla SalesOrderHeader.

    RIADisplayingData03OrderListPageWithDataGrid

  4. Ejecute la aplicación.

  5. En la barra de navegación, haga clic en el botón Lista de pedidos.

    Se muestran los datos de pedidos en la página Lista de pedidos.

    RIADisplayingData04OrderListPageWithDataGridComple

Agregar consultas personalizadas al servicio de dominio

Puede crear consultas adicionales en el servicio de dominio. Con este procedimiento se agregan dos consultas personalizadas.

Para agregar consultas personalizadas al servicio de dominio

  1. En el Explorador de soluciones, haga doble clic en AdventureWorksService.vb o en AdventureWorksService.cs.

  2. Agregue los métodos siguientes a la clase AdventureWorksService.

    Public Function GetOrdersWithSmallSubtotals() As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.Where(Function(p) p.SubTotal <= 2000).OrderBy(Function(p) p.SubTotal)
End Function

Public Function GetShipDateBefore(ByVal shipDate As DateTime) As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.Where(Function(p) p.ShipDate < shipDate).OrderBy(Function(p) p.SalesOrderID)
End Function

    public IQueryable<SalesOrderHeader> GetOrdersWithSmallSubtotals()
{
    return this.ObjectContext.SalesOrderHeaders.Where(e => e.SubTotal <= 2000).OrderBy(e => e.SubTotal);
}

public IQueryable<SalesOrderHeader> GetShipDateBefore(DateTime shipDate)
{
    return this.ObjectContext.SalesOrderHeaders.Where(e => e.ShipDate < shipDate).OrderBy(e => e.SalesOrderID);
}

  3. Si está utilizando Visual Basic, en la parte superior del archivo AdventureWorksService.vb, establezca la instrucción Option Strict en Off.

  4. Genere la solución.

Mostrar datos de la consulta personalizada

En este procedimiento, mostrará los datos de la nueva consulta seleccionando la consulta en la ventana Orígenes de datos y arrastrándola hasta el elemento DataGrid que ya está en el diseñador. Mediante esta acción se vuelve a configurar el elemento DataGrid para mostrar datos de la consulta seleccionada.

Para mostrar datos de la consulta personalizada en el elemento DataGrid existente

  1. En el Explorador de soluciones haga doble clic en OrderList.xaml.

  2. En la ventana Orígenes de datos, haga clic en SalesOrderHeader y, a continuación, en el menú desplegable.

    RIADisplayingData05QueriesInDataSources

    Observe las tres consultas enumeradas en la parte inferior del menú. La consulta activada es la consulta que se establecerá en el elemento QueryName del origen de datos generado después de arrastrar esta entidad hasta el diseñador.

  3. Seleccione GetOrdersWithSmallSubtotalsQuery en la lista de consultas para establecerla como la consulta de esta entidad.

  4. Arrastre el nodo SalesOrderHeader hasta el elemento DataGrid existente en el diseñador.

  5. Ejecute la aplicación.

  6. Haga clic en el botón Lista de pedidos.

    Observe que ningún subtotal de pedido enumerado en el elemento DataGrid supera el valor 2000.

    RIADisplayingData06SmallSubtotalsQueryResult

Agregar ordenación

Además de ordenar los datos utilizando la cláusula OrderBy en las consultas subyacentes, también puede configurar la ordenación en el código XAML de su página. La ordenación se configura agregando SortDescriptors a DomainDataSource. Puede agregar directamente SortDescriptors en el código XAML o utilizando la ventana Propiedades, como se muestra en el procedimiento siguiente.

Para agregar SortDescriptors utilizando la ventana Propiedades

  1. En el Explorador de soluciones haga doble clic en OrderList.xaml.

  2. En la vista XAML, coloque el cursor en el elemento riaControls:DomainDataSource cuyo atributo Name está establecido en salesOrderHeaderDomainDataSource1.

    Precaución:
    Hay dos elementos riaControls:DomainDataSource en el archivo. Asegúrese de colocar el mouse en el elemento cuyo atributo Name está establecido en salesOrderHeaderDomainDataSource1.

  3. En la ventana Propiedades, haga clic en la propiedad SortDescriptors y, a continuación, en el botón de puntos suspensivos (...).

    Aparece el editor de la colección SortDescriptors.

  4. Haga clic en Agregar.

    Se agrega un elemento SortDescriptors.

  5. En Propiedades, expanda la categoría Otros.

  6. En la columna de valor PropertyPath, escriba CustomerID.

  7. Haga clic en Aceptar.

    Observe que se ha agregado el siguiente código XAML al elemento riaControls:DomainDataSource:

    <riaControls:DomainDataSource.SortDescriptors>
    <riaControls:SortDescriptor PropertyPath="CustomerID" />
</riaControls:DomainDataSource.SortDescriptors>

  8. Ejecute la aplicación.

  9. Haga clic en el botón Lista de pedidos.

    Observe que los datos están ordenados por el identificador de cliente de la lista.

    Precaución:
    Cuando implemente la paginación y la ordenación conjuntamente, incluya al menos un elemento SortDescriptor con su atributo PropertyPath asignado a una propiedad que contiene valores únicos, como una clave principal. O bien, agregue una cláusula OrderBy basada en una propiedad que contiene valores únicos a la consulta en el elemento DomainDataSource. Si ordena solo los datos en una propiedad que no contiene valores únicos, los valores devueltos podrían contener datos incoherentes o podrían faltar datos en todas las páginas.

Agregar paginación

En este procedimiento, agregará paginación agregando un elemento DataPager al origen de datos. Establecerá el elemento DataPager.Source en el elemento DomainDataSource que administra los datos que el control de paginación debe controlar.

Para configurar la paginación de los datos

  1. En el Explorador de soluciones, haga doble clic en OrderList.xaml.

  2. En el cuadro de herramientas, busque el control DataPager.

  3. Arrastre el control DataPager hasta un área del diseñador debajo del elemento DataGrid.

  4. En la ventana Orígenes de datos, haga clic en el nodo SalesOrderHeader, haga clic en el menú desplegable y compruebe que está seleccionado el elemento GetOrdersWithSmallSubtotalsQuery.

  5. Arrastre el nodo SalesOrderHeader hasta el control DataPager.

    De este modo se establece la propiedad Source del control DataPager en el origen de datos correcto.

  6. Seleccione DataPager en el diseñador.

  7. En la ventana Propiedades, establezca la propiedad PageSize en 5.

  8. Ejecute la aplicación.

  9. Haga clic en el botón Lista de pedidos.

  10. Haga clic en los botones de navegación de DataPager para navegar por cinco registros a la vez en el elemento DataGrid.

Crear una página para buscar pedidos por fecha

Anteriormente en este tutorial, agregó una consulta personalizada al servicio de dominio que devuelve pedidos con una fecha de envío anterior a una fecha proporcionada por usuario. Este procedimiento muestra cómo la ventana Orígenes de datos se puede utilizar para crear una interfaz de usuario que toma parámetros proporcionados por el usuario que se pasan después a una consulta de servicio de dominio.

Para crear la interfaz de usuario

  1. En el proyecto AdventureWorksApp, en la carpeta Views, agregue una nueva página de Silverlight denominada OrderSearchByShipDateBefore.xaml.

  2. En el Explorador de soluciones, haga doble clic en MainPage.xaml.

  3. En la vista XAML, agregue el código siguiente después de la línea <HyperlinkButton x:Name="Link3" ... />.

    <Rectangle x:Name="Divider4" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link4" Content="Ship Date" Style="{StaticResource LinkStyle}" NavigateUri="/OrderSearchByShipDateBefore" TargetName="ContentFrame"/>

  4. En el Explorador de soluciones, haga doble clic en OrderSearchByShipDateBefore.xaml.

  5. En la ventana Orígenes de datos, haga clic en el nodo SalesOrderHeader y, a continuación, en el menú desplegable.

  6. Seleccione GetShipDateBeforeQuery para establecerla como la consulta de esta entidad.

  7. Arrastre el nodo SalesOrderHeader hasta el diseñador.

    Además del elemento DataGrid, se crea un cuadro de texto para aceptar el parámetro en la consulta y se agrega un botón para ejecutar la consulta y cargar los datos.

Probar la aplicación

En este procedimiento, compilará y ejecutará la aplicación para comprobar que esta se comporta conforme a lo esperado.

Para probar la aplicación

  1. En el menú Generar, haga clic en Generar solución.

    Compruebe que la solución se genera sin errores.

  2. Ejecute la aplicación.

  3. Haga clic en el botón Fecha de envío para abrir la página con la consulta de fecha de envío.

  4. En el cuadro Fecha de envío, escriba una fecha, como 1/1/2006.

  5. Haga clic en Cargar.

    Observe que solamente de devuelven las fechas de envío anteriores a la fecha especificada.

  6. Intente otras fechas de envío.

Pasos siguientes

Después de completar este tutorial, puede realizar las siguientes tareas relacionadas:

Vea también

Conceptos

Clientes de Silverlight