Hola,
Hoy vamos a explicar como utilizar nuestra clase DataContext, creada en el post anterior, y vamos ya a crear directamente nuestra aplicación Windows Phone que utilice este DataContext y que podamos tener nuestra base de datos local en nuestro dispositivo.
Crear el proyecto de Windows Phone
Lo primero que debemos hacer es crear el proyecto desde Visual Studio para Silverlight para Windows Phone.
El proyecto lo vamos a desarrollar con el lenguaje C#, pero es muy similar hacerlo con VB.NET.
Abrimos VS2010 y seleccionamos un proyecto de C# y Silverlight para Windows Phone.
Seleccionamos la opción de Nuevo proyecto y nos aparece la pantalla de creación del proyecto:
Escribimos el nombre del proyecto y de la solución que vamos a crear para acceder a los datos locales de una base de datos.
Vamos a colocar el nombre a nuestro aplicativo en Windows Phone, para nuestro caso vamos a darle el nombre de AccesoDBWinPhone a nuestro proyecto. Como se aprecia en la siguiente imagen:
Al dar clic sobre el botón de OK de la pantalla, nos muestra una pantalla en la que seleccionamos la versión del SDK sobre la cual deseamos trabajar, para poder trabajar con bases de datos locales debemos seleccionar la versión 7.1 del SDK como se muestra en la imagen.
Presionamos el botón OK y Visual Studio nos muestra la ventana inicial y una pagina principal que es la página principal de nuestra aplicación.
Como se puede apreciar en la imagen, en la parte izquierda aparece la imagen de la pagina como se dibujará en la pantalla de nuestro teléfono, en la parte derecha, encontramos el código XAML que representa todo el diseño de nuestra página de la aplicación.
Lo primero que vamos a hacer es cambiar un poco el aspecto de nuestra primera pagina, que también es la principal, para esto vamos a seleccionar el control TextBlock que muestra el texto “MY APPLICATION” vamos a cambiar este titulo de la aplicación por “CODIGO MOBILE”, para esto vamos a cambiar el texto directamente en la ventana de código XAML.
Simplemente seleccionamos en la ventana de diseño el control, de inmediato en la ventana de XAML se selecciona el control correspondiente indicando en el código XAML cual es la línea correspondiente.
Vamos a cambiar el titulo de la página a “BD Locales” también haciendo uso de la pantalla de código de XAML.
Luego de hacer estos cambios nuestra pantalla se verá de la siguiente manera:
Esta página principal vamos a crear unos botones que nos servirán para realizar las operaciones necesarias en nuestra base de datos.
Vamos a crear un control StackPanel dentro del Grid llamado “ContentPanel” y dentro del StackPanel vamos a crear los botones que necesitaremos para nuestro ejemplo.
Pero antes vamos a utilizar una de las características de Silverlight para Windows Phone muy importantes y fáciles de utilizar que nos ahorran mucho código y que hacen que nuestra interfaz sea consistente, esto lo vamos a lograr creando un estilo, para crear este estilo vamos a abrir el archivo App.Xaml haciendo doble clic sobre el.
Apreciamos el código xaml de este archivo:
<Application
x:Class="AccesoDBWinPhone.App"
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">
<!--Application Resources-->
<Application.Resources>
</Application.Resources>
<Application.ApplicationLifetimeObjects>
<!--Required object that handles lifetime events for the application-->
<shell:PhoneApplicationService
Launching="Application_Launching" Closing="Application_Closing"
Activated="Application_Activated" Deactivated="Application_Deactivated"/>
</Application.ApplicationLifetimeObjects>
</Application>
Para crear el estilo lo debemos colocar en la sección <Application.Resources> con esto logramos que nuestro estilo sea un recurso de la aplicación.
Nuestro estilo para tener nuestros botones con fondo Azul quedara de la siguiente manera:
<!--Application Resources-->
<Application.Resources>
<Style x:Key="FondoBotones" TargetType="Button">
<Setter Property="Background" Value="Blue" ></Setter>
</Style>
</Application.Resources>
Ya con esto podemos empezar a crear nuestros botones de la pagina principal. Creamos un StackPanel y dentro el primer botón de nuestra aplicación, nuestra pantalla se verá de la siguiente manera:
El código XAML a crear es el siguiente:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<Button Width="300" Height="75" Content="Crear Base de Datos"
Style="{StaticResource FondoBotones}"></Button>
</StackPanel>
</Grid>
Podemos apreciar en las propiedades del control Button, la propiedad Style como se asocia un estilo creado a un control, en este caso a los Botones de la aplicación. Para estar mas claros en la forma de asignar un estilo a nuestros controles, lo hacemos con este codigo: Style="{StaticResource FondoBotones}">
Bien es hora de asociar nuestra clase DataContext creada en el post anterior a nuestro proyecto.
Para hacerlo, simplemente abro el explorador de windows y busco el archivo, lo copio:
Luego en el proyecto de VS2010 lo pego:
Nuestro proyecto se verá de la siguiente manera:
Aquí ya incluimos nuestra clase que representa el DataContext, observen que nuestro archivo DBWinPhone.cs ya aparece dentro de los archivos del proyecto que creamos.
Ahora vamos a escribir el código para el evento click del botón que creamos, para esto hacemos doble clic sobre el botón y la ventana de código se abre. Antes vamos a darle un nombre a nuestro botón para que nuestro código sea mas claro.
Para esto seleccionamos el control de botón y vamos a la ventana de propiedades y le colocamos el nombre del control
En nuestro caso le colocamos a nuestro botón btnCrearBD para identificarlo de manera inequívoca, presionamos la tecla ENTER para que quede registrado el nombre.
Ahora en la ventana de diseño, damos doble clic en el botón para abrir la ventana de código, al hacer esto nos muestra la plantilla del método que responde al evento clic del botón.
private void btnCrearBD_Click(object sender, RoutedEventArgs e)
{
}
Como se puede apreciar en el código anterior el nombre del método toma el nombre del control button
y del evento que vamos a programar.
Lo que vamos a colocar aquí es el código para la creación de la base de datos local en nuestro dispositivo.
Pero antes debemos regresar a nuestra clase de Contexto de la base de datos y cambiar el NameSpace que tenga por el correcto:
namespace LocalDBDemo
{
using System.Data.Linq;
using System.Data.Linq.Mapping;
Debemos utilizar el NameSpace de nuestro proyecto:
namespace AccesoDBWinPhone
{
using System.Data.Linq;
using System.Data.Linq.Mapping;
Ya con este cambio, nuestro contexto de datos que vamos a utilizar para el manejo de la base de datos local en Windows Phone lo podremos acceder desde el codigo de MainPage.xaml.cs
Además necesitamos adicionar la referencia al proyecto de System.Data.Linq, sin esto no tendremos el manejo de nuestra clase DataContext agregada antes.
Para esto damos clic derecho sobre la carpeta de References de nuestro proyecto en el Explorador de Soluciones (Solution Explorer).
Esto nos muestra la ventana de los diferentes assemblies y proyectos de la solución para asociar una referencia al proyecto actual.
Aquí buscamos y seleccionamos System.Data.Linq para asignar la referencia al proyecto:
Nuestro Explorador de soluciones abrirá la carpeta de referencias si no la tenia abierta y debe lucir como la siguiente imagen:
Ahora debemos especificar la cadena de conexión a la base de datos local, esto lo haremos en una constante de tipo string en nuestro código:
// Cadena de Conexion a la base de datos local
private const string ConnectionString = @"isostore:/DBWinPhone.sdf";
Luego de haber creado la cadena de conexión para nuestra base de datos, ya podemos adicionar el código para la creacion de nuestra base de datos local.
El método quedará de la siguiente manera:
private void btnCrearBD_Click(object sender, RoutedEventArgs e)
{
try
{
using (DBWinPhoneDataContext context = new DBWinPhoneDataContext(ConnectionString))
{
if (!context.DatabaseExists())
{
// create database if it does not exist
context.CreateDatabase();
}
}
}
catch (Exception ex)
{
MessageBox.Show("Ha ocurrido un error:" + ex.Message, "Creando Base de Datos",
MessageBoxButton.OK );
}
}
Como podemos observar en el código utilizamos un bloque using para asegurarnos que los recursos a utilizar se cierren al finalizar el bloque using.
Lo que hacemos en el bloque using es:
- Crear una variable que llamamos “context” del tipo de la clase del DataContext adicionado al proyecto.
- En la instanciación de la variable, o sea en el new, le pasamos como parámetro la cadena de conexión de la base de datos a utilizar.
- Dentro del bloque using, verificamos si la base de datos existe, con la pregunta:
- if (!context.DatabaseExists())
- Si no existe, se crea la base de datos llamando al método “CreateDatabase()” del contexto.
Algo de lo cual debemos tener presente en este punto es que el Isolated Storage es como una unidad de disco para nuestra aplicación, entonces podremos en la cadena de conexión indicar la ruta en la cual quedará el archivo .sdf de la base de datos.
Ahora regresemos a nuestra página xaml y creemos un nuevo botón de Listar Países. Vamos a ir a la ventana de xaml de nuestra pagina ubicamos el código que representa al botón de Crear base de datos y lo copiamos y pegamos para luego modificar y colocar nuestro nuevo botón.
El código del botón quedará de la siguiente manera:
<Button Width="300" Height="75" Content="Listar Países"
Style="{StaticResource FondoBotones}" Name="btnListarPaises" Click="btnListarPaises_Click">
</Button>
Nuestro panel de diseño de la pagina se verá de la siguiente manera:
Ahora vamos a asegurarnos que este asociado el método para el evento click del botón, para esto seleccionamos el botón en la ventana de diseño:
Y en nuestra ventana de propiedades, seleccionamos Events en la parte superior del panel, ubicamos el evento Click, si no aparece el nombre del método damos doble click, con eso se crea el método y nos lleva a la ventana del code behind para escribir nuestro código C#.
Para mostrar la lista de los países vamos a crear un nuevo formulario en el cual mostraremos el listado de los países, para ello hacemos clic derecho sobre el nombre del proyecto y le damos a la opción del menú Add, y luego New Item..
Con esto logramos que aparezca la ventana de nuevos items para nuestro proyecto:
En esta ventana vamos a seleccionar la opción de “Windows Phone Portrait Page”, para crear una nueva pagina xaml, el nombre que le vamos a colocar es ListarPaises.xaml.
Cambiamos el texto del textblock ApplicationTitle por “CODIGO MOBILE” y el texto del textblock PageTitle por “listar países”.
Luego vamos al panel de ToolBox y buscamos el control ListBox y lo arrastramos y soltamos sobre el área debajo de los títulos, y lo acomodamos a nuestra página de tal forma que se vea así:
Si nos damos cuenta el ListBox esta seleccionado y lo hemos acomodado en la parte inferior del control Grid que muestra nuestra página.
Vamos al panel de propiedades del control ListBox, y le vamos a dar un nombre al control:
Ahora vamos a crear los Items del Listbox, para ello lo vamos a hacer desde el código XAML de la página pues vamos a tener mucho más control de lo que queremos realizar.
Vamos a utilizar ListBox.ItemTemplate y dentro de este un DataTemplate, para especificar como queremos se muestren los datos.
Para mostrar los datos vamos a utilizar dos TextBlock uno para el Id del País y otro para el nombre del país, entonces vamos a utilizar un control StackPanel para apilar los controles de manera Horizontal y dentro colocamos los dos textBlock para mostrar los datos, estos dos TextBlock se enlazaran (binding) con los datos a mostrar.
Nuestro Código XAML se verá de la siguiente forma:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="481" HorizontalAlignment="Left" Margin="0,120,0,0" Name="lstPaises"
VerticalAlignment="Top" Width="460">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="40">
<Run Text="{Binding Id}"/>
<Run Text="{Binding Pais}"/>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Ahora debemos crear una clase que nos sirva de Helper o que implemente el patrón facade (Fachada) que interactúe con el contexto y nos devuelva los datos que necesitamos mostrar .
Para ello nuevamente damos clic derecho en el nombre del proyecto en el panel de Explorador de Solución, buscamos la opción Add, en el submenú, buscamos Class…
Abre la ventana, y en el nombre de la clase colocamos PaisHelper.cs, con esto nos abre la ventana de código de la clase que acabamos de crear.
Debemos adicionar el using System.Collections.Generic a nuestra clase para poder utilizar las listas genéricas y trasladar nuestros datos en estas colecciones.
Además debemos definir aquí una variable constante que indique la cadena de conexión de nuestra base de datos.
Y por último el método que vamos a llamar GetPaises() el cual usaremos para obtener el listado de países de la tabla.
El código de nuestra clase:
using System.Collections.Generic;
namespace AccesoDBWinPhone
{
public class PaisHelper
{
// Cadena de Conexion a la base de datos local
private const string ConnectionString = @"isostore:/DBWinPhone.sdf";
public static List<Pai> GetPaises()
{
List<Pai> paises = new List<Pai>();
using (var context = new DBWinPhoneDataContext(ConnectionString))
{
if (context.DatabaseExists())
{
Pai pais = new Pai();
foreach (var item in context.Pais)
{
pais = new Pai();
pais.Id = item.Id;
pais.Pais = item.Pais;
paises.Add(pais);
}
}
}
return paises;
}
}
}
Nuestro método devuelve una lista genérica de los países en la tabla de país de la base de datos local de nuestro dispositivo.
Ahora retornamos a nuestra página ListarPaises.xaml para colocar el código.
Para ello mostramos la ventana de código dando clic derecho sobre la página y en el menú contextual que aparece seleccionamos la opción “View code” (ver código).
En el constructor de la página vamos a activar el evento Loaded para que al cargar la página se llene con los datos el ListBox.
Escribimos el código de la figura, al llegar el = nos muestra este mensaje, le damos al botón TAB dos (2) veces y se crea la plantilla del evento:
namespace AccesoDBWinPhone
{
public partial class ListarPaises : PhoneApplicationPage
{
public ListarPaises()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(ListarPaises_Loaded);
}
void ListarPaises_Loaded(object sender, RoutedEventArgs e)
{
throw new NotImplementedException();
}
}
}
Ahora vamos a colocar el código correcto en el método ListarPaises_Loaded, vamos a asignar a los items del ListBox la lista genérica que nos devuelve el Helper.
void ListarPaises_Loaded(object sender, RoutedEventArgs e)
{
lstPaises.ItemsSource = PaisHelper.GetPaises();
}
Ahora solo nos falta que desde el botón de la página principal llame a esta página para que nuestro ejemplo funcione.
Regresamos a la página MainPage.xaml y damos doble clic sobre el botón de Listar Paises, esto nos abre la ventana de código.
private void btnListarPaises_Click(object sender, RoutedEventArgs e)
{
// Aqui llamamos a una nueva página para mostrar la lista de los paises
NavigationService.Navigate(new Uri("/ListarPaises.xaml",UriKind.RelativeOrAbsolute));
}
Con esto llamamos a la página que muestra los datos de los países que hay en nuestra tabla de países de la base de datos.
Por hoy hasta aquí voy a llegar con este post, en próximos días estaré publicando los post para la creación, modificación y eliminación de registros.
Hasta pronto!!!
