February 2009 - Posts
Personalización condicional del DataGrid de Silverlight 2
Introducción
El control DataGrid de Silverlight 2 ofrece a los desarrolladores un mecanismo para presentar datos tabulares de una manera sencilla, ya que al ser un control atable a datos podemos indicar como fuente de datos cualquier objeto que implemente IList o IEnumerable. Por este motivo y por el hecho de que automáticamente se ata a todas las propiedades del objeto se crearán las columnas correspondientes sin esfuerzo extra.
No obstante a lo anterior es un escenario común cambiar los colores de las filas de manera condicional, esto es, a partir de un valor o rango de valores de los datos cambiar sus características visuales de cada fila para resaltarlos.
En este artículo veremos cómo modificar la apariencia visual del DataGrid de manera condicional.
Desarrollo
Crearemos una nueva aplicación de Silverlight por medio de la plantilla en Visual Studio .NET 2008. A esta aplicación le pondremos el nombre de EjemploDataGridCondicional.
Como fuente de datos para nuestra aplicación utilizaremos las clases Album y Albumes descritas en el artículo “Introducción a los Convertidores en Silverlight 2”.
Ya que el control DataGrid está implementado en un ensamblado externo (System.Windows.Controls.Data) necesitamos referenciar este ensamblado en nuestro proyecto y además importar el espacio de nombres xml asignándole un alias para poder identificar las clases incluídas en él de manera única.
Introducción a los Convertidores en Silverlight 2
Introducción
Los Convertidores en el contexto de Silverlight, específicamente en el atado a datos son un mecanismo poderoso para poder cambiar un valor cuando de una fuente de datos se esté atando a un destino, pudiendo ser este destino por ejemplo un control. El atado de datos en Silverlight funciona a partir de cuatro conceptos: una fuente, la propiedad de la fuente de la que “leeremos” el dato, el destino y la propiedad del destino al que ataremos el dato.
Un ejemplo claro es cuando una fuente de datos incluye un campo tipo DateTime. Debido a que el tipo de dato DateTime incluye día, mes, año, horas, minutos, segundos y milisegundos, frecuentemente necesitamos únicamente presentar la fecha y quitar la hora. O por ejemplo cuando a partir de un campo bool deseamos mostrar las palabras ‘Sí’ o ‘No’ en vez de True y False.
Es aquí cuando los Convertidores son una solución natural, ya que nos permiten transformar (convertir) el dato inicial a otro que represente mejor lo que necesitamos mostrar.
Desarrollo
Iniciemos creando una nueva aplicación Silverlight utilizando la plantilla correspondiente en Visual Studio .NET 2008. A nuestra solución le llamaremos EjemploConvertidores.
En esta solución tendremos como fuente de datos una lista de álbumes musicales, tal y como lo muestra el siguiente código:
using System;
using System.Collections.Generic;
namespace EjemploConvertidores
{
public class Album
{
public string Titulo { get; set; }
public string Banda { get; set; }
public DateTime FechaLanzamiento { get; set; }
}
public class Albumes : List<Album>
{
public Albumes()
{
Add(new Album() { Titulo = "Broken", Banda = "Nine Inch Nails", FechaLanzamiento = DateTime.Parse("1992-09-22") });
Add(new Album() { Titulo = "The Fragile", Banda = "Nine Inch Nails", FechaLanzamiento = DateTime.Parse("1999-09-21") });
Add(new Album() { Titulo = "Broken", Banda = "Nine Inch Nails", FechaLanzamiento = DateTime.Parse("1994-03-08") });
Add(new Album() { Titulo = "OK Computer", Banda = "Radiohead", FechaLanzamiento = DateTime.Parse("1997-06-16") });
Add(new Album() { Titulo = "The Bends", Banda = "Radiohead", FechaLanzamiento = DateTime.Parse("1995-03-13") });
Add(new Album() { Titulo = "In Rainbows", Banda = "Radiohead", FechaLanzamiento = DateTime.Parse("2007-10-10") });
Add(new Album() { Titulo = "Black Celebration", Banda = "Depeche Mode", FechaLanzamiento = DateTime.Parse("1986-03-17") });
Add(new Album() { Titulo = "Ultra", Banda = "Depeche Mode", FechaLanzamiento = DateTime.Parse("1997-04-14") });
Add(new Album() { Titulo = "Music For The Masses", Banda = "Depeche Mode", FechaLanzamiento = DateTime.Parse("1987-09-28") });
}
}
}
Claro está, nuestra fuente de datos puede provenir de un Servicio Web, un Servicio REST, un archivo XML,etc. Por efectos de simplicidad he modelado directamente en la aplicación las clases Album y Albumes. Albumes es de tipo List<Album>. La clase List<T> implementa las interfaces IList y IEnumerable por lo tanto podremos usar Albumes como fuente de datos.
Pasar parámetros a una aplicación Silverlight desde ASP.NET
Introducción
Un requerimiento muy común al desarrollar aplicaciones con Silverlight 2 es poder pasar parámetros a la aplicación Silverlight desde ASP.NET. Esto obedece a diferentes motivos entre los cuales podemos destacar:
- Parámetros de inicialización
- Parámetros para un reporte
- Parámetros para recordar el estado
- Parámetros de configuración
Sea cual fuese tu requerimiento, esta tarea se puede lograr de una manera muy sencilla. En este artículo veremos cómo mandar parámetros a un objeto Silverlight usando el control de ASP.NET AJAX.
El control de Silverlight de ASP.NET AJAX cuenta con la propiedad pública InitParameters la cual representa los parámetros que deseamos enviar. Esta propiedad es de tipo string no obstante podemos mandar diferentes parámetros siempre y cuando tengan el siguiente formato:
llave=valor,llave=valor,llave=valor,…
Esto debido a que la clase StartupEventArgs es un IDictionary<string, string>. Esta clase es
Creando un lector de feeds RSS con Silverlight 2
Introducción
En este artículo veremos cómo crear un lector de feeds de RSS 2.0 usando Silverlight 2 como interfaz de usuario, para crear una aplicación que muestre las últimas actualizaciones de una fuente sindicalizada con el formato RSS 2.0. Este tipo de formato es muy utilizado en los motores de blogging como WordPress, en las plataformas de portales como SharePoint o DotNetNuke entre otro tipo de plataformas; no obstante, no es el único formato para hacer la difusión de contenidos ya que también existe Atom: otro formato similar para la exposición de actualizaciones.
Los formatos RSS como Atom están basados en XML, cada uno con un esquema en particular que los diferencia. La especificación de RSS (en inglés) la podrán encontrar haciendo clic aquí.
Por otro lado, a partir de la versión 3.5 del .NET Framework se incorporó el namespace System.ServiceModel.Syndication el cual contiene todas las clases necesarias para interpretar y crear este tipo de fuentes de información.
1er Reunión presencial de la comunidad La Liga Silverlight
Ya está todo listo para que mañana tengamos la primer reunión de la comunidad La Liga Silverlight – la primer comunidad MSDN en español acerca de Silverlight y tecnologías relacionadas.
Ya que es el evento inaugural como comunidad habrá muchos regalos y sorpresas como:
- Libros técnicos de Microsoft Press
- Llaveros
- Playeras de La Liga Silverlight
- Windows Vista Ultimate (con licencia)
- Windows 2008 (con licencia)
- … y más!
Lugar y Hora
Centro del Software (Sala 2) – Guadalajara, Jalisco, México
Hora: A las 6:00 p.m. comienza el registro y a las 6:15 p.m. el show
Agenda
18:00 – 18:15 Registro
18:15 – 18:30 Bienvenida e Introducción a La Liga Silverlight
18:30 – 20:30 Tema: Silverlight como plataforma de desarrollo
20:30 – 21:00 Rifa de regalos y sorpresas
Los esperamos!
Curso de Silverlight 2 en Madrid, España
Aún quedan lugares para el curso Silverlight Tour Workshop en Español para la ciudad de Madrid, España. Este curso se llevará a cabo del 24 al 26 de febrero 2009 en el centro de la ciudad.
El Silverlight Tour Workshop es un curso de tres días completamente en Español y de alta profundidad técnica acerca de Silverlight 2. Incluye los comos y por qués de XAML, el hospedaje en el navegador, las herramientas y el uso de Silverlight 2 en el servidor. El curso utiliza Silverlight 2 así como las últimas herramientas tecnológicas de Microsoft (incluyendo Visual Studio .NET 2008 y Expression Studio).
Si estás interesado en aprender a desarrollar en esta plataforma, y cómo Silverlight te puede ayudar a crear aplicaciones enriquecidas de Internet (RIA), esta es una excelente opción.
!Los esperamos!
Introducción
Incorporar un mecanismo de búsqueda adecuado en las aplicaciones es un escenario muy común hoy en día para construir soluciones con alta funcionalidad, usando diversos servicios especializados que estén al alcance de nuestra mano. Live Search es un buen ejemplo de este tipo de servicios, el cual podemos utilizar efectuar búsquedas en sitios, imágenes, foros, etc.
En este artículo veremos cómo utilizar el servicio de búsqueda de Microsoft Live Search e incorporarlo en nuestras aplicaciones Silverlight.
API de Live Search
El API de Live Search está disponible hoy en día para implementar características de búsqueda en nuestras aplicaciones de cualquier tipo: Windows, Web, Móvil, o RIA; como es el caso de este ejemplo ya que usaremos Silverlight.
Para poder usar esta API es necesario crear una cuenta, la cual te dará una llave única relacionada a tu cuenta de MSN. Esta llave es requerida para crear la petición al servicio y obtener los resultados encontrados.
El API de Live Search soporta 3 tipos diferentes de protocolos:
La decisión de utilizar uno u otro depende directamente del tipo de aplicación en donde usarás esta API. En nuestro caso utilizaremos SOAP aunque XML o JSON son también opciones bastante viables.
La dirección para obtener una llave es para Live Search es: http://search.live.com/developers/default.aspx
Creando la solución
Crearemos una nueva aplicación Silverlight utilizando la plantilla de Visual Studio .NET 2008 llamada SLSearch. Esta aplicación será de tipo Application.
Creando el XAML
La aplicación necesita básicamente los siguientes controles:
- Un control para que el usuario escriba la búsqueda que desee realizar
- Un control para iniciar esa búsqueda
- Un control para desplegar los resultados apropiadamente
El siguiente XAML crear un TextBox, Button y ListBox acomodados en un contenedor de tipo Grid. El resultado de la búsqueda la desplegaremos como una serie de hipervínculos.
<UserControl x:Class="SLSearch.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<!--Caja de texto para escribir el texto de búsqueda-->
<TextBox x:Name="txtConsulta" Height="26" Width="250" HorizontalAlignment="Left" Margin="2" />
<!--Botón para consultar-->
<Button x:Name="btnConsulta" Height="30" Width="100" HorizontalAlignment="Right" Content="Consultar" />
</StackPanel>
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="1">
<StackPanel>
<!--ListBox que desplegará los resultados-->
<ListBox x:Name="resultados" Height="300">
<ListBox.Resources>
<Style x:Key="titulo" TargetType="TextBlock">
<Setter Property="FontSize" Value="20" />
</Style>
<Style x:Key="liga" TargetType="HyperlinkButton">
<Setter Property="FontSize" Value="18" />
<Setter Property="Foreground" Value="Navy" />
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<HyperlinkButton Style="{StaticResource liga}" Content="{Binding Titulo}" NavigateUri="{Binding PaginaUrl}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>
</Grid>
</UserControl>
Referenciando el servicio
A nuestra aplicación Web (la cual es creada automáticamente por la plantilla de Silverlight) agregaremos una referencia a http://api.search.live.net/search.wsdl?AppID=nuestroAppId el cual es el URL del servicio Web de búsqueda de Live Search. Como se podrá observar necesitamos pasar como parámetro el AppID el cual es la llave mencionada con anticipación en este artículo. A esta referencia le pondremos el nombre ServicioLiveSearch tal y como lo muestra la siguiente figura:
Ahora en nuestra aplicación Web agregaremos una clase llamada Resultado la cual represente un resultado al ejecutar la búsqueda:
public class Resultado
{
public string Titulo { get; set; }
public string PaginaUrl { get; set; }
public string ImagenUrl { get; set; }
}
El siguiente paso será agregar un nuevo Servicio Web de tipo ASMX (también lo podríamos hacer con un Servicio WCF) a nuestra aplícación Web. Este servicio tendrá el método Web Buscar() el cual recibirá como parámetro la cadena que deseamos encontrar y regresará un objeto de tipo List<Resultado> como valor de retorno tal y como se muestra en el siguiente código:
[WebMethod]
public List<Resultado> Buscar(string cadena)
{
List<Resultado> resultados = new List<Resultado>();
ServicioLiveSearch.LiveSearchPortTypeClient client = new SLSearch.Web.ServicioLiveSearch.LiveSearchPortTypeClient();
SearchRequest request = new SearchRequest()
{
AppId="TU APP ID",
Sources=new SourceType[]{ SourceType.Image, SourceType.Web},
Adult= AdultOption.Moderate,
AdultSpecified=true,
Query=cadena
};
SearchResponse response = client.Search(request);
if (response.Errors == null)
{
foreach (WebResult result in response.Web.Results)
{
resultados.Add(new Resultado() {
Titulo = result.Title,
PaginaUrl = result.Url
});
}
}
return resultados;
}
En el código anterior estamos instanciando la clase proxy para comunicarnos al Servicio Web de Live Search. Posteriormente creamos un objeto de tipo SearchRequest el cual representa la petición que deseamos efectuar en el servicio de búsqueda. Es a este objeto al cual le pasamos todos los parámetros necesarios para realizar la búsqueda. Posteriormente, una vez ejecutada la búsqueda obtenemos los resultados en la propiedad Web.Results (o Image.Results según sea el caso).
El API de Live Search contiene toda la información acerca de los parámetros que podemos enviar al servicio según el comportamiento deseado. Los únicos parámetros totalmente necesarios para realizar una búsqueda con Live Search son los siguientes:
- AppID : Nuestro AppID único que se nos otorga cuando nos registramos en la liga anteriormente descrita
- Sources : Esta propiedad indica el tipo de búsqueda a realizar. Es un arreglo de objetos de tipo SourceType entre los cuales podemos destacar SourceType.Web o SourceType.Image para búsquedas normales o para búsqueda de imágenes respectivamente.
- Query : La cadena a buscar
Asimismo podemos definir algunas otras propiedades según el comportamiento que deseemos para nuestra búsqueda. La documentación del API de Live Search contiene toda la información necesaria al respecto.
Invocando el servicio
Finalmente, en nuestra aplicación Silverlight agregamos la referencia al Servicio Web que acabamos de crear para que Visual Studio haga por nosotros todas las clases necesarias para su invocación.
Una vez realizado esto ligamos el evento Click del botón a un manejador de eventos el cual invoque el servicio pasando como parámetro la cadena a buscar. Si la búsqueda es exitosa ataremos los resultados al ListBox que definimos en el XAML con anterioridad. El siguiente ejemplo hace uso de expresiones Lambda en vez de definir el cuerpo de los métodos dentro de la definición de la clase:
public Page()
{
InitializeComponent();
btnConsulta.Click += (s, a) =>
{
MiServicio.LiveSearchSoapClient client = new SLSearch.MiServicio.LiveSearchSoapClient();
client.BuscarCompleted += (sender, args) =>
{
if (args.Error == null)
{
resultados.ItemsSource = args.Result;
}
};
client.BuscarAsync(txtConsulta.Text);
};
}
Resultado
Listo. Nuestra aplicación está lista para ser utilizada. La aplicación XAP fácilmente puede ser llevada a otra aplicación en donde necesitemos este tipo de funcionalidad.
Para hacer uso de los resultados de búsqueda de imágenes necesitamos un ligero cambio en nuestro XAML en el DataTemplate del ListBox para atar el Url de la imagen encontrada a un elemento de tipo Image:
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImagenUrl}" Width="100" />
<HyperlinkButton Style="{StaticResource liga}" Content="{Binding Titulo}" NavigateUri="{Binding PaginaUrl}" />
</StackPanel>
</DataTemplate>
Y en el Servicio Web usamos Image.Results:
SearchResponse response = client.Search(request);
if (response.Errors == null)
{
foreach (ImageResult result in response.Image.Results)
{
resultados.Add(new Resultado() {
Titulo = result.Title,
PaginaUrl = result.Url,
ImagenUrl= result.MediaUrl
});
}
}
Resultado:
Pueden descargar el código fuente de este ejemplo haciendo clic aquí o directamente en la sección “Contenido” de La Liga Silverlight.