Universal Windows Platform con Xamarin

Hola,

Les comparto este vídeo con el procedimiento de como utilizar Xamarin.Forms para crear aplicaciones para Windows 10 o de la llamada Plataforma Universal de Windows.

Xamarin 4 Party Ciudad de México

El pasado jueves 17 de Diciembre se llevo a cabo una Xamarin 4 Party en la ciudad de México.
En las oficinas de Microsoft México tuve la oportunidad de dar una serie de charlas sobre las novedades que tiene la versión 4 de Xamarin la cual fue lanzada en noviembre de este año.
Los temas fueron:

• La plataforma Xamarin y Xamarin University
  
• Xamarin.Forms 2.0
  
• Xamarin Insigths
  
• Xamarin UI Test

A continuación les dejo la galería de fotos del evento.
 
Y también les comparto las presentaciones que sirvieron de apoyo para mis exposiciones.

Usando SQLite .NET multiplataforma en Xamarin Android, Xamarin IOS, Windows Phone y Windows Store (Parte 3 Android)

En este tercera publicación el turno es para Xamarin Android al igual que la parte anterior no voy a entrar a fondo a los pasos que ya se hicieron anteriormente (Parte 1 y Parte 2).
El primer paso igual que en ocasiones anteriores es crear un proyecto para Xamarin Android

El paso siguiente es enlazar Core mediante el project linker, como lo explique en la primer publicación.
Utilizando SQLite .NET en el proyecto de Android
Con Xamarin Android no hay que agregar referencias extra para hacer funcionar SQLite, por lo cual podemos pasar a desarrollar la interfaz y funcionalidad con solo enlazar Core que contiene los archivos de SQLite .Net.
La interfaz va a contener los mismos campos que las aplicaciones de WP y WS.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:text="Nombre"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView4" />
    <EditText
        android:inputType="textPersonName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edtName" />
    <TextView
        android:text="Edad"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView3" />
    <EditText
        android:inputType="number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edtAge" />
    <TextView
        android:text="Correo Electrónico"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2" />
    <EditText
        android:inputType="textEmailAddress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edtMail" />
    <TextView
        android:text="Teléfono"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1" />
    <EditText
        android:inputType="phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edtPhone" />
    <Button
        android:id="@+id/btnSave"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Guardar" />
    <Button
        android:text="Búsqueda"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnSearch" />
</LinearLayout>

El código de la funcionalidad es muy parecido, lo único que es diferente es lo referente a la interacción con la interfaz de usuario.

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using SQL.Core.Core;
using System.IO;

namespace SQL.Droid
{
    [Activity(Label = "SQL.Droid", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            Button btnSave = FindViewById<Button>(Resource.Id.btnSave);
            btnSave.Click += btnSave_Click;
            
            Button btnSearch = FindViewById<Button>(Resource.Id.btnSearch);
            btnSearch.Click += btnSearch_Click;

            InitializateDB();
        }

        void btnSearch_Click(object sender, EventArgs e)
        {
            Intent intent = new Intent(this,typeof(SearchActivity));
            StartActivity(intent);
        }
       
        void btnSave_Click(object sender, EventArgs e)
        {
            var edtName = FindViewById<EditText>(Resource.Id.edtName);
            var edtAge = FindViewById<EditText>(Resource.Id.edtAge);
            var edtPhone = FindViewById<EditText>(Resource.Id.edtPhone);
            var edtMail = FindViewById<EditText>(Resource.Id.edtMail);

            Contact contact = new Contact(edtName.Text,int.Parse(edtAge.Text), edtPhone.Text, edtMail.Text);
            crud.SaveValue<Contact>(contact);

        }

        CRUDManager crud;
        void InitializateDB()
        {
            var sqliteFilename = "ContactsDb";
            var path = Path.Combine(System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal), sqliteFilename); ;

            crud = new CRUDManager(path);

           

        }

    }
}

Para la segunda pantalla la cual muestra los resultados, voy a agregar el código de dos componentes uno es la plantilla xml con la que se mostraran los diferentes campos en la lista de resultados.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
           android:orientation="horizontal"
           android:minWidth="25px"
           android:minHeight="25px"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:id="@+id/Container"
           android:layout_marginTop="15dp"
           
           android:paddingLeft="20dp">
  <LinearLayout
      android:orientation="vertical"
      android:minWidth="25px"
      android:minHeight="25px"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/linearLayout28">
    <TextView
        android:text="Text"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:id="@+id/txvName"
        android:textSize="20sp"
        android:textColor="#005DAA" />
    <TextView
        android:text="Text"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:id="@+id/txvAge" />
    <TextView
      android:text="Text"
      android:layout_height="match_parent"
      android:layout_width="wrap_content"
      android:id="@+id/txvMail" />
    <TextView
        android:text="Text"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:id="@+id/txvPhone" />
  </LinearLayout>

</LinearLayout>

El otro es la clase “Adapter” que va a funcionar como fuente de datos de la lista que mostrara los resultados.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using SQL.Core.Core;

namespace SQL.Droid
{
    class ContactAdapter : BaseAdapter
    {

        private Activity activity;
        private List<Contact> data;
        private static LayoutInflater inflater = null;


        public ContactAdapter(Activity activity, List<Contact> data)
        {
            this.activity = activity;
            this.data = data;
            inflater = (LayoutInflater)activity.GetSystemService(Context.LayoutInflaterService);

        }

        public Contact GetContact(int position)
        {
            return data[position];
        }


        public override int Count
        {
            get { return data.Count; }
        }

        public override Java.Lang.Object GetItem(int position)
        {
            return position;
        }

        public override long GetItemId(int position)
        {
            return position;
        }

        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            View vi = convertView;
            if (convertView == null)
                vi = inflater.Inflate(Resource.Layout.ContactRow, null);

            TextView name = (TextView)vi.FindViewById(Resource.Id.txvName);
            TextView age = (TextView)vi.FindViewById(Resource.Id.txvAge);
            TextView mail = (TextView)vi.FindViewById(Resource.Id.txvMail);
            TextView phone = (TextView)vi.FindViewById(Resource.Id.txvPhone);
            

            name.Text = data[position].Name;
            age.Text = data[position].Age.ToString();
            mail.Text = data[position].Mail;
            phone.Text = data[position].PhoneNumber;
          

            return vi;
        }
    }
}

Finalmente la pantalla creada es la siguiente:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <EditText
        android:inputType="textPersonName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edtName" />
    <Button
        android:text="Buscar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnSearch" />
    <Button
        android:text="Mostrar Todos"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnAllItems" />
    <ListView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:id="@+id/lvResults" />
    <Button
        android:text="Eliminar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnDelete" />
</LinearLayout>

Y su respectiva clase C# para la funcionalidad, al igual que con la primer pantalla la mayoría de los cambios son relativos a la interfaz de usuario

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using SQL.Core.Core;
using System.IO;

namespace SQL.Droid
{
    [Activity(Label = "SearchActivity")]
    public class SearchActivity : Activity
    {
        ListView lvResults;
        Contact selected;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            SetContentView(Resource.Layout.Search);
            Button btnSearch = FindViewById<Button>(Resource.Id.btnSearch);
            btnSearch.Click += btnSearch_Click;

            Button btnAllItems = FindViewById<Button>(Resource.Id.btnAllItems);
            btnAllItems.Click += btnAllItems_Click;

            Button btnDelete = FindViewById<Button>(Resource.Id.btnDelete);
            btnDelete.Click += btnDelete_Click;

            lvResults = FindViewById<ListView>(Resource.Id.lvResults);
            lvResults.ItemClick += lvResults_ItemClick;

            InitializateDB();
        }

        void lvResults_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
        {
            selected = ((ContactAdapter)lvResults.Adapter).GetContact(e.Position);
        }

        

        void btnDelete_Click(object sender, EventArgs e)
        {
            if (selected != null)
            {
                crud.DeleteValue<Contact>(selected);
                lvResults.Adapter = new ContactAdapter(this, crud.GetAllItems<Contact>());

            }
        }

        


        void btnAllItems_Click(object sender, EventArgs e)
        {

            lvResults.Adapter = new ContactAdapter(this,crud.GetAllItems<Contact>());
        }

        CRUDManager crud;
        void InitializateDB()
        {
            var sqliteFilename = "ContactsDb";
            var path = Path.Combine(System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal), sqliteFilename); ;

            crud = new CRUDManager(path);



        }

        void btnSearch_Click(object sender, EventArgs e)
        {
            var lvResults = FindViewById<ListView>(Resource.Id.lvResults);

            lvResults.Adapter = new ContactAdapter(this,
                new List<Contact>() { crud.GetItem<Contact>(FindViewById<EditText>(Resource.Id.edtName).Text) });
        }
    }
}

Con esto queda concluido el proyecto, al igual que en los casos anteriores dejo el proyecto de Visual Studio http://1drv.ms/1aS1dTL

Serie de vídeos en español sobre Xamarin en Microsoft Channel 9

El día de hoy se publico el primer vídeo de una serie de vídeos sobre desarrollo con Xamarin, estos vídeos van a abarcar los temas básicos para comenzar a desarrollar apps IOS y Android y lo mejor de todo es que estarán en español.

En este primer vídeo hablo sobre los productos que ofrece Xamarin, cuales son las ventajas de utilizar la plataforma en el desarrollo de apps para IOS y Android; y también muestro como crear una cuenta con licencia de tipo Starter para comenzar a crear proyectos desde Visual Studio. 

Sin mas que decir este es el vídeo:

Usando SQLite .NET multiplataforma en Xamarin Android, Xamarin IOS, Windows Phone y Windows Store (Parte 2 WS)

Al igual que en el caso de Windows Phone lo primero es crear un proyecto nuevo, enlazarlo con Project Linker y agregar la referencia a una extensión como se hizo en la primera parte de este tutorial, por este motivo no me detendré en algunos pasos que se repiten en esta segunda parte y me enfocare a lo especifico de Windows Store.
Primero generamos el proyecto nuevo


El siguiente paso sería enlazar el proyecto Core a este que acabamos de crear del mismo modo en que se hizo con Windows Phone
Después de realizado lo anterior hay que instalar la extensión “SQLite for Windows Runtime(Windows 8.1)” desde el administrador de extensiones de Visual Studio (Menú Herramientas/Actualizaciones y extensiones)

Finalmente agregamos la referencia a esta extensión en nuestro proyecto.

Un detalle importante es que se debe crear un paquete de nuestra aplicación por arquitectura (x86,x64 o ARM) por lo cual hay que quitar esta referencia y volverla a agregar cada que cambiemos la arquitectura de lo contrario obtendremos la excepción “An exception of type 'System.BadImageFormatException' occurred in SQL.WS.exe but was not handled in user code”.  Esta excepción se debe a que la extensión agrega los paquetes específicos de la arquitectura que este definida en el momento en que se agrega la referencia.

Utilizando SQLite en el proyecto de Windows Store

Como ya tenemos desarrollada nuestra clase para administrar nuestra base de datos local (CRUDManager) y en pasos anteriores ya enlazamos Core a este proyecto solo nos resta generar la funcionalidad especifica de la plataforma, la cual básicamente es la interfaz de usuario y las llamadas a las funciones de CRUDManager.
En este caso el código es muy similar al de Windows Phone al ambos usar XAML como lenguaje para generar la interfaz de usuario. Aprovechando el tamaño de la pantalla y no dedicándole mucho tiempo al diseño voy a poner toda la funcionalidad en una misma pantalla a diferencia de Windows Phone que estaba acomodada por dos pantallas.

<Page
    x:Class="SQL.WS.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SQL.WS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Orientation="Horizontal">
            <StackPanel Width="320">
                <TextBlock FontSize="40">Guadar contactos</TextBlock>
                <TextBlock FontSize="20" >Nombre</TextBlock>
                <TextBox x:Name="txtName"></TextBox>
                <TextBlock FontSize="20">Edad</TextBlock>
                <TextBox x:Name="txtAge"></TextBox>
                <TextBlock FontSize="20">Correo Electrónico</TextBlock>
                <TextBox x:Name="txtMail"></TextBox>
                <TextBlock FontSize="20">Teléfono</TextBlock>
                <TextBox x:Name="txtPhoneNumber"></TextBox>
                <Button x:Name="btnSave" Margin="0,0,-3,0" Width="323" Click="btnSave_Click">Guardar</Button>

            </StackPanel>
            <StackPanel Width="300" Margin="100 0 0 0">
                <TextBlock FontSize="40">Buscar contactos</TextBlock>
                <TextBlock FontSize="20">Nombre</TextBlock>
                <TextBox x:Name="txtSName"></TextBox>
                <Button x:Name="btnSearch" Click="btnSearch_Click" Margin="0,0,-3,0" Width="303">Buscar</Button>
                <Button x:Name="btnAllItems" Click="btnAllItems_Click" Width="303" Margin="0,0,-3,0">Mostrar Todos</Button>
                <ListBox x:Name="lbResults" Height="250">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock FontWeight="Bold">Nombre</TextBlock>
                                <TextBlock Text="{Binding Name}"></TextBlock>
                                <TextBlock FontWeight="Bold">Edad</TextBlock>
                                <TextBlock Text="{Binding Age}"></TextBlock>
                                <TextBlock FontWeight="Bold">Correo Electrónico</TextBlock>
                                <TextBlock Text="{Binding Mail}"></TextBlock>
                                <TextBlock FontWeight="Bold">Teléfono</TextBlock>
                                <TextBlock Text="{Binding PhoneNumber}"></TextBlock>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
                <Button x:Name="btnDelete" Width="293" Click="btnDelete_Click">Eliminar seleccionado</Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</Page>

Finalmente el código que da funcionalidad a esta interfaz es prácticamente el mismo que para WP

using SQL.Core.Core;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace SQL.WS
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            InitializateDB();
        }

        CRUDManager crud;
        void InitializateDB()
        {
            var sqliteFilename = "ContactsDb";
            var path = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, sqliteFilename); ;

            crud = new CRUDManager(path);
        }

        private void btnSave_Click(object sender, RoutedEventArgs e)
        {
            Contact contact =
                new Contact(txtName.Text, int.Parse(txtAge.Text), txtPhoneNumber.Text, txtMail.Text);

            crud.SaveValue<Contact>(contact);
            lbResults.ItemsSource = crud.GetAllItems<Contact>();
        }

        private void btnSearch_Click(object sender, RoutedEventArgs e)
        {
            //Buscamos el contacto que coincida con lo introducido por el usuario
            lbResults.ItemsSource = new List<Contact> { crud.GetItem<Contact>(txtName.Text) };
        }

        private void btnAllItems_Click(object sender, RoutedEventArgs e)
        {
            //Mostramos todos los registros
            lbResults.ItemsSource = crud.GetAllItems<Contact>();
        }



        private void btnDelete_Click(object sender, RoutedEventArgs e)
        {
            //Eliminamos el contacto seleccionado
            crud.Delete<Contact>(((Contact)lbResults.SelectedItem).Key);
            lbResults.ItemsSource = null;
        }
    }
}

Usando SQLite .NET multiplataforma en Xamarin Android, Xamarin IOS, Windows Phone y Windows Store (Parte 1 WP)

En esta serie de publicaciones voy a mostrar cómo crear una aplicación multiplataforma que permita crear bases de datos locales SQLite usando SQLite.Net para las plataformas:

• Windows Phone 8.1 (Parte 1)
• Windows Store (Parte 2)
• IOS y Android (Parte 3)

Para empezar Vamos a generar una solución en Visual Studio la cual contenga los 4 proyectos que se van a usar a lo largo de este tutorial. Para este ejemplo se va a compartir el código mediante un proyecto Core que va a ser enlazado a los diferentes proyectos de la aplicación, en un futuro escribiré una publicación para mostrar el uso de SQLite usando una Librería de clases portable.

• Librería de clases de C# (SQL.Core)
• Proyecto de Windows Phone (SQL.WP)
• Proyecto de Windows Store (SQL.WS)
• Proyecto de Xamarin Android (SQL.Droid)
• Proyecto de Xamarin IOS (SQL.IOS)

Creando el proyecto Core

Charla sobre Xamarin en TelmexHub (12 de Septiembre 4:00pm)

El próximo 12 de septiembre a las 4:00pm estaré en TelmexHub hablando sobre Xamarin y sus ventajas en el desarrollo multiplataforma.

El objetivo de la charla es conocer el porque Xamarin es una excelente herramienta para desarrollar Apps para IOS y Android además de poder utilizar ese mismo código en aplicaciones Windows Phone, Desktop, Web y otras plataformas que usan C# como lenguaje nativo.

Esta platica no será de desarrollar mucho código por lo cual no es necesario asistir con equipo a menos de que quieran realizar el ejemplo, aunque esta es mas una platica para dar a conocer como funciona Xamarin y hablar sobre como es el tema de las licencias y los beneficios que existen actualmente para los estudiantes.

Después de esta platica tengo planeado ofrecer un curso de C# como preparación a un futuro curso de Xamarin Android/IOS y apps para Windows Store.

Finalmente quien guste asistir debe registrarse en la pagina del evento: http://telmexhub.org/evento/3607

Del mismo modo les adjunto la página de Meetup donde se van a ir poniendo las fechas de los eventos futuros http://www.meetup.com/es/Devs-Xamarin-Android-IOS-y-Windows-Ciudad-de-Mexico/events/224780385/