Creando una aplicacion movil hibrida desde Windows Phone 8 y HTML5 I

Hola a tod@s!
Hoy quiero presentarles este articulo en cual voy a explicar como podemos crear aplicaciones hibridas para Windows Phone 8, en al cua nuestra aplicacion principal es una aplicacion HTML5, utilizando todo lo que nos ofrece el estandar, mas CSS3 y javaScript para este tipo de aplicaciones.
La importancia es que muchos desarrolladores les gusa mas o prefieren desarrollar sobre HTML5 por ser un desarrollo multiplataforma ya que el cambio en el aplicativo HTML5 es minimo o casi que nulo entre las diferentes plataformas moviles mas fuertes en este momento en el mercado.
Me refiero por supuesto a Android, iOS y Windows Phone.
Una de las desventajas de las aplicaciones desarrolladas sobre HTML5 es que no pueden acceder a los recursos fisicos del dispositivo en el cual se ejecutan, pues es el comportamiento de las aplicaicones web por seguridad a la red y a los recursos del servidor web de aplicaicones.
Sin embargo nuestros clientes nos piden una aplicacion que sean o tenga una interfaz de usuario (UI) Waoo, o muy relevante, y nuestros amigos colaboradores disenadores graficos estan mucho mas familiarizados con HTML que con otras tecnologias de representaciones graficas como XAML, por ejemplo.
Entonces despues de haber desarrollado un App sobre HTML5 nos piden que ademas nuestra App capture una fotografia desde nuestro SmartPhone, esto resulta un enorme reto sobre nuestra aplicacion HTML5 pues su naturaleza restringue el acceso al hardware del dispositivo, esto es lo que nos hace crear una aplicacion hibrida, la cual utilizara recursos de hardware, usando codigo nativo y nuestra aplicacion HTML5 ya desarrollada.
Bueno, no mas palabras … y “manos a obra”.
1. Creamos un proyecto de Windows Phone 8, voy a definir los pasos necesarios para esto, a pesar que pueden ya conocerlos de memoria los que desarrollamos todos los dias.
Abrimos VS2013, seleciconamos nuestro lenguaje de desarrollo, en este caso C# (C Sharp), y buscamos las plantillas de Windows Phone y ubicamos en la ventana que se muestra un Windows Phone App

2. Luego de darle un nombre a nuestro proyecto y crearlo, VS2013 crea una estructura completa de nuestra App para Windows Phone 8.
En mi caso coloco com nombre de mi App Celeste.WP8Hibryd.AppMobHtml.
Como es una aplicaicon HMTL5 la que vamos a implementar, debo eliminar la cabecera de la pagina XAML que coloca por defecto VS2013 en la plantilla y luego adicionar un objeto WebBrowser, este objeto es el que nos va a permitir mostrar nuestras Apps escritas en HTML5
3. En nuestra pagina principal que crea nuestra platilla ed VS2013 para Windows Phone vamos a eliminar la cabecera de la paginas ya que necesitamos toda el area de la pantalla de nuestra aplicación en HTML5, y luego de eliminar esta porcion del codigo XAML vamos a adicionar un control Web browser.

Lo que vamos a eliminar es el StackPanel, es mucho mas sencillo hacerlo desde la ventana de codigo XAML.
Ahora vamos a ir al toolbox y buscamos el control webbrowser y lo arrastramos y soltamos en la pantalla de diseño de tal manea que quede en el grid que quedo como control principal de nuestra pagina XAML.

Arrastramos y soltamos el control sobre la superficie de diseno y verificamos las siguientes propiedades, nuestra pantalla debe verse como la siguiente imagen:

Si nos damos cuenta en la ventana de la derecha, la ventana ed propiedades del control WebBrowser, hemos selecionado las propiedades de IsGeolocalizationEnabled y IsScriptEnabled, esta ultima propiedad es la que nos permitira acceder a codigo nativo C# desde codigo javascript de nuestra aplicacion HTML5 para moviles.
Ademas en la parte inferior de la ventana de propiedades podemos observar que el control WebBrowser tiene el HorizontalAlignment y VerticalAlignment en Strech que nos permite que el control ocupe todo el ancho y todo el alto de muestra pantalla del dispositivo.
Ahora vamos a empezar a escribir codigo C# para nuestra aplicacion hibrida. Abrimos la ventana de codigo C# usando la tecla F7, y en el constructor de nuestra pagina escribimos el siguiente codigo:

   1:              this.webBrowser1.NavigateToString(@"<html>

   2:                      <body>

   3:                          <h1 id="

"btnAccion"">App Hibrida HTML5 Win Phone 8</h1>

   4:                          <h1 id="

"mensaje"" style=""color:red""></h1>

   5:                      </body>

   6:                      <script>

   7:                          document.getElementById('btnAccion').onclick = function()

   8:                          {

   9:                              //window.external.notify('foo');

  10:                              window.location = '/getNativeFunction';

  11:                          };

  12:                          function callback(mesg)

  13:                          {

  14:                              document.getElementById('mensaje').innerHTML = mesg;

  15:                          }

  16:                      </script>

  17:                  </html>"

);

  18:          }

Lo que tenemos aqui es una pagina HTML5 en la cual hay dos etiquetas H1 con un id especifico para cada una para poder ubicar estas etiquetas a traves de codigo javascript.

A traves de document.getElementById le asigno el evento onclick al elemento que llame btnAccion y cree una funcion en javascript para comunicarme con el codigo de la aplicacion nativa, esto es el codigo escrito en C#, para ello hay dos formas, la primera, es con windows.external.notify y el nombre del metodo a ejecutar.

En este caso estoy utilizando el segundo metodo o sea window.location y le paso una url a ejecutar, debido a que es mas acorde con la funcionalidad de apps HTML5 con otras plataformas, especificamente con iOS, sin tener que cambiar el codigo javascript para una u otra plataforma.

En la funcion callback toma el resultado de la aplicacion nativa y lo muestra en la aplicacion HML5.

El codigo HTML va a hacer 3 cosas basicamente:

1. mostrar un mensaje: App Hibrida HTML5 Win Phone 8

2. Cuando haga clic sobre esa etiqueta HTML, va a llamar el codigo nativo mediante window.location, y dentro de window.location, el manejador para eso, que va a ser codigo nativo.
3.Luego, que se ejecuta el codigo nativo, se hace una devolucion de llamada para volver a llamar a codigo JavaScript.

Ahora necesitamos otras funciones para manejar la navegacion, para ello vamos  a utilizar el evento navigating del control WebBrowser y poder controlar esto.

Entonces en el constructor creamos la siguiente linea de codigo:

   1:   this.webBrowser1.Navigating += webBrowser1_Navigating;

Y creamos el metodo que se ejecuta cuando se dispare el evento:

   1:          void webBrowser1_Navigating(object sender, NavigatingEventArgs e)

   2:          {

   3:              // Aqui verificamos si el AbsolutePath es igual a /getNativeFunction, que es loq ue se jecuta en 

   4:              // el javascript de la app HTML5 

   5:              if (e.Uri.AbsolutePath == "/getNativeFunction")

   6:              {

   7:                  // esto es para edcirle al WebControl que no trate de navegar a /getnativeFunction

   8:                  // porque en realidad esta url no existe

   9:                  e.Cancel = true;

  10:   

  11:                  // Aqui codigo de aplicacion nativo

  12:                  // Lo anterior lo reemplazariamos por lo que queremos que haga nuestra aplicacion nativa

  13:   

  14:                  // Ahora queremos devolver la llamada al codigo javascript

  15:                  // para ello vamos a hacer una llamada anonima utilizando una expresion lambda

  16:                  // para que se ejecute en el thread corecto e independiente del principal

  17:                  Dispatcher.BeginInvoke(() =>

  18:                      {

  19:                          MessageBox.Show("Hola desde codigo nativo");

  20:                          webBrowser1.InvokeScript("callback", "Codigo nativo llamando javascript");

  21:                      }

  22:                      );

  23:              }

  24:          }

Ahora ya podemos ejecutar el app en el emulador de Windows Phone



Si damos clic sobre la etiqueta, entonces llamamos desde JavaScript una funcionalidad escrita en código nativo C#:
 

Y posteriormente, al dar clic al botón del mensaje, le pasamos un parámetro al método JavaScript y lo muestra en color rojo en la segunda etiqueta H1.
 

Este es un ejemplo muy sencillo de como crear app escritas en HTML5 sobre Windows Phone creando lo que se conoce como un App Hibrida, la cual puede utilizar recrsos de ambos mundos, subsanando la carecia de acceso a los recursos de hardware a traves de codigo nativo de la aplicacion.
En proximos post como hacer esto pero utilizando un recurso del smartphone: la camara.
Que tengan un año lleno de muchas bendiones!!!
Happy coding!

[Curso] Desarrollo Video Juegos sin 1 línea de Código

Hola a tod@s,

Hoy quiero invitarlos a inscribirse a este curso de desarrollo para crear un video juego que podrá ser exportado a HTML, a Windows 8 y a Windows Phone 8, utilizando herramientas totalmente gratis y Funcionales!

Pero esto no es todo, además podrán exportar el mismo juego a la plataforma Android e iOS con la versión paga del software.

No se necesitan conocimientos de programación, solo una idea de un juego, buena disposición y orientación para el desarrollo.

Nosotros le proporcionamos los medios para subir su juego, siempre y cuando sea gratis a las tiendas de Windows 8 dentro del mismo valor del curso.

Aún hay más, al finalizar el curso obtendrán un diploma en formato PDF que se enviará a sus cuentas de email.

El curso será a través de streamming en vivo y en directo, esto garantiza que podrán realizar preguntas al instructor y serán respondidas a la brevedad posible.

Si crean su propio juego, el estar en la tienda de Windows 8 referenciado por nosotros!

Todos los datos relacionados con el curso los encuentran en este link:

Curso desarrollo Video Juegos sin 1 linea de codigo

[Programathon WP7] Material de la Programathon

Hola a todo@s,

A continuación les dejo los links para que puedan descargar los pdf de la presentación y el ejemplo que utilizamos para el demo y la explicación de los conceptos vistos en el evento.

 

Aquí las diapositivas de la presentación:

Presentancion Fundamentos Windows Phone

 

Acá la ruta de Skydrive para escargar el codigo ejemplo utilizado:

Descarga del código fuente del demo

 

Cualquier duda adicional con mucho gusto se las tratare de resolver.

 

Hasta una próxima oportunidad:

[EVENTO] Windows Phone Professional Programathon

Hola a tod@s,

Esta vez es para invitarlos este 30 de Junio a una Programathon de Windows Phone, en este momento es solo presencial en Bogotá, Pueden inscribirse en: http://www.meetup.com/BDotNet/events/69979492/

 

Estamos haciendo arreglos para que podamos trasmitirla en video o por Live Meeting, les estaré avisando, o en la misma pagina de meetup les avisare si esto lo logramos.

 

Los espero!!!

Saludos!!!

[WP7] Bases de datos Locales en Windows Phone 7.5 (II)

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:

1. Crear una variable que llamamos “context” del tipo de la clase del DataContext adicionado al proyecto.



2. 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.



3. Dentro del bloque using, verificamos si la base de datos existe, con la pregunta:



4. if (!context.DatabaseExists())



5. 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!!!

[EVENTO] APPSLAB {Microsoft–NOKIA}

Hola amig@s,

El día de ayer 18 de Abril del 2012 estuvimos apoyando la Maratón de Desarrollo para Windows Phone con Microsoft y Nokia.

Gracias  a UNICAFAM por prestarnos sus instalaciones y por todos los estudiantes que participaron en esta maratón, además estuvieron otras universidades como la Universidad de Cundinamarca, la Conrad Lorentz y el SENA.

 

Aquí algunas imágenes del evento:

 

 

 

 

 

 

 

Gracias!

[EVENTO] APPSLAB {Microsoft–NOKIA}

Hola a tod@s,

Les comparto el link de la pagina de las maratones para Windows Phone en Colombia, se realizará en las ciudades de Bogotá, Cali, Popayán, Cartagena y Medellín.

Aun estas a tiempo de participar, averigua en tu Universidad, puedes ganarte un NOKIA LUMIA 800 de inmediato si triunfas en la maratón.

Aquí el link: www.appslab.com.co

Algunas imágenes de la jornada de hoy en la Universidad de Los Andes.

 

 

Los espero a todos!

[WP7] Bases de datos Locales en Windows Phone 7.5 (I)

Hola a todo@s nuevamente,

 

Hoy quiero compartir con ustedes como es el proceso para generar el contexto que se utiliza para utilizar bases de datos locales en Windows Phone 7.5.

 

Crear Contexto de datos para Bases de datos Locales en Windows Phone 7.5

 

Es necesario indicar que los motores de bases de datos que podemos utilizar locales en Windows Phone 7.5 son:

• Microsoft SQL Server Mobile (Algunos lo siguen llamando Compact Edition)
• SQLite

 

Debemos crear un contexto de datos (DataContext) para poder tener acceso a la base de datos local en Windows Phone 7.5 conocido también como Windows Phone Mango, aquí es necesario aclarar, que no podemos utilizar ADO.NET de manera directa para este acceso a la base de datos local en el dispositivo.

 

Por la razón anterior debemos crear un contexto de datos de la base de datos a utilizar en nuestro desarrollo para Windows Phone 7.5, este DataContext, no es mas que una clase en uno de los lenguajes de la plataforma .NET (VB.NET o C#), en la cual se encuentran métodos que permiten las operaciones CRUD, clases de tipo entidad que representan un registro de cada una de las tablas, clases de tipo colección que representan la tabla o un conjunto de registros de la tabla.

 

Para muchos de los que venimos del mundo de Windows Mobile, desarrollo ASP.NET o Windows Forms es un cambio brusco, ya que estábamos acostumbrados a tener todo controlado desde ADO.NET.

 

La razón principal de la reflexión anterior es que al no tener el manejo de las operaciones de la base de datos a través de ADO.NET las cosas como que se nos complican. Sin embargo, el manejo de las operaciones de la base de datos locales en Windows Phone 7.5 se realiza a través de LinQ y un DataContext, este DataContext es el que vamos a aprender a construir en este post.

 

Algo que debemos tener claro es que nuestra base de datos local de SQL Server Mobile se almacena en el almacenamiento privado del dispositivo, esto es lo que conocemos como “Isolated Storage”.

 

En la imagen anterior podemos observar como se almacena nuestra base de datos en el Isolated Storage y que a través de LINQ to SQL nos comunicamos con ella utilizando el DataContext desde nuestra aplicación de Windows Phone 7.5.

 

La clase DataContext

Esta es una clase que contiene de todas las operaciones CRUD (Create, Read, Update, Delete) basada en la base de datos para realizar operaciones sobre la Base de Datos. En la cual utilizando LINQ to SQL accedemos a todas las operaciones que necesitemos realizar sobre la base de datos.

 

 

Muy bien, ya teniendo claro todo lo anterior, lo primero que debemos hacer es definir el modelo de datos en nuestra base de datos SQL Mobile, para esto vamos a utilizar SQL Server Management Studio para crear la base de datos y la estructura de las tablas de nuestra base de datos.

Si se preguntan si podemos utilizar Entity Framework 4.1 para realizar esta operación, la respuesta es SI, lo importante es definir el modelo de nuestro repositorio de datos y generar el archivo .SDF de la base de datos SQL Server Mobile.

 

Ahora vamos a mostrar como crear una base de datos desde el SQL Server Management Studio, al iniciar esta aplicación nos vamos a encontrar con la siguiente pantalla:

 

En el tipo de Servidor vamos a abrir la lista de selección y seleccionar SQL Server Compact, con esto nos aseguramos crear la base de datos que podemos utilizar en Windows Phone 7.5.

 

Al seleccionar el tipo de base de datos, seleccionamos en el archivo de la base de datos, para crear nuestra base de datos SQL Server Compact:

 

Vamos a crear una nueva base de datos, entonces de la lista que nos muestra, que son las bases de datos que hayamos utilizado, vamos a seleccionar la opción <New Database…> para crear una nueva base de datos.

 

Esta acción nos abre una nueva pantalla en la cual podemos darle un nombre a nuestra base de datos, colocarle un nombre, etc.

Como observamos podemos seleccionar la ruta y colocar el nombre de la base de datos .SDF que vamos a crear, esto lo hacemos en el primer cuadro de texto de la ventana, en donde dice “Enter the new SQL Server Compact database filename”, el botón que se encuentra junto a la caja de texto con el texto “Browse…” nos permite explorar el sistema de archivos de nuestra PC para seleccionar la ruta que nosotros deseemos y colocar allí la base de datos.

Luego hay un Check que nos permite sobre escribir la base de datos si esta ya existe.

También podemos escoger en este punto, el tipo idioma que va a manejar nuestra base de datos.

Si deseamos que nuestra base de datos haga diferencia entre mayúsculas y minúsculas podemos seleccionar el Check de “Case sensitive” que aparece bajo el Collation que hayamos seleccionado para nuestra base de datos.

 

La siguiente configuración de creación, es si deseamos asignarle una clave para poder acceder a nuestra base de datos.

También podemos seleccionar un método de encriptación de los datos para nuestra base de datos, si no deseamos encriptar nuestra base de datos seleccionamos la opción por defecto : “UNENCRYPTED”.

 

 

Vamos a crear una BD que se llame DBWinPhone.sdf, con los parámetros por defecto, como lo podemos apreciar en la imagen anterior.

 

Al presionar el botón de OK, nos muestra una ventana de confirmación indicando que la base de datos no tiene una clave de protección.

Seleccionamos el botón Yes para que nos muestre la pantalla para abrir nuestra base de datos y empezar a diseñar y crear nuestras tablas.

En esta pantalla ya tenemos el botón de “Connect” con el cual abrimos y nos conectamos a la base de datos.

 

Nos abre la ventana del SQL Server Management Studio y en el explorador de Objetos nos muestra algo como la siguiente imagen:

Vamos a crear una nueva tabla para nuestra base de datos, para esto, damos clic derecho sobre la carpeta de las tablas “Tables”, esto lo podemos apreciar en la siguiente imagen:

Al seleccionar la opción “New Table” nos abre la pantalla de creación de una nueva tabla para nuestra base de datos:

En la caja de texto “Name” colocamos el nombre de nuestra tabla, el la parte inferior vamos creando cada una de las columnas de nuestra base de datos.

En la caja de texto debajo de “Column Name” colocamos el nombre de las columnas, el tipo de dato para el campo, la longitud si aplica y si acepta o no nulos.

Vamos a crear una tabla llamada Pais, con dos campos: Id de tipo auto numérico y el campo Pais de tipo nvarchar (texto) para almacenar el nombre del país.

En la imagen anterior podemos observar la estructura de la tabla Pais que creamos para nuestra base de datos.

Al darle clic al botón de OK de la pantalla se graba la estructura de la  tabla y se ve de la siguiente forma en el SQl Server Management Studio:

 

Ya tenemos nuestra base de datos .SDF creada, ahora vamos a realizar el proceso de la creación de la clase que forma el DataContext para poder utilizarlo en nuestra aplicación de Windows Phone 7.5.

 

Para poder realizar el proceso necesitamos un programa que se instala con el SDK de Windows Phone 7.5, este programa se llama SQLMetal.

 

Para ejecutarlo, vamos a abrir una ventana de comandos del sistema operativo, pero la ventana de comandos a abrir es la que se encuentra en la sección de Visual Studio 2010, como lo podemos apreciar en la siguiente imagen:

 

Esto nos abre una ventana de comandos:

Ahora si podemos ejecutar el comando SQLMetal que nos permite generar la clase que representa el DataContext para acceder a nuestra base de datos.

 

El comando a utilizar para generar nuestra clase es el siguiente:

 

SQLMETAL D:\Roberto\Projects\Silverlight\DBWinPhone.sdf

/code:D:\Roberto\Projects\Silverlight\DBWinPhone.cs

/language:csharp

/namespace:LocalDBDemo

/context:DBWinPhoneDataContext

/pluralize

 

1. El primer parámetro es la ruta y el nombre de la base de datos .SDF a la cual vamos a generar el DataContext.
2. /code: representa la ruta y el nombre del archivo físico en donde se va a generar el DataContext.
3. /language: representa el lenguaje de programación en el cual se va a generar la clase.
4. /namespace: representa el NameSpace con el cual se va a generar el DataContext.
5. /context: representa el nombre que va a tener al clase del DataContext.
6. /pluralize: indica que se deben crear los objetos que representan las colecciones y grupos de registros en el DataContext.

En nuestra ventana de comandos colocamos nuestra sentencia para ejecutarla:

 

Iniciando la ejecución del comando:

Al terminar la generación nos muestra lo siguiente:

Esto lo que hace es generarnos el archivo DBWinPhone.cs en la ruta especificada como lo podemos apreciar en la siguiente imagen:

 

Al verificar la clase DataContext generada con el nombre DBWinPhone.cs podemos observar lo siguiente en el código:

#pragma warning disable 1591
//------------------------------------------------------------------------------
// <auto-generated>
//     This code was generated by a tool.
//     Runtime Version:4.0.30319.239
//
//     Changes to this file may cause incorrect behavior and will be lost if
//     the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------
 
namespace LocalDBDemo
{
	using System.Data.Linq;
	using System.Data.Linq.Mapping;
	using System.Data;
	using System.Collections.Generic;
	using System.Reflection;
	using System.Linq;
	using System.Linq.Expressions;
	using System.ComponentModel;
	using System;
	
	
	[global::System.Data.Linq.Mapping.DatabaseAttribute(Name="DBWinPhone")]
	public partial class DBWinPhoneDataContext : System.Data.Linq.DataContext
	{
		
		private static System.Data.Linq.Mapping.MappingSource mappingSource 
                          = new AttributeMappingSource();

Como se observa en el código el namespace es el mismo que colocamos en la sentencia de la ventana de comandos, de igual manera podemos ver le nombre de la clase que también corresponde al nombre utilizado en la sentencia.

 

Lo siguiente que debemos hacer con la clase DataContext generada es eliminar dos de los cuatro constructores de la clase, si los dejamos, al compilar la clase en nuestro proyecto vamos a tener errores pues estos constructores no son soportados por el espacio de nombres System.Data.Linq.

 

public DBWinPhoneDataContext(string connection) :  base(connection, mappingSource)
{
	OnCreated();
}
 
public DBWinPhoneDataContext(System.Data.IDbConnection connection) :  base(connection, mappingSource)
{
	OnCreated();
}
 
public DBWinPhoneDataContext(string connection, 
                System.Data.Linq.Mapping.MappingSource mappingSource) :  base(connection, mappingSource)
{
	OnCreated();
}
 
public DBWinPhoneDataContext(System.Data.IDbConnection connection, 
                System.Data.Linq.Mapping.MappingSource mappingSource) :  base(connection, mappingSource)
{
	OnCreated();
}

Los constructores señalados en color amarillo son los que deben eliminarse de la clase de DataContext generada, al eliminarlos y compilar, los errores van a desaparecer.

Al finalizar, grabamos la clase y la adicionamos a nuestro proyecto de manejo de bases de datos locales en Windows Phone 7.5.

 

Bien, este es el primer artículo sobre este tema, en próximos días estaré publicando la manera como vamos a utilizar y como incorporar esta clase a nuestro proyecto de Windows Phone 7.5

 

Hasta la próxima!  Feliz desarrollo!