Hoy vamos a meternos de nuevo en el nombre de espacio Microsoft.Phone.UserData, y mirar al otro lado de la información, el calendario. En este artículo, vamos a mirar en como podemos usar el calendario de nuestro usuario en nuestras aplicaciones y para que podremos usarlo.
Si quisieras darle una probada a esta aplicación en tu Windows Phone antes de continuar con este artículo, esta aplicación está disponible en el Windows Phone Marketplace.
Es importante recordar que igual a el API de contactos, la información es de solo lectura. No seremos capaces de agregar nuevos eventos al calendario del usuario, pero seremos capaces de ver cuando ellos estén disponibles.
Usando la información del calendario de Windows Phone
Una de las formas mas obvias en donde nosotros podremos usar esta información es creando una aplicación de agenda. Imagina que estás construyendo una aplicación para una práctica médica y uno de los elementos es un “agendar una cita”. Para acceder al calendario del usuario y compararla con las citas guardadas de tus doctores, deberías ser capaz de darle fácilmente al usuario una opción de cita que sea ideal para ambos.
[ACTUALIZACION: Jamie Thomson llamó mi atención de que en Mango, puedes ver calendarios en vivo que estén compartidos contigo. Previamente, este artículo mostró que no había una forma efectiva de hacer esto. Gracias Jamie.]
Creando la interfaz de usuario
Ahora que hemos hablado acerca de las formas en que podríamos usar esta información en una aplicación, vamos a checar como lo hacemos. Prefiero comenzar con la interfaz del usuario, porque me ayuda a entender que información necesitaré en mi pantalla. Para la aplicación que construiremos en este artículo, vamos a usar el control DatePicker, de Siverlight Toolkit para Windows Phone, y mostrar una lista de todas las entradas del calendario que el dispositivo del usuario tenga para ese día.
Si no estás muy familiarizado con el Toolkit de Silverlight para Windows Phone, prepárate para hacer tu cabeza explotar. Es una colección gratuita de controles que están disponibles en el sitio de Codeplex para crear aplicaciones Windows Phone. Discutí en el Día 21 de 31 días de Windows Phone, así que asegúrate de aún hay mucho mas por donde ir. Hay algunos tips acerca del control DatePicker que no debes olvidar en este artículo.
Al final, nuestra interfaz será muy sencilla. Vamos a hacer que el DatePicker permita al usuario elegir la fecha, un ListBox que muestre los eventos del calendario para esa fecha. Como mencioné antes, no podemos crear o borrar cualquier evento con esta API, así que únicamente podremos leer y mostrar la información para el usuario.
En el XAML abajo, he usado la plantilla predeterminada de Windows Phone de nuevo para hacerlo fácil de seguir. Los únicos cambios a esta interfaz, son la adición del DatePicker, el ListBox y un par de TextBlock los cuales describiré después del ´código. Por favor nota la entrada xmlns:toolkit para el Toolkit de Windows Phone. Necesitarás eso para usar el DatePicker.
<phone:PhoneApplicationPage
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:phone=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone”
xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
xmlns:toolkit=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit”
x:Class=”Dia_9_Calendario.MainPage”
mc:Ignorable=”d” d:DesignWidth=”480″ d:DesignHeight=”768″
FontFamily=”{StaticResource PhoneFontFamilyNormal}”
FontSize=”{StaticResource PhoneFontSizeNormal}”
Foreground=”{StaticResource PhoneForegroundBrush}”
SupportedOrientations=”Portrait” Orientation=”Portrait”
shell:SystemTray.IsVisible=”True”>
<Grid x:Name=”LayoutRoot” Background=”Transparent”>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>
<TextBlock x:Name=”ApplicationTitle” Text=”LA LIGA SILVERLIGHT” Style=”{StaticResource PhoneTextNormalStyle}”/>
<TextBlock x:Name=”PageTitle” Text=”calendario” Margin=”8,-7,1,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>
</StackPanel>
<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>
<TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”12,6,0,0″ Text=”escoge una fecha” VerticalAlignment=”Top” Width=”126″ />
<toolkit:DatePicker x:Name=”dtFecha” Height=”100″ Margin=”0,37,0,470″ ValueChanged=”dtFecha_ValueChanged”/>
<ListBox x:Name=”lstFecha” Margin=”0,143,0,0″>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text=”{Binding StartTime}” FontSize=”16″ />
<TextBlock Text=”{Binding Subject}” TextWrapping=”NoWrap” FontWeight=”Bold” FontSize=”24″ />
<TextBlock Text=”{Binding Location}” TextWrapping=”NoWrap” Margin=”0,0,0,15″ FontSize=”20″ Foreground=”Gray”/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”70,107,0,0″ x:Name=”txtMensaje” VerticalAlignment=”Top” Width=”380″ TextAlignment=”Right” />
</Grid>
</Grid>
</phone:PhoneApplicationPage>
El datePicker es un control sorprendentemente autosuficiente. Automáticamente usa la fecha de hoy si tu no le das una (lo cual es perfecto para nuestra aplicación), e incluso tiene un evento para ValueChanged, así que podremos ajustar otra búsqueda cada vez que el usuario cambie el valor.
Los dos TextBlock son realmente solo decoración, pero el segundo, llamado txtMensaje, es usado para decirle al usuario cuantos registros de calendario ha obtenido. Verás eso cuando veamos el archivo C#.
Por último, está el ListBox, este es un ejemplo ligeramente mas elaborado que el de ayer, pero nosotros estamos enlazando un DataTemplate de controles a las propiedades de nuestros objetos de tipo Appointment que estaremos obteniendo en nuestro código. Aquí hay un vistazo de la interfaz que estamos construyendo.
Finalmente, he incluido un video de la aplicación corriendo en mi dispositivo. Chequen para ver como terminará la aplicación cuando este completamente lista.
Usando el API del calendario.
Nuestro ejemplo s bastante sencillo, pero nosotros de hecho terminamos con una interfaz mas robusta de nuestro usuario. Para comenzar, necesitamos hacer referencia al espacio de nombres Microsoft.Phone.UserData en una sentencia using. Después de tener eso, necesitamos crear un objeto nuevo de tipo Appointments que estaremos usando para acceder a la información del calendario del teléfono.
Aquí un vistazo de nuestro código inicial
using System;
using System.Linq;
using Microsoft.Phone.Controls;
using Microsoft.Phone.UserData;
namespace Dia_9_Calendario
{
public partial class MainPage : PhoneApplicationPage
{
Appointments citas = new Appointments();
public MainPage()
{
InitializeComponent();
citas.SearchCompleted += new EventHandler<AppointmentsSearchEventArgs>(citas_SearchCompleted);
citas.SearchAsync(dtFecha.Value.Value, dtFecha.Value.Value.AddDays(1), null);
}
void citas_SearchCompleted(object sender, AppointmentsSearchEventArgs e)
{
//Buscar en el calendario
}
}
}
Como puedes ver en el ejemplo arriba, creamos un manejador de eventos para SearchCompleted, y después llamamos al método SearchAsync() para ejecutar nuestra búsqueda. El método SearchAsync necesita de tres parámetros.
StartDate – Un valor de tipo DateTime que indica el inicio de nuestra búsqueda. Es un valor inclusivo, así que el momento que indiques será igual incluido en la búsqueda.
EndDate – Otro valor inclusivo, indicará el final de nuestra búsqueda.
State – Un objeto definido por el usuario que tu puedes pasar a la búsqueda y será regresado en el manejador de eventos, de modo que pudas identificar una búsqueda individual. Las aplicaciones simples como la de este artículo utilizará un valor simple para este valor.
En nuestro XAML anterior, agregamos un DatePicker a nuestra interfaz. Probablemente notaste que el código C# arriba no filtra la selección del usuario, no enlaza los resultados a nuestro ListBox. Estos dos, son los pasos restantes para hacer nuestra aplicación trabajar como en el video anterior.
Para el DatePicker, necesitamos crear un manejador de eventos para el método ValueChanged que llamamos desde nuestro XAML. Porque vamos a estar llamando al método SearchAsync() de muchas ubicaciones en nuestro código, solo vamos a tener que que llamar a un nuevo método llamado SearchCalendar() desde nuestro manejador de eventos del ValueChanged. (Lo eliminé del método constructor de nuestro MainPage)
using System;
using System.Linq;
using Microsoft.Phone.Controls;
using Microsoft.Phone.UserData;
namespace Dia_9_Calendario
{
public partial class MainPage : PhoneApplicationPage
{
Appointments citas = new Appointments();
public MainPage()
{
InitializeComponent();
citas.SearchCompleted += new EventHandler<AppointmentsSearchEventArgs>(citas_SearchCompleted);
BuscarCalendario();
}
private void BuscarCalendario()
{
citas.SearchAsync(dtFecha.Value.Value, dtFecha.Value.Value.AddDays(1), null);
}
private void dtFecha_ValueChanged(object sender, DateTimeValueChangedEventArgs e)
{
BuscarCalendario();
}
void citas_SearchCompleted(object sender, AppointmentsSearchEventArgs e)
{
if (e.Results.Count() == 0)
{
txtMensaje.Text = “No hay eventos para este día”;
}
else
{
txtMensaje.Text = e.Results.Count() + ” eventos encontrados”;
lstFecha.ItemsSource = e.Results;
}
}
}
}
Podrás darle un vistazo a método citas_SearchCompleted. Este será llamado cuando nuestro método SearchAsync() haya sido completado su búsqueda y contenga la información que solicitamos en nuestra búsqueda. En esta aplicación, estoy checando para ver cuantos registros fueron encontrados y escribiendo un mensaje al usuario en el TextBlock llamado txtMensaje. Por último, si hubiera registros, estoy enlazando el resultado de la búsqueda a nuestro lstFecha que creamos en nuestro XAML.
Explicando la magia del enlazado de datos (Databinding)
Para aquellos de ustedes que están comenzando con XAML por primera ocasión, chequen la línea abajo.
lstFecha.ItemsSource = e.Results;
Probablemente, parece que hay algo de magia ahí, en algunos casos lo es. Si echas un vistazo de vuelta a nuestro XAML, tuvimos un control ListBox elaborado.
<ListBox x:Name=”lstFecha” Margin=”0,143,0,0″>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text=”{Binding StartTime}” FontSize=”16″ />
<TextBlock Text=”{Binding Subject}” TextWrapping=”NoWrap” FontWeight=”Bold” FontSize=”24″ />
<TextBlock Text=”{Binding Location}” TextWrapping=”NoWrap” Margin=”0,0,0,15″ FontSize=”20″ Foreground=”Gray”/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Notarías que tengo 3 controles TextBox definidos dentro de un DataTemplate para el listBox. Cada uno de estos TextBlock tienen una sentencia {Binding} para sus valores Text. Lo que significa para nosotros, como desarrolladores, es que podemos escoger propiedades específicas de nuestros objetos y enlazarlos en elementos XAML específicos a sus valores.
Esto no esta limitado a los valores de texto unicamente. Puedes enlazar prácticamente cualquier propiedad de un elemento XAML. Los números puedesn ser usados para valores de opacidad, los colores pueden ser usados para el color de la letra o color de fondo. El único talón de aquiles de este estilo de enlazado de datos es que si tu cambias la estructura de los objetos que estás usando (por decir, que eliminas el título de un objeto Appointment), tu página tronará porque esta esperando ese valor. En pocas palabras, es una forma genial de pasar una colección de objetos a un ListBox con un mínimo monto de código.
En resumen
Este artículo te guió a través de los pasos para crear una aplicación que lea la información del calendario en su dispositivo. Como mencioné antes, hay una amplía variedad de aplicaciones que pueden usar esta información efectivament, desde las oficinas de los doctores hasta herramientas de sincronización. ¿Cómo usarías esta información?
Para descargar una solución Windows Phone que utilice todo el código de este artículo, puedes hacerlo.
Puedes descargar el código aquí.
Mañana vamos a meternos en la clase NetworkInformation, con un ejemplo que nos mostrará ambos, el “como” y “porque” de esta pieza de datos útil. Nos vemos.