Archive

Posts Tagged ‘Silverlight 4’

Utilizando un escáner desde una aplicación Silverlight

August 3rd, 2011 No comments

432532_sri_scanner

Como he mencionado anteriormente aquí y aquí, las aplicaciones de Silverlight pueden ser clientes de automatización, es decir, pueden invocar los servidores de automatización registrados en el sistema operativo Windows de la máquina del usuario.

Un requerimiento bastante común en aplicaciones de negocio es poder utilizar el escáner conectado desde nuestro aplicativo, para poder digitalizar una imagen y posteriormente serializarla a disco y/o presentarla en pantalla, etc.

En sistema operativo Windows contamos con WIA (Windows Image Acquisition), la cual es una plataforma que permite a nuestras aplicaciones interactuar con hardware de imágenes y también estandariza la interacción entre las aplicaciones y los escáneres, es decir, es un común denominador entre el manufacturero del dispositivo y tú como desarrollador.  WIA está presente en Windows desde Windows ME en adelante, y su versión más reciente es la 2.0.

Es importante notar que tu hardware debe ser compatible con WIA para que el código de ejemplo de este artículo funcione.  Revisa la documentación de tu escáner para conocer si existe compatibilidad.

WIA.CommonDialog

El objeto WIA.CommonDialog tiene diferentes métodos que nos ayudan a desplegar las cajas de diálogo para poder seleccionar un dispositivo de imagen, como una cámara o un escáner, y además para escanear una imagen.  Si creamos una referencia a este objeto por medio de la clase AutomationFactory, podemos fácilmente integrar capacidades de escaneo en nuestra aplicación de Silverlight.

El objeto WIA.CommonDialog tiene algunos métodos bastantes interesantes, los cuales se destacan en la siguiente tabla:

ShowSelectDevice Muestra una caja de diálogo para seleccionar el dispositivo que deseamos utilizar, por ejemplo una cámara o un escáner.
ShowDeviceProperties Muestra las propiedades del dispositivo seleccionado en el método ShowSelectDevice
ShowAcquireImage Abre una caja de diálogo para escanear una imagen, usando el dispositivo configurado por default

Puedes leer el artículo completo aquí

Herramientas de desarrollo para Windows Phone 7.1 Beta

May 24th, 2011 No comments

windowsphone_logoEl día de hoy se han liberado las Herramientas de desarrollo para Windows Phone 7.1 Beta o mejor conocido por su nombre clave “Mango”

Las pueden descargar directamente desde este vínculo.

Windows Phone 7.1 es un salto enorme para este sistema operativo ya que incluye cientos de características faltantes en la primera versión como por ejemplo multitasking, sockets, base de datos SQL local, acceso completo a los sensores, entre otros.

Si quieren conocer una lista más completa de las características presentes en esta nueva versión les sugiero ampliamente que revisen estos vínculos:

¿Qué esperan? Bájenlas mientras están calientitas! Smile

Salu2!

Tutorial Silverlight 4 – Extiende la galería de imágnes con LinqToXml

March 1st, 2011 No comments

En este video tutorial extiendo la Galería de Imágenes simple que mostré en el tutorial de aquí para agregarle la funcionalidad de descargar un archivo xml con la definición de una galería. Una vez descargado el archivo xml hacemos un ‘parsing’ simple con LinqToXml para cargar la información que compone la librería.

Los temas vistos en el video son:

  • Descarga de un archivo xml desde el server hasta el cliente a través de WebClient.
  • ‘Parsing’ del archivo a través de LinqToXml.
  • Asignar objetos como DataContext de Controles desde Code-Behind.

Para ver el video tutorial ve a alFador en punto NET

Categories: Tutoriales Tags: ,

Taller de Silverlight 4–Sesión 8

February 16th, 2011 No comments

Después de varios siglos, el próximo día 22 de Febrero 2011 a las 19:00 horas (hora de México, Guadalajara, Monterrey) tendremos la Sesión 8 del Taller de Silverlight 4 Back to Basics.  Esta sesión será llevada a cabo por mi buen amigo y colega Jorge Levy: Administrador y Autor en La Liga Silverlight.  Les sugiero lo marquen en sus calendarios ya que Jorge estará completando los temas de acceso a datos específicamente con WCF RIA Services.  Esta Sesión 8 cerrará (por fin Smile) este Taller de Silverlight 4.

Asimismo les recuerdo que todas las sesiones anteriores, las diapositivas usadas y los ejemplos de código están disponibles para su descarga aquí.

El vínculo para entrar ese día es este.

Los invito cordialmente a que asistan, preparen sus preguntas y participen en este evento!

Los esperamos!

Tutorial Silverlight 4 – Proyecto MVVM con Ria Services multi capa

February 9th, 2011 4 comments

De vuelta con nuestros tutoriales semanales de Silverlight 4.

He navegado muchos sitios y foros de desarrolladores Silverlight buscando la respuesta a la pregunta: ¿Es posible crear un proyecto RIA Services con más de dos capas? Hace unos meses me encontré con un sitio donde mostraban una metodología para lograrlo. La verdad es que hoy en día (y gracias a mi descuido) he perdido la referencia a ese sitio. Sin embargo, el conocimiento quedó conmigo ya que lo uso contínuamente en diferentes proyectos Silverlight que desarrollo. Para mí, es momento de compartir de nuevo este conocimiento como me ha sido compartido y aprovecho para agregarle el toque MVVM.

¿De qué me serviría crear un sitio RIA Services con más de dos capas? Bien, la respuesta depende de la necesidad de cada proyecto. Yo en mi caso lo uso más o menos así:
Solución VS 2010
1. Proyecto Web con el Domain Service, Modelo y Conexión BD
2. Proyecto Librería Silverlight que será quien esté conectado a los RIA Services del Proyecto Web
3. N Proyectos Ejecutables de Silverilght que consumen los datos a través de los RIA Services que provee el Proyecto Librería

Ahora bien, yo en mi caso lo uso así, pero si tu tienes una aplicación Silverlight dividida en módulos es razonable querer tener acceso a los datos a través de todos los módulos de tu aplicación estén o no en el mismo .xap. Tener una librería Silverlight externa con conexión a RIA Services te permite separar este caso en un .xap independiente y consumir estos datos desde cualquier otra librería .xap o ejecutable Silverlight.

Después de esta introducción los dejo con el video tutorial en el que te explico como hacer este procedimiento. Te pido disculpas con anticipación pro la calidad del audio del video. Estoy trabajando en mejorar mis condiciones de grabación.

Los temas cubiertos en el video son:

  • Partiremos de una solución VS 2010 vacía.
  • Crearemos una aplicación web con un modelo, conexión a base de datos y servicios RIA.
  • Crearemos una librería Silverlight que consumirá los RIA Services
  • Terminaremos con un proyecto ejecutable de Silverlight con MVVM que servirá como cliente.

Para ver el video y bajar el código de ejemplo ve a alFador en punto net

Reunión de la Comunidad .NET Guatemala (08 de Febrero 2011)

February 3rd, 2011 No comments

ComunidadNETGuatemalaLes invito cordialmente a todos(as) que asistan a la próxima reunión de la Comunidad de Desarrolladores .NET de Guatemala en donde tengo el honor de haber sido invitado como orador.

La cita es el próximo martes 08 de Febrero 2011, los datos completos a continuación:

Fecha: Martes 8 de Febrero de 2011
Hora: De 6:30pm a 8:30pm
Lugar Oficinas de Microsoft de Guatemala
Dirección: 14 calle 2-51 zona 10, Edificio Intercontinental Nivel 11 Oficina 1101
Precio: ¡¡Gratis!!
Habrá premios por participación

En esta sesión hablaremos de Silverlight 4.  Si tienen dudas acerca de esta plataforma de desarrollo, o acerca de Windows Phone 7 por favor traiganlas para ayudarles a resolverlas!

Toda la información completa y el registro lo pueden encontrar aquí.

Allá nos vemos!!! Será un verdadero gusto conocerles.

Salu2!

Tutorial Silverlight 4 – Instalación del Framework MVVM Light

February 1st, 2011 1 comment

Bienvenido de nuevo.

En este video tutorial te explicaré paso a paso el proceso de instalación del Framework MVVM Light. Éste Framework es desarrollado por Laurent Bugnion en Suiza y está enfocado en permitir de un modo simple el desarrollo de aplicación WPF y Silverlight (incluído WP7). El principal enfoque que tiene éste Framework es el de ser amigable con Expression Blend por lo que te permite desarrollar aplicaciones a través de la interfaz gráfica de Blend.

Los temas cubiertos en el video son:

  • Presentación corta del Framework MVVM.
  • Donde encontrar recursos, documentación y los archivos de instalación.
  • Guía paso a paso de la instalación en Visual Studio 2010 y Expression Blend.
  • Creación de un proyecto MVVM Light para probar la instalación del Framework

PARA VER EL VIDEO TUTORIAL VE A: alFador en punto NET

Cómo obtener la dirección IP local desde una aplicación de Silverlight

January 7th, 2011 No comments

Introducción

Existen una gran cantidad de escenarios en donde es necesario conocer la dirección IP local de la máquina en donde está corriendo una aplicación, principalmente por cuestiones de auditoría, seguridad, etc.  A partir de Silverlight 4 contamos con la posibilidad de ejecutar las aplicaciones Afuera del Navegador en un modelo de seguridad de Confianza Elevada, es decir, rebasando las restricciones inherentes a esta tecnología Web para que los aplicativos puedan comportarse casi como si se tratasen de una aplicación de escritorio tradicional.

En el caso de aplicaciones de Silverlight tradicionales (dentro del navegador) podríamos conocer la dirección IP del usuario en el Servidor.  Pero ¿qué pasa con Aplicaciones Fuera del Navegador, en donde no tenemos la seguridad de que se cuente con acceso a un Servidor y mucho menos conectividad como tal?

En este artículo veremos cómo podemos obtener la dirección IP local del equipo desde una aplicación de Silverlight 4 que esté ejecutando en Confianza Elevada, a través del uso de WMI (acrónimo de Windows Management Instrumentation): la infraestructura de administración de datos (de hardware y software) y notificaciones en los Sistemas Operativos Windows.

Lee el artículo completo aquí

Como hacer una galería de imágenes con Silverlight 4

October 24th, 2010 2 comments

En este video tutorial te explicaré como hacer una galería de imágenes con Silverilght 4 desde Blend 4 de una manera sencilla y rápida. Te demostraré como gracias al gran poder del ‘DataBinding’ de Silverlight y a al uso de ‘Behaviors’ y ‘Templating’, hacer una galería no es tan complicado como lo parece ya que no es necesario utilizar el ‘Code Behind’ para manejar eventos y posicionar elementos en pantalla.

Los temas vistos en el video son:

  • Posicionamiento de controles en el área de trabajo.
  • Mostrar datos dinámicos a través de DataBinding.
  • Como mejorar la visualización de estos elementos a través de ‘Templates’.
  • Usar ‘Behaviors’ para animar los elementos mostrados.

PARA VER EL VIDEO TUTORIAL VE A alFador en punto net.

Descarga el código fuente de ejemplo: Galeria Simple de Imágenes en Silverlight 4

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

September 20th, 2010 2 comments

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. namespace WcfService
  9. {
  10. [ServiceContract]
  11. public interface IService1
  12. {
  13. [OperationContract]
  14. List<DTContacto> EncontrarContacto(string NombreCT);
  15. }
  16. }

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. namespace WcfService
  9. {
  10. // NOTE: You can use the “Rename” command on the “Refactor” menu to change the class name “Service1″ in code, svc and config file together.
  11. public class Service1 : IService1
  12. {
  13. public List<DTContacto> EncontrarContacto(string NombreCT)
  14. {
  15. DataClasses1DataContext context = new DataClasses1DataContext();
  16. var res = from r in context.DTContactos where r.Nombre == NombreCT select r;
  17. return res.ToList();
  18. }
  19. }
  20. }

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. <!–LayoutRoot contains the root grid where all other page content is placed–>
  16. <Grid x:Name=”LayoutRoot” Background=”Transparent”>
  17. <Grid.RowDefinitions>
  18. <RowDefinition Height=”Auto”/>
  19. <RowDefinition Height=”*”/>
  20. </Grid.RowDefinitions>
  21. <!–TitlePanel contains the name of the application and page title–>
  22. <StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”24,24,0,12″>
  23. <TextBlock x:Name=”PageTitle” Text=”CONTACTOS” Margin=”-3,-8,0,0″ Style=”{StaticResource PhoneTextTitle1Style}“/>
  24. </StackPanel>
  25. <!–ContentPanel – place additional content here–>
  26. <Grid x:Name=”ContentGrid” Grid.Row=”1″>
  27. <TextBox Height=”79″ HorizontalAlignment=”Left” Margin=”51,218,0,0″ Name=”textBox1″ Text=”” VerticalAlignment=”Top” Width=”401″ />
  28. <Button Height=”70″ HorizontalAlignment=”Left” Margin=”152,304,0,0″ Name=”button1″ VerticalAlignment=”Top” Width=”160″ Content=”BUSCAR” Click=”button1_Click” />
  29. <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” />
  30. </Grid>
  31. </Grid>
  32. </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. <!–LayoutRoot contains the root grid where all other page content is placed–>
  30. <Grid x:Name=”LayoutRoot” Background=”Transparent”>
  31. <Grid.RowDefinitions>
  32. <RowDefinition Height=”Auto”/>
  33. <RowDefinition Height=”*”/>
  34. </Grid.RowDefinitions>
  35. <!–TitlePanel contains the name of the application and page title–>
  36. <StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”24,24,0,12″>
  37. <TextBlock x:Name=”PageTitle” Text=”Detalles Contacto” Margin=”-3,-8,0,0″ Style=”{StaticResource PhoneTextTitle1Style} FontSize=”56″ />
  38. </StackPanel>
  39. <!–ContentPanel – place additional content here–>
  40. <Grid x:Name=”ContentGrid” Grid.Row=”1″>
  41. <ListBox Height=”503″ HorizontalAlignment=”Left” Margin=”20,22,0,0″ Name=”listBox1″ VerticalAlignment=”Top” Width=”434″ >
  42. <ListBox.ItemTemplate>
  43. <DataTemplate>
  44. <StackPanel Orientation=”Vertical”>
  45. <TextBlock Text=”Nombre:” Foreground=”#FFFB0000″ FontSize=”29.333″/>
  46. <TextBlock Text=”{Binding Nombre} FontSize=”29.333″/>
  47. <TextBlock Text=”Apellidos:” FontSize=”29.333″ Foreground=”#FFFD0000″/>
  48. <TextBlock Text=”{Binding Apellidos} FontSize=”29.333″/>
  49. <TextBlock Text=”Teléfono” FontSize=”29.333″ Foreground=”#FFFE0000″/>
  50. <TextBlock Text=”{Binding Teléfono} FontSize=”29.333″/>
  51. <TextBlock Text=”Email:” FontSize=”29.333″ Foreground=”Red” />
  52. <TextBlock Text=”{Binding Email} FontSize=”29.333″/>
  53. </StackPanel>
  54. </DataTemplate>
  55. </ListBox.ItemTemplate>
  56. </ListBox>
  57. </Grid>
  58. </Grid>
  59. </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. this.Content = new Page1(s);
  5. }

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. proxy.EncontrarContactoCompleted += new EventHandler<EncontrarContactoCompletedEventArgs>(proxy_EncontrarContactoCompleted);
  10. //controlado del evento de completar la llamada al servicio
  11. proxy.EncontrarContactoAsync(s);
  12. //llamada al método del servicio de forma asincrona
  13. }
  14. void proxy_EncontrarContactoCompleted(object sender, EncontrarContactoCompletedEventArgs e)
  15. {
  16. listBox1.ItemsSource = e.Result;//carga datos del contacto en el ListBox
  17. }
  18. }
  19. }

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

Categories: Tutoriales, WP7 Tags: , ,

Acceso a listas de SharePoint 2010 a través de Silverlight

September 7th, 2010 No comments

Voy a empezar mi andadura en la Liga Silverlight, publicando un artículo que he publicado con anterioridad en mi blog. Pero que personalmente es de gran interés, debido a que podemos sacar lo mejor de dos plataformas punteras de Microsoft como son Silverlight y SharePoint 2010.

Para demostrar la productividad de esta unión, vamos a crear un Webpart de basado en Silverlight.Este leerá el contenido de las diferentes listas, que contiene el sitio de SharePoint 2010 que usaremos para este artículo.

Comenzaremos accediendo a el sitio de SharePoint 2010 sobre el que vamos a trabajar a lo largo de este artículo. Dentro del mismo vamos a crear una biblioteca de documentos, en la que guardaremos el archivo .XAP. Resultante de implementar la solución desarrollada en Silverlight.

La creación de la biblioteca de documentos la realizaremos accediendo a Acciones de Sitio->Nueva Biblioteca de Documentos, como podemos observar en la siguiente imagen:

image_thumb1[1]

Al realizar dicha acción, nos surgirá una ventana emergente en la que introduciremos el nombre de la biblioteca de documentos.En este caso la nombraremos como StoreSilverlight el resto de opciones las dejaremos como en la siguiente imagen:

image_thumb6[1]

Ahora vamos a añadir una nueva WebPart con formato Silverlight. Nos situamos en Acciones del Sitio y elegimos la acción de Editar Página.

image_thumb7[1]

Al elegir está acción, nuestra página pasará a estado de edición. En la sección Herramientas de edición elegimos la pestana Insertar. Seguidamente seleccionamos la opción Elemento Web(Webpart).

image_thumb9[1]

Ahora en la sección Categorías seleccionamos Medios y Contenidos y por último elegimos Elemento Web de Silverlight y elegimos Aceptar.

image_thumb11[1]

Realizando la anterior acción, nos aparecerá una ventana emergente donde se pedirá la url donde vamos a situar el archivo .XAP. Elegiremos la url de la biblioteca de documentos StoreSilverlight, creada con anterioridad. En la parte final de este artículo, indicaremos al webpart el lugar y nombre exacto del archivo .XAP.

image_thumb12[1]

Como podéis observar se a creado el WebPart pero no tiene contenido, así que manos a la obra para crear ese contenido. Creamos un nuevo proyecto en Visual Studio 2010, la plantilla que vamos a utilizar es Visual C#->SharePoint->2010->Empty SharePoint Project. El nombre del proyecto será ImplementarSolSP.

Al crear este proyecto, se pide que apunte hacia el sitio web con el que estamos trabajando:

image_thumb14[1]

El siguiente paso es incluir un nuevo proyecto Silverlight, para ello nos situamos en la solución(ImplementarSolSP) con el botón derecho y elegimos Añadir nuevo proyecto. Elegimos la siguiente plantilla Visual C#->Silverlight->Silverlight Application. El nombre de el proyecto será AplicacionSilverlight. Al crear el proyecto debemos deseleccionar, la opción de crear un alojamiento de prueba para el proyecto creado como podemos observar en la siguiente imagen:

image_thumb18[1]

El último paso que realizaremos en nuestro proyecto Silverlight es cambiar el fondo de nuestro proyecto, para que este se distinga cuando sea implementado en el WebPart.

Accedemos al archivo MainPage.Xaml y dentro de la etiqueta Grid incluiremos el siguiente fragmento de código:

  1.     <Grid.Background>
  2.         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  3.             <GradientStop Color="Black" Offset="0" />
  4.             <GradientStop Color="White" Offset="1" />
  5.         </LinearGradientBrush>
  6.     </Grid.Background>
  7. </Grid>

 

Ahora añadimos a ImplementarSolSP el módulo que consigue incluir el archivo .Xap de Silverlight en SharePoint 2010. Presionamos con el botón derecho sobre la solución ImplementarSolSP, elegimos añadir nuevo elemento y elegimos la plantilla Visual C#->SharePoint->2010->Module. El nombre del módulo será ModuloSilverlight.

Seguidamente en el explorador de soluciones de Visual Studio 2010, vamos a situarnos con el botón derecho sobre el archivo Sample.txt y elegiremos la opción borrar.

Ahora vamos a decir a nuestro proyecto SharePoint que implemente la solución a través de el modulo de Silverlight que hemos creado con anterioridad. Para ello, hacemos Click sobre ModuloSilverlight y en la sección propiedades de Visual Studio 2010, seleccionamos el botón desplegable de la propiedad Project Output References como podemos observar en la siguiente imagen:

image_thumb16[1]

Al presionar dicho botón aparecerá una ventana emergente en la que presionaremos sobre añadir.Al añadir un nuevo miembro debemos de elegir el tipo de implementación como ElementFile y el nombre del proyecto será AplicacionSilverlight como podemos observar en la siguiente imagen:

image_thumb20[1]

Presionamos Ok para realizar la correspondiente acción.

Ahora nos situamos en el archivo Elements.xml, dejando su contenido del siguiente modo:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  3.   <Module Name="ModuloSilverlight" Url="StoreSilverlight">
  4.     <File Path="ModuloSilverlight\AplicacionSilverlight.xap" Url="AplicacionSilverlight.xap" Type="GhostableInLibrary"/>
  5.   </Module>
  6. </Elements>

Como podemos observar le decimos al módulo de carga que guarde el archivo .Xap en nuestra biblioteca de documentos StoreSilverlight.

Ahora solo queda construir la solución (F6 en Visual Studio 2010), después implementaremos la solución:

image_thumb22[1]

Finalmente comprobaremos que la solución a través del archivo AplicacionSilverlight.xap a sido añadida a la biblioteca de documentos StoreSilverlight.

image_thumb24[1]

Para que se cargue AplicacionSilverlight.xap en el Webpart deberemos situarnos en el WebPart y elegir la opción abre el panel de herramientas, al realizar dicha acción se desplegará el cuadro de opciones del WebPart como podemos observar a continuación:

image_thumb30[1]

Al presionar configurar nos pedirá una url donde está situado el archivo que va ser mostrado en la WebPart:

image_thumb32[1]

De esta forma podremos ver que efectivamente la solución de Silverlight se ha implementado en el WebPart:

image_thumb34[1] 

 

Vamos a pasar a la segunda parte del artículo que es poder acceder a las listas de nuestro sitio  SharePoint 2010 y trabajar con su contenido a través del WebPart de Silverlight creado con anterioridad.

Abrimos la solución  ImplementarSolSP con Visual Studio 2010 y accedemos al proyecto AplicacionSilverlight. Presionando sobre referencias con el botón derecho, elegimos añadir nueva referencia.En la ventana emergente elegiremos la pestaña examinar, las librerías que queremos usar son Microsoft.SharePoint.Client.Silverlight y Microsoft.SharePoint.Client.Silverlight.Runtime, que están situadas en C:\Archivos de Programa\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin .

Ahora debemos de referenciar dichas librerías en el proyecto. Abrimos AplicacionSilverlight.xaml.cs y las referenciamos añadiendo el siguiente código:

  1. using Microsoft.SharePoint.Client;

Abriremos el archivo App.xaml.cs y referenciamos nuevamente las librerías añadiendo el siguiente código:

  1. using System.Windows.Shapes;
  2. using Microsoft.SharePoint.Client;

Nos situamos en el método Application_Startup incluyendo el siguiente código en el mismo:

  1. private void Application_Startup(object sender, StartupEventArgs e)
  2. {
  3.     ApplicationContext.Init(e.InitParams, SynchronizationContext.Current);
  4.     this.RootVisual = new MainPage();
  5. }

De esta forma sincronizaremos SharePoint con el proyecto Silverlight.

Ahora vamos a modificar la interfaz del proyecto Silverlight. Abrimos AplicacionSilverlight.xaml e incluimos el siguiente código:

  1. <Grid x:Name="LayoutRoot">
  2.         <Grid.Background>
  3.             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  4.                 <GradientStop Color="Black" Offset="0" />
  5.                 <GradientStop Color="White" Offset="1" />
  6.             </LinearGradientBrush>
  7.         </Grid.Background>
  8.         <StackPanel Orientation="Horizontal" >
  9.             <ListBox Name="lbLists" Width="300" Height="400" ScrollViewer.VerticalScrollBarVisibility="Auto" Margin="20,20,20,20" />
  10.             <TextBox Name="txtDetails" Width="200" Height="400" TextWrapping="Wrap" />
  11.         </StackPanel>
  12.     </Grid>

Como podemos observar hemos introducido dentro de Grid principal un objeto ListBox que cargará las diferentes listas de SharePoint y un objeto TextBox que se encargará de cargar los detalles de cada una de las listas.

Ahora situándonos en AplicacionSilverlight.xaml.cs vamos a incluir dos variables, _sitio se encarga de cargar el sitio y _list se encarga de cargar las diferentes listas del sitio.

  1. private Microsoft.SharePoint.Client.Web _sitio;
  2. private Microsoft.SharePoint.Client.List _list;

 

El siguiente paso es la creación del contexto basado en el sitio que utilizamos para este artículo y cargarle las listas de este sitio. Para ello debemos introducir el siguiente código en el constructor:

  1. public MainPage()
  2. {
  3.     InitializeComponent();
  4.     ClientContext context = new ClientContext(ApplicationContext.Current.Url);
  5.     // creamos un nuevo contexto sobre el sitio que vamos a trabajar
  6.  
  7.     _sitio = context.Web;//cargamos el contexto en la variable
  8.     //cuando carga el contexto cargará las listas y el sitio
  9.     context.Load(_sitio);
  10.     context.Load(_sitio.Lists);
  11.     //la llamada del contexto ha de hacerse de forma asincrona
  12.     context.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), new ClientRequestFailedEventHandler(OnRequestFailed));
  13. }

A continuación vamos a agregar los dos métodos que hemos nombrado en la llamada asincrona utilizada con anterioridad:

  1. private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
  2. { //si la petición se a realizada correctamente se llama al método FillList
  3.     Dispatcher.BeginInvoke(FillList);
  4. }
  5.  
  6. private void OnRequestFailed(Object sender, ClientRequestFailedEventArgs args)
  7. {
  8. }
  9. private void FillList()
  10. {
  11.     //borra el listbox con los contenidos que tenia anteriormente
  12.     lbLists.Items.Clear();
  13.     lbLists.ItemsSource = _sitio.Lists;
  14.     //se carga en el listBox las diferentes listas
  15.     lbLists.DisplayMemberPath = "Title";
  16.     //se muestra el campo de la lista que se va mostrar
  17. }

 

Situándonos en el área de diseño de AplicacionSilverlight.xaml, haremos doble clic sobre el ListBox, para generar el evento de cambio de selección de Item. Al realizar dicha acción accederemos directamente a AplicacionSilverlight.xaml.cs e incluiremos el siguiente código:

  1. private void lbLists_SelectionChanged(object sender, SelectionChangedEventArgs e)
  2. {
  3.     using (ClientContext context = new ClientContext(ApplicationContext.Current.Url))
  4.     {
  5.         _list = context.Web.Lists.GetByTitle(((Microsoft.SharePoint.Client.List)lbLists.SelectedItem).Title);
  6.         context.Load(_list);
  7.         context.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnListDetailsRequestSucceeded), null);
  8.     }
  9. }
  10. private void OnListDetailsRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
  11. { //Añadimos la  rutina de devolución de llamada para la consulta asincrónica:
  12.     Dispatcher.BeginInvoke(ShowListDetails);
  13. }

Por último añado el método que mostrará los detalles de la lista seleccionada en el ListBox en el TextBox:

  1.         private void ShowListDetails()
  2. {
  3.     string infoAboutList =
  4.         string.Format("List Details:" + Environment.NewLine + "Title: {0}" + "Description: {1}" + "Item Count: {2}" + "Base Template: {3}" + "Base Type: {4}" + "Content Types Enabled?: {5}" + "Hidden?: {6}",
  5.         _list.Title + Environment.NewLine,
  6.         _list.Description + Environment.NewLine,
  7.         _list.ItemCount + Environment.NewLine,
  8.         _list.BaseTemplate + Environment.NewLine,
  9.         _list.BaseType + Environment.NewLine,
  10.         _list.ContentTypesEnabled + Environment.NewLine,
  11.         _list.Hidden + Environment.NewLine);
  12.  
  13.     txtDetails.Text = infoAboutList;
  14. }

 

 

Para ver el efecto de todos los cambios que hemos realizado, construimos nuevamente la solución(F6 en Visual Studio 2010) e implementamos la solución. El paso definitivo es refrescar la página en la que hemos introducido la WebPart de Silverlight. El resultado es el de la siguiente imagen:

image_thumb36[1]

En conclusión, uniendo las dos plataformas de Microsoft podemos crear unas experiencias de usuario muy dinámicas, donde tenemos un nivel de productividad muy alto. Ahora solo queda que le deis una vuelta de tuerca a la idea inicial y conseguiréis proyectos realmente profesionales.

Espero que hayáis disfrutado de esta primera entrada y deseo que en un futuro sigáis leyendo las distintas publicaciones que realizaré.

Actualización de Silverlight 4

September 2nd, 2010 2 comments

El día de ayer se liberó una actualización para Silverlight 4 (Versión 4.0.50826.0 para ser exactos). Este es un pequeño resumen de lo que incluye esta actualización:

  • Habilidad para agregar una nueva fila al control DataGrid
  • Mejoras el tiempo de carga de las aplicaciones
  • Soporte para la rueda del mouse en las aplicaciones fuera del navegador para Mac
  • Se arreglaron unos bugs relacionador con el uso de DRM para contenido multimedia
  • Se arregló una fuga de memoria relacionada con el uso de MouseCapture
  • Se arregló una fuga de memoria relacionada con el uso de DataTemplate

Aquí los pasos para bajar la nueva versión:

Para usuarios finales

Lo recomendado en el post de Tim Heuer es modificar el tag de object que hospeda nuestro xap dentro de nuestra página:

 

La clave aquí están en las líneas 5 y 6, minRuntimeVersion indica que la versión mínima requerida para correr la aplicación y autoupgrade le pedirá permiso al usuario para actualizar la aplicación si la versión de Silverlight instalada es menor a la requerida.

Para desarrolladores

Debes actualizar tanto el developer runtime como el SDK (preferentemente en ese orden). Aquí las ligas para realizarlo:

Una vez instalados el runtime y el SDK puedes crear un nuevo proyecto de Silverlight y el tag de object reflejará automáticamente la nueva versión:

image

Puedes leer más información en el post de Tim Heuer y en el Knowledge Base de la actualización (KB2164913).