Creación y utilización de un servicio WCF en Windows Phone 7

En estos últimos días en los que estado probando las distintas formas de obtener datos desde una fuente (Web Services,WPF, REST, etc..), he creado un servicio de WCF que más tarde he usado en Windows Phone 7.

En este post voy a elaborar un servicio sencillo, en el que el usuario introduzca un nombre en la interfaz de WP7 esta petición es pasada al servicio que obtiene los detalles del contacto(Nombre, Apellido, teléfono,etc..) desde una base de datos (que crearemos para dicho fin). Por últimos estos detalles del contacto, son presentados en la interfaz de usuario de WP7.

Comenzaremos creando una nueva base de datos, para ello utilizaremos en SQL Server Management Studio en mi caso la versión 2008. Realizamos clic con el botón derecho sobre Bases de Datos y seleccionamos la opción Nueva Base de Datos.

image                    image 

 

 

Introducimos el nombre de la base de datos,en mi caso Contactos. Expandimos la tabla recientemente creada y hacemos clic con el botón derecho sobre Tablas, seleccionando Nueva Tabla.

image

Ahora vamos a diseñar los campos de la tabla que tendrán las siguientes características:

IDContacto: nchar(10) clave primeria

Nombre:nchar(50)

Apellidos:nchar(50)

Teléfono:numeric(18, 0) permitir valores nulos

Email:nchar(50) permitir valores nulos

También nombraremos la tabla como DTContactos y rellenamos la tabla con los respectivos datos de los contactos.

image     image    

 

 

 

 

El siguiente paso es la creación del servicio WCF. Para ello abrimos Visual Studio 2010, seleccionamos Archivo->Nuevo Proyecto. En el área de plantillas seleccionamos WCF y elegimos la plantilla  WCF Service Application. Introducimos el nombre y la ubicación del servicio como podemos observar a continuación:

image

Ahora vamos añadir un nuevo elemento que nos va permitir obtener los datos desde la base de datos a través de una clase LINQ. Para ello con el botón derecho sobre el servicio(WcfService) , seleccionamos Añadir->Nuevo elemento. En la ventana emergente seleccionamos la plantilla LINQ to SQL Clasess contenida en la sección Data.

image

Ahora nos situamos en el explorador del servidor de Visual Studio 2010. Si no consiguiéramos ver dicho elemento lo añadiríamos desde el menú Vista->Server Explorer. Desplegamos el explorador del servidor sobre Data Connections presionamos con el botón derecho para seleccionar Añadir Conexión.

image

Al realizar esta acción nos encontraremos con una ventana emergente, donde podremos seleccionar la ubicación de la base de datos creada con anterioridad.

image 

 

 

 

Ahora desplegamos la base de datos Contactos->Tablas y arrastramos la tabla DTContacto encima de la clase de LINQ agregada en el anterior paso.

image

Ahora accedemos a IService1.cs y dejamos dicho elemento del siguiente modo:

 

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Runtime.Serialization;
  5. using System.ServiceModel;
  6. using System.ServiceModel.Web;
  7. using System.Text;
  8.  
  9. namespace WcfService
  10. {
  11.     
  12.     [ServiceContract]
  13.     public interface IService1
  14.     {
  15.         [OperationContract]
  16.  
  17.         List<DTContacto> EncontrarContacto(string NombreCT);
  18.     }
  19. }

 

Como podemos observar la Interfaz Iservice1 es el contrato de servicio de WCF en el que hemos declarado una única función que toma una cadena como argumento (Nombre del contacto) y devuelve una lista de tipo DTContacto que es la clase de nuestro modelo de datos.

Ahora accedemos a Service1.svc.cs y dejamos dicho elemento del siguiente modo:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Runtime.Serialization;
  5. using System.ServiceModel;
  6. using System.ServiceModel.Web;
  7. using System.Text;
  8.  
  9. namespace WcfService
  10. {
  11.     // NOTE: You can use the «Rename» command on the «Refactor» menu to change the class name «Service1» in code, svc and config file together.
  12.     public class Service1 : IService1
  13.     {
  14.         public List<DTContacto> EncontrarContacto(string NombreCT)
  15.         {
  16.  
  17.             DataClasses1DataContext context = new DataClasses1DataContext();
  18.  
  19.             var res = from r in context.DTContactos where r.Nombre == NombreCT select r;
  20.  
  21.             return res.ToList();
  22.  
  23.         }
  24.     }
  25. }

La clase Service1.svc.cs es el servicio encargado de implementar el contrato de servicio IService1. Dentro de dicha clase hemos definido el método EncontrarContacto. Dentro de este, hemos creado un objeto de contexto de datos, Además de una consulta LINQ que obtiene los datos de la base de datos en función del nombre introducido por el usuario. De este modo nos devuelve una lista de objeto de tipo DTContactos.

Seguidamente nos situamos sobre el servicio Service1.svc con el botón derecho elegimos Ver en el Buscador. De esta forma podremos comprobar el correcto funcionamiento del servicio en el explorador.

image      image

 

Copiaremos la URL del Servicio para utilizarla a la hora de añadir el servicio en Windows Phone 7. El siguiente paso es la creación de una nueva aplicación Windows Phone 7. Para ello en visual estudio elegimos la plantilla Windows Phone Application dentro del área Silverlight For Windows Phone.

image

Comenzamos introduciendo la interfaz de usuario de WP7. Para ello introducimos el siguiente código en MainPage.xaml :

  1. <phone:PhoneApplicationPage
  2.     x:Class=»WindowsPhoneApplication.MainPage»
  3.     xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
  4.     xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
  5.     xmlns:phone=»clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone»
  6.     xmlns:shell=»clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone»
  7.     xmlns:d=»http://schemas.microsoft.com/expression/blend/2008″
  8.     xmlns:mc=»http://schemas.openxmlformats.org/markup-compatibility/2006″
  9.     FontFamily=»{StaticResource PhoneFontFamilyNormal}«
  10.     FontSize=»{StaticResource PhoneFontSizeNormal}«
  11.     Foreground=»{StaticResource PhoneForegroundBrush}«
  12.     SupportedOrientations=»Portrait» Orientation=»Portrait»
  13.     mc:Ignorable=»d» d:DesignWidth=»480″ d:DesignHeight=»768″
  14.     shell:SystemTray.IsVisible=»True»>
  15.  
  16.     <!–LayoutRoot contains the root grid where all other page content is placed–>
  17.     <Grid x:Name=»LayoutRoot» Background=»Transparent»>
  18.         <Grid.RowDefinitions>
  19.             <RowDefinition Height=»Auto»/>
  20.             <RowDefinition Height=»*»/>
  21.         </Grid.RowDefinitions>
  22.  
  23.         <!–TitlePanel contains the name of the application and page title–>
  24.         <StackPanel x:Name=»TitlePanel» Grid.Row=»0″ Margin=»24,24,0,12″>
  25.            
  26.             <TextBlock x:Name=»PageTitle» Text=»CONTACTOS» Margin=»-3,-8,0,0″ Style=»{StaticResource PhoneTextTitle1Style}«/>
  27.         </StackPanel>
  28.  
  29.         <!–ContentPanel – place additional content here–>
  30.         <Grid x:Name=»ContentGrid» Grid.Row=»1″>
  31.             <TextBox Height=»79″ HorizontalAlignment=»Left» Margin=»51,218,0,0″ Name=»textBox1″ Text=»» VerticalAlignment=»Top» Width=»401″ />
  32.             <Button Height=»70″ HorizontalAlignment=»Left» Margin=»152,304,0,0″ Name=»button1″ VerticalAlignment=»Top» Width=»160″ Content=»BUSCAR» Click=»button1_Click» />
  33.             <TextBlock Height=»57″ HorizontalAlignment=»Left» Margin=»63,122,0,0″ Name=»textBlock1″ Text=»INTRODUZCA EL NOMBRE DEL CONTACTO A BUSCAR:» VerticalAlignment=»Top» Width=»398″ FontFamily=»Segoe WP Black» TextWrapping=»Wrap» />
  34.         </Grid>
  35.     </Grid>
  36.     
  37.     
  38. </phone:PhoneApplicationPage>

El siguiente paso añadir el servicio al proyecto WP7. Para ello hacemos clic sobre Referencias y seleccionamos Añadir Referencia de Servicio. En la ventana emergente, en el apartado Address introducimos la dirección del servicio que hemos copiado con anterioridad. Presionamos el botón GO para comprobar que se conecta correctamente al servicio. En último lugar nombraremos el espacio de nombres del servicio como ServiceReference como podemos observar a continuación:

image

Ahora vamos añadir una nueva página en el proyecto que mostrará los diferentes detalles del contacto una vez devuelta la petición a la base de datos. Presionamos con el botón derecho sobre el Proyecto(WindowsPhoneApplication), seleccionamos Añadir->Nuevo Elemeto. Seleccionamos la plantilla  Windows Phone Portrait Page como podemos observar en la imagen:

image

Dentro de la interfaz de usuario vamos a incluir un control Listbox, dentro del mismo crearemos una plantilla para incluir los diferentes objetos Texblock que enlazarán con las propiedades del elemento buscado, recuperado de la base de datos. Este es el resultado de la interfaz de usuario de Page1.xaml:

  1. <phone:PhoneApplicationPage
  2.     x:Class=»WindowsPhoneApplication.Page1″
  3.     xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
  4.     xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
  5.     xmlns:phone=»clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone»
  6.     xmlns:shell=»clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone»
  7.     xmlns:d=»http://schemas.microsoft.com/expression/blend/2008″
  8.     xmlns:mc=»http://schemas.openxmlformats.org/markup-compatibility/2006″
  9.     FontFamily=»{StaticResource PhoneFontFamilyNormal}«
  10.     FontSize=»{StaticResource PhoneFontSizeNormal}«
  11.     Foreground=»{StaticResource PhoneForegroundBrush}«
  12.     SupportedOrientations=»Portrait» Orientation=»Portrait»
  13.     mc:Ignorable=»d» d:DesignHeight=»768″ d:DesignWidth=»480″
  14.     shell:SystemTray.IsVisible=»True»>
  15.     <phone:PhoneApplicationPage.Resources>
  16.         <Style x:Key=»ListBoxItemStyle1″ TargetType=»ListBoxItem»>
  17.             <Setter Property=»Template»>
  18.                 <Setter.Value>
  19.                     <ControlTemplate TargetType=»ListBoxItem»>
  20.                         <Grid/>
  21.                     </ControlTemplate>
  22.                 </Setter.Value>
  23.             </Setter>
  24.         </Style>
  25.         <ControlTemplate x:Key=»ListBoxControlTemplate1″ TargetType=»ListBox»>
  26.             <Grid/>
  27.         </ControlTemplate>
  28.     </phone:PhoneApplicationPage.Resources>
  29.  
  30.     <!–LayoutRoot contains the root grid where all other page content is placed–>
  31.     <Grid x:Name=»LayoutRoot» Background=»Transparent»>
  32.         <Grid.RowDefinitions>
  33.             <RowDefinition Height=»Auto»/>
  34.             <RowDefinition Height=»*»/>
  35.         </Grid.RowDefinitions>
  36.  
  37.         <!–TitlePanel contains the name of the application and page title–>
  38.         <StackPanel x:Name=»TitlePanel» Grid.Row=»0″ Margin=»24,24,0,12″>
  39.             
  40.             <TextBlock x:Name=»PageTitle» Text=»Detalles Contacto» Margin=»-3,-8,0,0″ Style=»{StaticResource PhoneTextTitle1Style}« FontSize=»56″ />
  41.         </StackPanel>
  42.  
  43.         <!–ContentPanel – place additional content here–>
  44.         <Grid x:Name=»ContentGrid» Grid.Row=»1″>
  45.             <ListBox Height=»503″ HorizontalAlignment=»Left» Margin=»20,22,0,0″ Name=»listBox1″ VerticalAlignment=»Top» Width=»434″ >
  46.  
  47.                 <ListBox.ItemTemplate>
  48.  
  49.                     <DataTemplate>
  50.  
  51.                         <StackPanel Orientation=»Vertical»>
  52.                             <TextBlock Text=»Nombre:» Foreground=»#FFFB0000″ FontSize=»29.333″/>
  53.                             <TextBlock Text=»{Binding Nombre}« FontSize=»29.333″/>
  54.                             <TextBlock Text=»Apellidos:» FontSize=»29.333″ Foreground=»#FFFD0000″/>
  55.                             <TextBlock Text=»{Binding Apellidos}« FontSize=»29.333″/>
  56.                             <TextBlock Text=»Teléfono» FontSize=»29.333″ Foreground=»#FFFE0000″/>
  57.                             <TextBlock Text=»{Binding Teléfono}« FontSize=»29.333″/>
  58.                             <TextBlock Text=»Email:» FontSize=»29.333″ Foreground=»Red» />
  59.                             <TextBlock Text=»{Binding Email}« FontSize=»29.333″/>
  60.  
  61.                         </StackPanel>
  62.  
  63.                     </DataTemplate>
  64.  
  65.                 </ListBox.ItemTemplate>
  66.  
  67.             </ListBox>
  68.         </Grid>
  69.     </Grid>
  70.  
  71. </phone:PhoneApplicationPage>

 

Seguidamente nos situamos en el evento clic del botón de busqueda, dentro de MainPage.Xaml.cs e introducimos código necesario para enviar a Page1 la cadena que el usuario ha introducido en el control habilitado para tal fin:

  1. private void button1_Click(object sender, RoutedEventArgs e)
  2.         {
  3.             string s = textBox1.Text;
  4.  
  5.             this.Content = new Page1(s);
  6.         }

El siguiente paso es situarnos en Page1.Xaml.cs referenciando el servicio en dicho archivo:

  1. using WindowsPhoneApplication.ServiceReference;

Ahora realizaremos la llamada asincrona al servicio( forma normal de realizar la llamada en Silverlight), para recuperar el dato pedido, pasando al servicio el parámetro del contacto deseado. Una vez que se haya completado la llamada asincrona, el dato del contacto será devuelto e introducido en la interfaz del usuario a través del ListBox.

  1. namespace WindowsPhoneApplication
  2. {
  3.     public partial class Page1 : PhoneApplicationPage
  4.     {
  5.         public Page1(string s)
  6.         {
  7.             InitializeComponent();
  8.             Service1Client proxy = new Service1Client();
  9.  
  10.             proxy.EncontrarContactoCompleted += new EventHandler<EncontrarContactoCompletedEventArgs>(proxy_EncontrarContactoCompleted);
  11.             //controlado del evento de completar la llamada al servicio
  12.  
  13.             proxy.EncontrarContactoAsync(s);
  14.             //llamada al método del servicio de forma asincrona
  15.         }
  16.         void proxy_EncontrarContactoCompleted(object sender, EncontrarContactoCompletedEventArgs e)
  17.         {
  18.             listBox1.ItemsSource = e.Result;//carga datos del contacto en el ListBox
  19.         }
  20.     }
  21. }

Llegados a este punto solo nos queda ejecutar el proyecto, introducir el nombre del contacto a buscar.

image

Obteniendo los detalles del contacto al Instante.

image

2 comentarios sobre “Creación y utilización de un servicio WCF en Windows Phone 7”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *