Implementar R.I.A. Services a tu web con Silverlight 4

Cada vez más se tiende a enriquecer nuestras aplicaciones, de forma que deseamos tener todas aplicaciones de negocio en el mundo web. Para lograr una experiencia de usuario enriquecedora a la par que productiva vamos a utilizar Silverlight 4 y los servicios R.I.A que esta plataforma nos ofrece.

Pero para empezar a trabajar con estos elementos lo mejor es que comencemos por comprender el termino R.I.A de Silverlight 4. Que mejor forma de comenzar el aprendizaje que saber el significado de R.I.A. (Rich Internet Application) en definitiva aplicaciones enriquecidas de internet. Pero nos nos vamos a quedar en el termino de la parte visible y bonita de este concepto, si no que vamos a entrar en la parte funcional y productiva del mismo.

El siguiente paso es la visualización de la estructura de las webs tradicionales y las web que utilizan R.I.A Services:

Web tradicionales

1

Las webs tradicionales por un lado tenían el navegador basado exclusivamente en HTML alojado en el navegador y por el otro las diferentes capas de la aplicación( Presentación, lógica y de Acceso a Datos). Lo que conlleva pesados desarrollos del lado del servidor, además del retardo en el tiempo de respuesta a la hora de trabajar con los datos contenidos en el servidor.

Aplicaciones R.I.A

2

Las aplicaciones R.I.A lo que hacen es separar la capa de presentación al lado del cliente, consiguiendo con ello un cliente mucho más versátil, eso si, también más pesado. La mayor dificultad la encontramos en que las comunicaciones con las fuentes de datos no se realizan de manera directa y ¿cómo resolvemos este problema?

3

En Silverlight 4 se introducen dos nuevos elementos (Domain Context y el Data Services) que nos ayudan a resolver el problema mencionado con anterioridad, convirtiendo nuestra aplicación en una web tradicional pero aprovechando todas posibilidades que nos ofrecen los servicios RIA.

Vamos a entrar en detalles, el elemento Data Services está situado del lado del servidor y nos va servir de nexo entre el cliente y la fuente de datos. El elemento Domain Context está situado del lado del cliente. Nos permite trabajar con los datos del servidor y utilizarlos en la capa de presentación. Estos dos elementos se asemejan a los conocidos DataSources de ASP.Net. Pudiendo realizar inserciones, actualizaciones, borrados, filtros, etc.

Una vez que hemos comprendido el concepto de los servicios R.I.A vamos aplicarlos en un proyecto de Silverlight 4. Para este ejemplo hemos utilizado Visual Studio 2010 Beta 2 y Silverlight 4 Beta.

Abrimos Visual Studio 2010 para crear un nuevo proyecto Silverlight 4 eligiendo como plantilla “Silverlight Business Application”como podemos observar en la siguiente imagen:

4

Ahora vamos a implementar los servicios R.I.A para poder disfrutar trabajando con ellos. Lo primero es agregar la fuente de datos con la que vamos a trabajar, para ello nos situamos del lado del servidor (nombre del proyecto.Web) y presionando con el botón derecho sobre la carpeta Models elegimos Añadir->Nuevo Elemento.

5

En mi caso voy a utilizar como modelo de obtención de datos ADO:NET Entity Data Model pero podríais utilizar el modelo que más se adapte a vuestras necesidades.

6

Una vez seleccionado el elemento, elegimos un nombre representativo y presionamos aceptar. En la siguiente ventana emergente elegimos Generar desde una base de datos, ya que esta va ser el tipo de fuente de datos.

7

En la siguiente ventana emergente, seleccionamos Nueva Conexión, nos aparecerá una nueva ventana en la que debemos hacer clic en el área fuente de datos sobre el botón Cambiar.

 

 

 

8

Nos surge una nueva ventana, en la que elegimos el tipo de base de datos con la que queremos trabajar. En mi caso voy a trabajar con una base de datos propia, así que elijo Microsoft SQL Server Database File, pero podéis utilizar la conocida Northwind, eligiendo la misma opción que yo he elegido.

9

Presionamos Aceptar, hacemos clic sobre el botón Buscar y elegimos la base de datos sobre la que queremos trabajar, presionamos Aceptar y Siguiente.

En la siguiente ventana emergente aparecen los elementos sobre los que queremos trabajar, en nuestro ejemplo vamos a trabajar sobre la tabla Productos.

10

 

 

Presionamos Finalizar e inmediatamente Visual Studio nos muestra el diagrama de la fuente de datos seleccionada.

11

Como ultima acción que realizaremos es construir nuestra solución (F6 en Visual Studio), para que podemos utilizar la fuente de datos.

Ahora vamos a centrarnos en el Domain Context, dicho elemento nos permitirá trabajar con las distintas entidades de la base de datos de nuestro proyecto. Para ello a desde el lado del servidor vamos añadir un nuevo elemento en la carpeta Services. En este caso vamos agregar el objeto Domain Service Class, que se encuentra situado en las plantillas web como podemos en la siguiente imagen:

12

Elegimos un nombre representativo del objeto (en mi caso StockProDomainService.cs, ya que vamos a representar una serie de productos) y finalmente presionamos sobre el botón Añadir para crear el objeto.

Al realizar dicha acción nos aparecerá una ventana emergente.En dicha ventana aparece el nombre del DomainService, además tendremos la opción de permitir acceso a dicho servicio desde el lado del cliente, opción que deberemos dejar seleccionada. Por otro lado te permite seleccionar la fuente de datos sobre la vamos a manipular las distintas entidades. En nuestro caso la fuente de datos será la creada con anterioridad, pero podríamos crear un servicio para cada fuente de datos. Además aparecerá un área donde estarán las diferentes entidades sobre las que vamos a trabajar.Deberemos seleccionar las que deseemos, así como la opción de permitir la edición de dichas entidades. Por último tenemos la opción de generar las clases correspondiente para generar metadatos, dicha opción es aconsejable seleccionarla para validar datos de entrada. En el proyecto que nos ocupa no tiene relevancia, pero si que podrá utilizarse en posteriores proyectos, así que la seleccionaremos. Este será el aspecto que tendrá nuestra ventana emergente:

13

Presionamos el botón aceptar y podemos ver como nuestro servicio de dominio está formado por los métodos de edición(Insertar, Actualizar y Borrar) de la entidad Productos. También podemos ver como nuestra clase (StockProDomainService), se encuentra instanciada a través de LINQ debido a que cualquier lectura o escritura de la fuente de datos se va a realizar a través de LINQ.

Para obtener los datos de la fuente de datos y utilizarlos del lado del cliente tenemos el método

 

 

  1. public IQueryable<Productos> GetProductos()
  2.         {
  3.             
  4.             //query que obtiene los datos indicados de la fuente de datos
  5.             return this.ObjectContext.Productos;
  6.                 
  7.         }

que nos permite realizar una consulta obteniendo los datos que deseemos, aplicándole los filtros correspondientes. En nuestro caso vamos a obtener los 30 primeros productos y los vamos a ordenar por el identificador del producto(IDPRODUCTO), de manera que nuestro método quedará del siguiente modo:

  1. public IQueryable<Productos> GetProductos()
  2.         {
  3.             
  4.             //query que obtiene los datos indicados de la fuente de datos
  5.             return this.ObjectContext.Productos
  6.                   .OrderBy(orden => orden.IDProducto)
  7.                   .Where(emp => emp.IDProducto >= 1 & emp.IDProducto <= 30);
  8.                 
  9.         }

Ahora vamos a trasladar los datos obtenidos a la interfaz de usuario.Para ello abrimos Home.Xaml, que es el archivo encargado de gestionar lo referente a la interfaz de usuario en nuestra página principal.Este elemento está situado en la carpeta Views de nuestro proyecto del lado del cliente. En la barra de herramientas de Visual Studio 2010, escogeremos el objeto DataGrid y lo desplazaremos a el área de diseño. Como podemos observar en la siguiente imagen le hemos dado el tamaño y situación de dicho objeto a nuestro criterio.

14

Seguidamente vamos a enlazar la base de datos con el DataGrid. En esta nueva versión de Silverlight y Visual Studio conseguimos realizar este paso a un solo clic, sin necesidad de escribir código como en visual Studio 2008. Para ello vamos a menú Datos y elegimos mostrar fuentes de datos.

15

Al realizar dicha acción aparecerá un nuevo menú, en el se presentan las distintas fuentes de datos como el registro de usuarios, registro del contenido de cada usuario, etc.. Pero la parte que nos interesa  es nuestro StockProDomainContext y su entidad Productos.

16

Seleccionamos la entidad Productos y la arrastramos al interior de el objeto DataGrid que se añadió con anterioridad. Al realizar este paso se a generado en Home.xaml el siguiente código:

  1. <riaControls:DomainDataSource AutoLoad=»True» Height=»0″ LoadedData=»productoDomainDataSource_LoadedData» Name=»productoDomainDataSource» QueryName=»GetProductosQuery» Width=»0″>
  2.     <riaControls:DomainDataSource.DomainContext>
  3.         <my:StockProDomainContext />
  4.     </riaControls:DomainDataSource.DomainContext>
  5. </riaControls:DomainDataSource>

 

Dicho código realiza la carga de los diferentes datos de la fuente de datos a través del método GetProductosQuery perteneciente al StockProDomainContext.

Ahora lo que tenemos que realizar es adaptar de forma correcta nuestro DataGrid para que muestre los datos de forma correcta. Seleccionamos dicho objeto en el área de diseño y modificamos las siguientes propiedades:

  • Width:Auto
  • Height:Auto
  • AutoGenerateColumns:True, esta propiedad permitirá la creación de columnas correspondientes a los campos de la entidad.

Ejecutamos el proyecto F5 y podemos comprobar como se cargan los 30 primero productos ordenados por IDProducto de la Base de datos.

17

Para no quedarnos solo con la simple carga de datos en nuestro DataGrid, vamos a cargar todos los elementos de la fuente de datos. Para filtrar los elementos en paginas de 20 elementos cada una.

Lo primero de todo nos desplazaremos StockProDomainService.cs y accedemos a el método GetProductos() y eliminamos parte de la consulta para que se carguen todos los datos, siendo el código resultante del método el siguiente:

  1. public IQueryable<Productos> GetProductos()
  2.         {
  3.             
  4.             //query que obtiene los datos indicados de la fuente de datos
  5.             return this.ObjectContext.Productos
  6.                 
  7.                 .OrderBy(orden => orden.IDProducto);
  8.                 
  9.         }

 

 

Ahora volvemos a la interfaz de usuario (Home.Xaml) para introducir en esta un nuevo elemento. Nos situamos en la barra de herramientas y sobre el área General presionamos con el botón derecho sobre dicha área, para seleccionar Elegir Elemento, como podemos ver en la siguiente imagen:

18

Al elegir esta opción surgirá una ventana emergente en la que elegiremos DataPager dentro del área de búsqueda:

19

De este modo ya tenemos agregado dicho elemento a nuestra barra de herramientas, ahora debemos arrastrarlo a la inferior del DataGrid y establecemos las siguientes propiedades para el objeto DataPager:

  • Width:Auto
  • PageSize:20 para cargar 20 elementos en cada página

El siguiente paso es volver a el menú Fuente de datos y seleccionar la entidad Productos e incluirla dentro del control DataPager (este paso es similar al que hemos hecho con el DataGrid). Ahora para ver la agrupación de todos los datos de 20 en 20 elementos deberemos ejecutar el proyecto y el resultado será el de la siguiente imagen:

20

Como podemos observar gracias a los servicios R.I.A. de Silverlight 4 y Visual Studio 2010 podemos exprimir al máximo todas las características que nos ofrecen nuestras bases de datos y todo a unos simples clics de ratón. Esta solo es una pequeña muestra del potencial de esta parte de la plataforma, debido a que hay infinidad de características que puedes agregar a tus aplicaciones Silverlight, iremos poco a poco descubriéndolas en posteriores artículos.