WCF Ria Services V1.0 para Silverlight 4.- Mostar datos (Parte 3)

Una vez que nuestra aplicación web está configurada y exponiendo los datos desde la base de datos, ahora si veremos como consumir el servicio que nos ofrece y como mostrar datos en nuestra aplicación Silverlight. Indice:
Introducción (Parte 1)
Obtener datos desde la BD (Parte 2)

Aplicación Silverlight

Como ya lo hemos comentado, la aplicación silverlight que el template ‘Silverlight Business Application’ no entrega ya cuenta con el ‘Framework de Navegación’. En esta ocasión estaremos trabajando únicamente en nuestra página ‘Home.xaml’.

VS2010 y la Ventana de Fuente de Datos (Data Sources window)

Una de las ventajas que trae consigo el Visual Studio 2010, es que ahora podemos ligar los servicios de datos expuestos por WCF RIA Services en nuestra applicación Silverlight de manera visual; así pues, desde la ventana de ‘Data Sources’ podemos arrastrar un ‘DataGrid’ (que a continuación analizaremos).

WCFRiaServices301

La ventana de Data Sources, es lo suficientemente inteligente como para leer los servicios WCF que nuestra aplicación Web expone, y nos entrega los diferentes objetos expuestos.

Ejecutando la aplicación

y listo, ahora sí ya tenemos nuestra primera aplicación RIA Services lista para ser ejecutada. Sin embargo considero importante entendamos que es lo que está pasando tras bambalinas…

Origen de Datos de Dominio (Domain Data Source)

La primera parte del código entregado consiste del control llamado DomainDataSource el cual viene incluido en los assemblies que RIA Services nos entrega.

Este control será el encargado de contener los datos que la aplicación Web expone a través de la Clase de Servicio de Dominio.

  • Es generado con un nombre (Name=”productDomainDataSource”),
  • utiliza la función de GetProducts (QueryName="GetProductsQuery"),
  • que serán cargado automáticamente (AutoLoad="True")
  • y al ser cargados los datos, ejecutará el método productDomainDataSource_LoadedData (LoadedData="productDomainDataSource_LoadedData")

También es configurado para que el Origen de Datos sea el Contexto de Dominio desde la aplicación Web.

DLL: System.Windows.Controls.DomainServices
Namespace: xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
Namespace: xmlns:my="clr-namespace:WCFRiaServices01.Web.Services"
Namespace: xmlns:my1="clr-namespace:WCFRiaServices01.Web.Models"

<riaControls:DomainDataSource AutoLoad="True"
                              d:DesignData="{d:DesignInstance my1:Product, CreateList=true}"
                              Height="0"
                              LoadedData="productDomainDataSource_LoadedData"
                              Name="productDomainDataSource"
                              QueryName="GetProductsQuery"
                              Width="0">
    <riaControls:DomainDataSource.DomainContext>
        <my:RiaDomainContext />
    </riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>

Mostrando los datos en un DataGrid

Una vez que tenemos los datos en nuestro DomainDataSource, estos son mostrados en un control DataGrid.

Nuestro DataGrid tendrá

  • un nombre (Name="productDataGrid");
  • las columnas no serán autogeneradas (AutoGenerateColumns="False");
  • y lo más importante, el origen de datos estará enlazado con nuestro Domian Data Source (ItemsSource="{Binding ElementName=productDomainDataSource, Path=Data}")

DLL: System.Windows.Controls

Namespace: xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk

<sdk:DataGrid AutoGenerateColumns="False"
              Height="200"
              ItemsSource="{Binding ElementName=productDomainDataSource, Path=Data}"
              Name="productDataGrid"
              RowDetailsVisibilityMode="VisibleWhenSelected"
              Width="400">
    <sdk:DataGrid.Columns>
        ...
    </sdk:DataGrid.Columns>
</sdk:DataGrid>

Y las columnas haran referencia al dato con la propiedad de Binding apuntanto a la columna correspondiente (Binding="{Binding Path=Class}")

<sdk:DataGridTextColumn x:Name="classColumn"
                        Binding="{Binding Path=Class}"
                        Header="Class"
                        Width="SizeToHeader" />

Las columnas generadas, detectarán el tipo de dato desde la BD, y harán la conversion respectiva, así pues para la fechas se utilizará el formato adecuado. (Esto lo veremos en un post posterior).

Siguientes post…

Aunque ya tenemos una aplicación que corre sobre RIA Services, apenas estamos calentando motores, en los siguientes post estaremos hablando de cómo hacer paginación de los datos mostrados, cómo crear filtros, cómo mostrar los detalles de un registro, etc, etc, etc…

  • Samuel Garcia

    Cómo puedo llenar un datagrid con un Stored Procedure?

  • Cyndy

    Jorge, tu que eres experto en Silverlight, una pregunta, tengo un Diccionario de recursos en el que he guardado mis plantillas personalizadas de casi todos los controles que podría usar en un proyecto, lo hice en Expression Blend, la versión que viene con Visual Studio 2012

    Mi pregunta es, para este ejemplo que estás haciendo, podría yo indicarle que utilice MI plantilla de Datagrid?? te anexo parte del código que me deja de la plantilla el XAML de mi diccionario de recursos:

    cómo podría hacerlo?? ya probé poniendo en el XAML de tu ejemplo en la parte del Datagrid así:

    Style=”{StaticResource DataGridMtto}”

    pero me indica: No se puedo resolver el recurso “DataGridMtto”
    Saludos y gracias

    • Cyndy

      Creo que ya encontré la solución, la comparto.-
      En el App.xaml agregué la definición de mi diccionario, quedó así:

      Ahora si me los reconoce, saludos

      • http://www.jorgelevy.com Jorge Levy

        Es correcto, lo que necesita es agregar la referencia con la línea . Es algo así como el ‘include’ en el code-behind

  • Cyndy

    Jorge otra pregunta, siguiendo este tutorial tuyo creé mi modelo de datos en mi “Aplicación de Silverlight” con Silverlight 5 y resulta que en el modelo, hay algunas tablas que no me pone como tablas, sino que me las agrega como una Association, y aunque ya he buscado bastante en foros en inglés y en español, no encuentro la forma de poder agregar registros y leerlos a mi tabla que no me muestra el modelo, ojalá que pudieras apoyarme, más detalles de mi problema en: http://social.msdn.microsoft.com/Forums/es-ES/284486da-8101-4df6-aa01-b46606653187/ef-interpreta-mi-tabla-como-una-association-cmo-la-consulto-y-actualizo?forum=adodotnetentityframeworkes
    Saludos y muchas gracias

  • Cyndy

    Jorge otra pregunta, siguiendo este tutorial tuyo creé mi modelo de datos en mi “Aplicación de Silverlight” con Silverlight 5 y resulta que en el modelo, hay algunas tablas que no me pone como tablas, sino que me las agrega como una Association, y aunque ya he buscado bastante en foros en inglés y en español, no encuentro la forma de poder agregar registros y leerlos a mi tabla que no me muestra el modelo, ojalá que pudieras apoyarme, más detalles de mi problema en: http://social.msdn.microsoft.c
    Saludos y muchas gracias

    • http://www.jorgelevy.com Jorge Levy

      Hola Cindy, parece que tu problema está más por el lado de Entity Framework.. Con mucho gusto checo la información, y de ser posible dar una solución durante el día. Espero no afecte tus tiempos…