¿Cómo crear una aplicación Xamarin.Forms?

Buenas!

Continuando con el conjunto de posts asociados a Xamarin vamos a ver cómo crear una aplicación del tipo Xamarin.Forms.

Como hemos mencionado en el post anterior, Xamarin.Forms es la variante de enfoque que nos permite reutilizar código asociado a la lógica de presentación. Con el mismo podremos llegar al extremo (dependiendo del caso es posible de que sea así) de desarrollar solamente una vez el código para múltiples plataformas.

Lo primero que deberemos hacer es crear el tipo de proyecto asociado. Para ello dentro de las opciones para crearlo seleccionamos Cross-Platform > Blank App (Xamarin.Forms portable):

xamarinformsinicial-crearproyecto

Lo que pasará aquí es que nos creará toda la estructura para todas las plataformas que son soportadas por Visual Studio de forma inicial, además de que tengamos su SDK instalado. Esto hace que la creación de toda la solución lleve un par de minutos (al menos en mi caso), por lo que podemos aprovechar para tomarnos un café..XamarinFormsInicial - Coffee.gif

Una vez finalizado este proceso tendremos nuestra estructura general creada, hagamos un repaso de la misma:

xamarinformsinicial-estructuraproyectos

  1. Este es el proyecto clave de Xamarin.Forms, ya que es allí donde estará toda la lógica de presentación compartida para todas las demás plataformas. En nuestro día a día, será aquí donde haremos nuestro trabajo.
  2. Luego tendremos todos los proyectos target, uno para cada plataforma para la cual deseemos disponibilizar nuestra aplicación. Estas aplicaciones serán clientes delgados en el sentido que habrá poca (o casi nula) lógica. Lo que habitualmente haremos aquí es el desarrollo de aquellas capacidades que son puntuales de cada plataforma.

El esquema de interacción entre ambas partes es relativamente sencillo. El punto de entrada de la aplicación compartida es la clase App.cs a través de su constructor, es allí donde agregaremos la lógica necesaria para lograr la representación de nuestra aplicación. En este sencillo ejemplo nuestra aplicación solamente mostrará un texto estático, lo cual logramos con el siguiente código:

En esta lógica estamos definiendo el tipo de contenido que tendrá la página principal, el cual es de tipo ContentPage (el más básico de todos tipos disponibles), cuyo contenido es un StackLayout (podríamos establecer una analogía con un elemento div de HTML) que contiene un texto (tipo Label) con nuestro contenido.

Ahora pasemos al planteo de los proyectos target. Todos estos proyectos son 100% nativos de la plataforma y podremos hacer lo que queramos sobre los mismos escribiendo nuestra lógica en C#. En este ejemplo no agregaremos lógica adicional, sino que veremos cómo se enlaza con Xamarin.Forms. Como es de esperar, estos proyectos contienen la referencia al proyecto que contiene la lógica de presentación compartida (nunca al revés!!), además de contener las referencias de Xamarin.Forms a través de los distintos paquetes Nuget asociados:

xamarinformsinicial-referenciasandroid
Referencias proyecto Android
xamarinformsinicial-referenciaswindows
Referencias proyecto Windows 8.1

Como se puede apreciar, ambas plataformas tienen distintos conjuntos de paquetes específicos de Xamarin.Forms, necesarios para el correcto funcionamiento de este esquema de reutilización de código.

Lo siguiente será ver cómo hacemos para que desde nuestra aplicación target indiquemos la ejecución de nuestra lógica de presentación compartida. Acá como ya podemos ir imaginando dependerá totalmente de cada plataforma el dónde se ubica esta lógica, aunque es muy similar para todos los casos. Lo que vamos a ver es el comportamiento por defecto de la creación del proyecto de template, pero podemos agregar lo que sea necesario (por ejemplo una pantalla nativa de cada plataforma y que luego vaya a la parte compartida).

Android:

La lógica se ubicará en la actividad principal, denominada normalmente como MainActivity. Allí podemos ver algunas cosas en particular:

  1. Línea 12: la clase MainActivity hereda de una clase base de Xamarin.Forms
  2. Línea 18: dentro del método OnCreate se inicializa la aplicación de Xamarin.Forms
  3. Línea 19: finalmente se instancia la clase App (de nuestro proyecto compartido) y se invoca al método LoadApplication con dicha instancia.

Estos son los puntos en los que podemos apreciar una diferencia con respecto a lo que sería una aplicación Android nativa, donde también tendríamos esta clase pero con diferencias en los puntos marcados.

Windows 8.1:

En el caso de aplicaciones de Windows 8.1 es similar, salvo que la lógica está distribuida en dos clases, una de la aplicación (App.xaml.cs – línea 40) y otra en la pantalla en sí que se invoca (MainPage.xaml.cs – línea 9). Pero como se puede apreciar hay muchas similitudes en esas líneas de código puntuales:

Resultado final:

Finalmente probemos ejecutar ambas aplicaciones, la de Android y la de Windows 8.1 con el código que hemos mostrado:

xamarinformsinicial-resultadoandroid
Resultado app Android
xamarinformsinicial-resultadowindows
Resultado app Windows 8.1

Si bien es un ejemplo muy sencillo podemos ver cómo con este enfoque tenemos la posibilidad para lograr un estructura de proyectos mobile adecuada con múltiples plataformas y unificando todo el código de presentación en un solo proyecto, sin necesidad de conocer los elementos propios de cada una de las plataformas con sus particularidades.

Espero que les sea de utilidad, gracias por leer!

Anuncios

5 comentarios en “¿Cómo crear una aplicación Xamarin.Forms?

    • Buenas Carlos!
      Más que licencia tener una Mac en la misma red para que desde Visual Studio y Xamarin se conecten y realicen allí ciertas operaciones. Tengo que ver si puedo conseguir alguna para hacer algunos posts sobre iOS explicando eso en detalle.

      Saludos!!

      Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s