Tecnologías Microsoft

Web Development

Tutorial de Silverlight 2 con WCF

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

  • Silverlight 2 Beta 1
  • Expression Blend 2.5
  • WCF
  • LINQ

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:

silverlight2_tutorial01

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

silverlight2_tutorial02

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

silverlight2_tutorial03

d) Cambiamos el fondo en Expression Blend

silverlight2_tutorial04

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

silverlight2_tutorial05

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

silverlight2_tutorial06 silverlight2_tutorial07

g) Agregamos un boton, quedando de esta forma:

silverlight2_tutorial08

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

silverlight2_tutorial09

h) 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 ".

silverlight2_tutorial10

i)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,

silverlight2_tutorial11

j)Selecciono la base de datos Northwind que si no la tienen pueden descargarla de ">'>aquí

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

silverlight2_tutorial12

Quedando de esta forma, con sus relaciones:

silverlight2_tutorial13

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

silverlight2_tutorial14

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

silverlight2_tutorial15

n) 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);
    }
}

 

o) Depues este buscamos el archivo de codigo del web service:

silverlight2_tutorial16

p) 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
    {
    }
}

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

silverlight2_tutorial17

#region ImiServicio Members

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

#endregion

r) Ahora, crearemos una variable de tipo DataContext.

var miDataContext = new datosDataContext();

s) 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;

y) 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();
       }

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

 silverlight2_tutorial18

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

silverlight2_tutorial19

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

 

 silverlight2_tutorial20

silverlight2_tutorial21

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

silverlight2_tutorial22

y) Ahora agregaremos ese referencia en el código XAML:

silverlight2_tutorial23

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

<WatermarkedTextBox x:Name="txtCategoria"  ...../>

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

silverlight2_tutorial25

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

x:Name="Mostrar" AutoGenerateColumns="True"

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

silverlight2_tutorial24

Nos vamos al evento clic del botón:

private void Button_Click(object sender, RoutedEventArgs e)
        {

        }

a4) Agrego a los namespaces la referencia:

using TutorialSilverlight2.ServiceReference1;

a5) Dentro del evento clic copiamos esto:

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

a6) Despues vamos a crear el siguiente metodo:

silverlight2_tutorial26

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)
      {
      }

a7) Ahora dentro del metodo que creamos colocaremos:

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

a8) Y damos visualizar, podemos ingresar una categoría de la tabla y nos dará los productos que estan ligados a esa categoría...

silverlight2_tutorial27

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

Posted: 16/5/2008 7:58 por Edison Daniel García | con 3 comment(s)
Archivado en: ,,
Comparte este post:

Comentarios

Rodrigo ha opinado:

Gracias por el tutorial, silverlight sin duda nos va a permitir mejorar mucho la presentación de sistemas web

# May 16, 2008 5:01 PM

gardero ha opinado:

hola,

 como pudiera usar variables de sesiones mediante:

  HttpContext.Current.Session("NewProperty1") = "hola"

 porque cuando llamo a los metodos de mi servicio siempre el valor de

HttpContext.Current.Session("NewProperty1") es Nothing y hay metodos en los que lo cambio... parece que siempre que llamo a un metodo me crea una sesion y quisiera que los valores que escribo ahi, siguieran estando cuando entre a otro metodo de mi Servicio.... gracias...

# November 24, 2008 9:42 PM