Tutorial de Silverlight 2 con WCF

Hola, les comparto un tutorial en donde utilizo las siguientes tecnologías:

• ASP.NET 3.5
• Silverlight 2 Beta 1
• Expression Blend 2.5
• WCF
• LINQ
• Expression Web

Antes que nada tenemos que tener instalado el Visual Studio 2008 y las extensiones de Silverlight 2 Beta 1, y expression Blend 2.5, eso lo pueden encontrar aquí

a) Iniciamos en Visual Studio 2008, Creamos un nuevo proyecto de tipo Silverlight:

b) Después nos aparece una ventana en donde escogemos la opción de tipo proyecto:

c) Nos crea el proyecto, escogemos el Page.xaml y le damos clic derecho abrir con Expression Blend :

d) Cambiamos el fondo en Expression Blend

e) Agregaremos un Rectangulo y lo agruparemos dentro de un StackPanel y le daremos un Color de Fondo:

F) Agregamos un control desde el Asset Library, el cual se llama WatermarkedTextBox,

g) Agregamos un boton, quedando de esta forma:

Guardemos y volvemos a Visual Studio 2008, le damos que Si a Todo.

Agregamos un nuevo elemento al proyecto Web que tenemos,en este caso será un dataContext que es propio del nuevo control de acceso a datos LINQ, escogemos LINQ to SQL Clases y colocamos el nombre de ” datos.dbml “.

Al dar agregar nos crea el diseñador visual, y le damos clic en Server Explorer, nos abre el explorador de servidores y damos en nueva conexión,

Selecciono la base de datos Northwind que si no la tienen pueden descargarla de aquí

Depues, selecciono las tablas de Categorias y Productos, las arrastro al diseñador visual de LINQ.

Quedando de esta forma, con sus relaciones:

Escogemos que el dataContext tenga en el modo de Serialización que sea Unidireccional.

Agregamos un nuevo elemento al proyecto, en este caso será un servicio de WCF.

En este caso, coloco una lista de la clase Productos, que en este caso me refiero a la tabla, y pido como parametro una variable de tipo string, en donde indicará la categoría del Producto:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

namespace TutorialSilverlight2_Web
{
    [ServiceContract]
    public interface ImiServicio
    {
        [OperationContract]
        List<Product> ObtenerProductos(string NombreCategoria);
    }
}

 

Depues este buscamos el archivo de codigo del web service:

Borramos el metodo DoWork, que nos quede de tal forma así:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

namespace TutorialSilverlight2_Web
{
    public class miServicio : ImiServicio
    {
    }
}

Ahora vamos a implementar nuestro servicio cual haya sido el nombre que ustedes le pusieron, dando clic en la I, de la interfaz:

#region ImiServicio Members

      public List<Product> ObtenerProductos(string NombreCategoria)
      {
      }

#endregion

Ahora, crearemos una variable de tipo DataContext.

var miDataContext = new datosDataContext();

Codificamos nuestra consulta de LINQ, que consiste en traernos a todos los productos del dataContext segun la categoría que le metamos como parámetro.

var miConsulta = from p in miDataContext.Products
                            where p.Category.CategoryName.Contains(NombreCategoria)
                            select p;

Retornaremos la consulta en forma de Lista de esta forma:

return miConsulta.ToList();

Quedando finalmente así:

public List<Product> ObtenerProductos(string NombreCategoria)
       {
           var miDataContext = new datosDataContext();
           var miConsulta = from p in miDataContext.Products
                            where p.Category.CategoryName.Contains(NombreCategoria)
                            select p;

           return miConsulta.ToList();
       }

Nos vamos al webconfig y le cambiamos al atributo binding del tag services, de wsHttpBinding a basicHttpBinding:

 

Esto con el fin de activar solo el modo básico al llamar a mi webservice desde la aplicación que lo solicitará.

Nos vamos ahora al proyecto y agregamos referencias Web, del servicio que acabamos de hacer:

 

 

Ahora agregaremos una referencia, que será la de System.Windows.Controls.Data, ya que colocaré un datagrid dentro de la aplicación Silverlight:

Ahora agregaremos ese referencia en el código XAML:

Después localizamos el control watermarkedTexBox y le colocamos un nombre:

<WatermarkedTextBox x:Name=”txtCategoria”  …../>

Nos vamos a Expression Blend 2.5 y agregamos un nuevo control que será un datagrid:

Nos vamos a Visual studio 2008 y en el tag del datagrid vamos a añadir los siguientes atributos:

x:Name=”Mostrar” AutoGenerateColumns=”True”

Después añadimos el evento click al boton:

Nos vamos al evento clic del botón:

private void Button_Click(object sender, RoutedEventArgs e)
        {

        }

  Agrego a los namespaces la referencia:

using TutorialSilverlight2.ServiceReference1;

Dentro del evento clic copiamos esto:

var proxy=new ServiceReference1.ImiServicioClient();
            proxy.ObtenerProductosAsync(txtCategoria.Text);

 Despues vamos a crear el siguiente metodo:

Quedando de esta forma:

private void Button_Click(object sender, RoutedEventArgs e)
      {
          var proxy=new ServiceReference1.ImiServicioClient();
          proxy.ObtenerProductosCompleted += new EventHandler<ObtenerProductosCompletedEventArgs>(proxy_ObtenerProductosCompleted);
          proxy.ObtenerProductosAsync(txtCategoria);

      }

      void proxy_ObtenerProductosCompleted(object sender, ObtenerProductosCompletedEventArgs e)
      {
      }

Ahora dentro del metodo que creamos colocaremos:

void proxy_ObtenerProductosCompleted(object sender, ObtenerProductosCompletedEventArgs e)
        {
            Mostrar.ItemsSource = e.Result;
        }

  Y damos visualizar o F5

Saludos… Si quieren el proyecto completo, me dicen, para colocar la liga de descarga… Nos vemos en el proximo tutorial.