TUTORIAL: Desarrollo de Aplicación para iOS con Xamarin

Como se platicó en otra entrada de este blog, Xamarin es un CrossPlatform que nos permite escribir aplicaciones móviles tanto para Android como para iOS y Windows Phone; en esta entrada cubriremos el desarrollo de una aplicación sencilla para iPhone usando esta plataforma. 

Con Xamarin.iOS podemos crear aplicaciones nativas de iOS utilizando los mismos controles de usuario que se usarían cuando se desarrolla bajo el lenguaje de programación Objective-C y Xcode. Usando esta herramienta se cuenta con la flexibilidad de un leguaje moderno y basto como lo es C# en combinación con las facilidades y el poder que proporciona la BCL de .Net (Base Class Library) y con el IDE de primera clase Xamarin Studio.

En adición y como ventaja, Xamarin Studio se integra directamente con Xcode con lo cual contamos con la potencia de su IB (Interface Builder) para crear la interfaz de usuario de las aplicaciones que se desarrollan usando Xamarin Studio.

Creando un nuevo proyecto en Xamarin Studio

Entonces, comencemos abriendo Xamarin Studio:

Después de abrir Xamarin Studio, vamos a crear un proyecto simple para empezar con Xamarin.iOS:

Del menú File → New → Solution seleccionamos el menú iOS → iPhoneStoryBoard → Single View Application y nombramos la aplicación como HelloWorldiOS:

Una vez creado el proyecto, la estructura que nos muestra Xamarin Studio es la siguiente:

Xamarin Studio usa exactamente la misma estructura de soluciones y proyectos como lo hace Visual Studio. Una solución es un contenedor que puede almacenar uno o varios proyectos; los proyectos pueden incluir aplicaciones, librerías, aplicaciones de pruebas, etc. Así, la estructura que tiene el proyecto que creamos es la siguiente:

• Main.cs Este archivo contiene el punto de entrada (Main Entry Point) de la aplicación.
• AppDelegate.cs Este archivo contiene la clase principal de la aplicación que es responsable de escuchar y manejar los eventos del sistema operativo.
• HelloWorldiOSViewController.cs Este archivo contiene la clase que controla el ciclo de vida de la pantalla principal.   
• HelloWorldiOSViewController.designer.cs Este archivo contiene la definición de objetos y propiedades que se ligan con la principal pantalla de usuario.      MainStoryBoard.storyboard Este es el archivo utilizado para crear las interfaces de usuario con Xcode. Los Storyboards definen vistas, controladores, y el mecanismo de navegación entre pantallas.
• Info.plist Este es el archivo que contiene las propiedades generales de la aplicación, tal como nombre, íconos, etc.
• Resources El contenido de este folder se coipa a la raíz de la aplicación ligado en tiempo de compilación.

   

  

Ahora que sabemos de qué está compuesto el proyecto empecemos por echar un vistazo a la creación de la interfaz de usuario con Xcode.

Creando la interfaz de usuario

Para crear la interfaz de usuario utilizaremos la herramienta de Xcode, Interface Builder el cual nos permite crear la pantalla del usuario a través de un diseñador. Xamarin se integra con Xcode y nos permite utilizar las mismas herramientas de diseño de interfaz de usuario que se utilizan de forma nativa sin ningún problema.

Para empezar a definir la interfaz de usuario, vamos a abrir el archivo MainStoryboard.storyboard y con esto abrirá una nueva ventana de Xcode para editar la UI.

Para crear la interfaz de usuario empecemos por arrastrar lo siguiente desde la librería de objetos ubicada en la parte inferior derecha de la ventana de Xcode al área de diseño:

·        Dos Labels

·        TextField

·        Dos Botones

Así mismo Xcode cuenta con un área de inspección del documento, el cual nos permite identificar la jerarquía en la que están distribuidos los controles en la pantalla y que es útil cuando la pantalla es compleja.

Agregando “Outlets” a la interfaz gráfica

Para usar el diseñador, Xamarin Studio creó un archivo llamado HelloWorldiOSViewController.h como parte del proyecto de Xcode. Éste es un archivo de “respaldo” de Xcode que Xamarin Studio creó para que sirva como espejo al archivo Designer.cs. Usaremos este archivo para declarar nuestros outlets y actions. Xamarin Studio se encargará de sincronizar  los cambios a este archivo con el archivo Designer.cs.

Definiendo “Outlets” y “Actions”

En iOS, para que un control sea utilizable desde la parte del código no basta con arrastrar éste al área del diseñador. Para accesar a los controles desde el código Apple nos proporciona dos opciones:

-Outlets. Los outlets son análogos a las propiedades. Si enlazamos un control a un Outlet, éste es expuesto a disposición del código como una propiedad, y así podemos modificarlo dinámicamente agregando llamadas a métodos, manejadores de eventos, etc.

-Actions Las acciones sin típicamente usadas cuando queremos enlazar varios controles a una sola acción.

En Xcode, podemos crear Outlets o Actions en código arrastrando los controles a éste. Específicamente, para crear un Outlet o un Action, elegimos el control que queremos enlazar al código, sostenemos la tecla Control y arrastramos el control a la sección del código, después de la definición de interface del View Controller.

Para abrir el área que muestra el código, debemos seleccionar la opción Editor Assistant 

En el acto seguido a arrastrar al área de edición, se abrirá un pop-up el cual especificamos que se trata de un Outlet y establecemos un nombre para éste.

Así, repetimos aplicando el procedimiento para agregar como Outlet el botón say hello al área de edición de código. Al terminar guardamos los cambios en Xcode para que Xamarin actualice los cambios al proyecto.

Si en este momento volvemos a Xamarin Studio y abrimos el archivo designer.cs, veremos que éste contiene la definición del botón que recién agregamos al documento como un Outlet.

Ahora, regresemos a Xcode y agreguemos el otro botón y el textfield como un Outlet al área de edición y así mismo, verifiquemos que el designer.cs en Xamarin estudio se haya actualizado. Sino es así, vuelve a Xcode y guarda los cambios.

 

Agregando código a los botones

Para agregar funcionalidad a los botones, abrimos en Xamarin Studio el archivo HelloWorldiOSViewController.cs y agregamos lo siguiente en el método ViewDidLoad

Después de hacer esto es tiempo de probar la aplicación, así, presionamos Cmd + B o presionamos el botón play en la barra superior de Xamarin Studio.

Una vez que carga la aplicación en el simulador veremos lo siguiente al escribir un nombre en la caja de texto y presionar el botón Say Hello, al que le agregamos el código anterior.

 

Modificando la aplicación para hacerla multipantalla

La aplicación que estamos construyendo usará un NavigationController para administrar la navegación entre múltiples pantallas.

El NavigationController facilita principalmente dos cosas:

-Provee navegación hacía adelante. El NavigationController usa la navegación jerárquica en la cual las pantallas son “empujadas” dentro de una pila de navegación. El NavigationController provee un método que permite “empujar” los controladores dentro de sí. Además administra la pila de navegación, incluyendo opcionalmente la animación de transición al nuevo controlador.

-Provee una barra de título con un botón de regreso. La parte superior del NavigationController es conocida como la barra de título y cuando se “empuja” un nuevo controlador dentro de éste automáticamente provee un botón de regreso el cual nos permite regresar a la pantalla anterior, adicionalmente brinda un área de título donde se puede mostrar el título de la pantalla actual.

Cabe mencionar que existen otras alternativas de navegación que pueden ser usadas en lugar de, o en conjunto con el NavigationController, por ejemplo el Tab Bar, o la Split View el cual nos muestra una jerarquía de Maestro-Detalle.

Para propósito de este ejemplo usaremos como herramienta de apoyo el storyboard para definir nuestra UI completa. Dichos storyboards son compilados individualmente para evitar cualquier retraso que pueda ser causado por  la carga de grandes pantallas.

Ahora que sabemos los beneficios del NavigationController vamos a implementarlo en la aplicación que hemos construido hasta el momento. Para esto debemos abrir nuestro archivo .storyboard para que se cargue en Xcode.

Lo primero que necesitamos hacer es crear nuestro NavigationController y establecer “HelloWorldiOSViewController” como la pantalla principal es decir, como la raíz del view controller:

Para esto vamos al menú Editor → Embed In → Navigation Controller

El IB de Xcode crea automáticamente el NavigationController y lo agrega al storyboard estableciendo nuestra pantalla como la vista principal o raíz del view controller.

Debemos notar las flechas tanto a la izquierda como a la derecha del Navigation Controller, éstas representan Segues; la flecha de la izquierda es conocida como Sourceless Segue  y la flecha que conecta los dos ítems con la línea y los dos puntos denota la relación con la vista raíz del controller.

El Sourceless Segue es la entrada por default en un storyboard, es decir, es el primer controlador que se ejecutará en la aplicación.

Si ejecutamos la aplicación en este momento, veremos que la pantalla principal del Navigation controller es la siguiente:

Una vez hecho esto crearemos el segundo view controller, para esto, arrastra un Table View Controller desde Object Library al diseñador.

  

Agregando a Push Segue

Para hacer que la tabla se muestre cuando se seleccione el botón, es necesario crear un Push Segue al Table Controller. Para esto, mantén presionada la tecla Ctrl y arrastra el botón Dawcons Services hasta el Table Controller, y después selecciona Push en el pop-up de Action Segue como se muestra:

Ahora cuando el usuario seleccione el botón Dawcons Services el Table View Controller se mostrará con una tabla vacía:

Implementando el Table Controller

Para implementar el Table Controller, es necesario tener una clase de Respaldo para el Table Controller en el storyboard; Xamarin Studio generará la clase de respaldo que podemos usar cuando cambiemos el nombre de la clase en Xcode.

Con el Table Controller seleccionado, debemos abrir el Identity Inspector (en la parte superior derecha) y cambiamos el nombre de la clase a DawconsServicesController, como se muestra:

Presionar Enter y volver a Xamarin Studio, notamos que ahora existe una clase con el nombre de DawconsServicesController.cs

Ahora estamos listos para implementar funcionalidad a esta clase y mostrar elementos en la tabla. El código que se implementa involucra el poblado de una tabla.

Vamos a agregar el siguiente código para la nueva clase:

using System;

using MonoTouch.Foundation;
using MonoTouch.UIKit;
using System.Collections.Generic;

namespace HelloWorldiOS
{
         public partial class DawconsServicesController : UITableViewController
         {
                   public List<String> services { get;set; }
                   public List<String> urls { get; set; }

                   static NSString servicesCellId = new NSString ("ServiceCell");

                   public DawconsServicesController (IntPtr handle) : base (handle)
                   {
                            TableView.RegisterClassForCellReuse (typeof(UITableViewCell), servicesCellId);
                            TableView.Source = new ServiceDataSource (this);

                            services = new List<String> ();
                            urls = new List<String> ();
                   }

                   class ServiceDataSource : UITableViewSource{
                            DawconsServicesController controller;
                            ServiceAlertDelegate alertDelegate;

                            public ServiceDataSource(DawconsServicesController controller){
                                      this.controller = controller;
                                      alertDelegate = new ServiceAlertDelegate();
                            }

                            public override int RowsInSection(UITableView tableView, int section){
                                      return controller.services.Count;
                            }

                            public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath){
                                      var cell = tableView.DequeueReusableCell (DawconsServicesController.servicesCellId);
                                      int row = indexPath.Row;

                                      cell.TextLabel.Text = controller.services [row];

                                      return cell;
                            }

                            public override void RowSelected (UITableView tableView, NSIndexPath indexPath)
                            {
                                      tableView.DeselectRow (indexPath, false);
                                      alertDelegate.ServiceDescription = controller.services [indexPath.Row];
                                      alertDelegate.ServiceUrl = controller.urls [indexPath.Row];

                                      var alert = new UIAlertView ("Info", "Would you like to browse to Dawcons Web Page?", alertDelegate, "No", "Yes");
                                      alert.Show ();
                            }
                   }

                   class ServiceAlertDelegate : UIAlertViewDelegate{

                            public String ServiceDescription { get; set; }
                            public String ServiceUrl { get; set; }

                            public override void Clicked(UIAlertView alertview, int buttonindex){
                                      if (buttonindex == 1) {
                                               var url = new NSUrl (ServiceUrl);
                                               if (UIApplication.SharedApplication.CanOpenUrl (url)) {
                                                        UIApplication.SharedApplication.OpenUrl (url);
                                               }

                                      }  else {
                                               UIAlertView alertDialog = new UIAlertView ("Hello", "you selected NO", null, "OK", null);
                                               alertDialog.Show ();
                                      }

                            }
                   }
         }
}

Navegando al detalle de servicios de la aplicación

Para poblar la lista de elementos en el Table View Controller, podemos establecer los elementos desde la pantalla principal haciendo uso del método PrepareForSegue, este método es llamado justo antes de la transición al controlador destino, el cual en este caso es una instancia de la clase DawconsServicesController. Para esto podemos escribir lo siguiente dado que nuestros elementos están en una simple lista de tipo String:

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
                   {
                            base.PrepareForSegue (segue, sender);

                            var dawconsServicesController = segue.DestinationViewController as DawconsServicesController;

                            if (dawconsServicesController != null) {
                                      List<String> lstServices = new List<String> ();
                                      lstServices.Add ("Enterprise Web Applications");
                                      lstServices.Add ("Enterprise Mobile Applications");
                                      lstServices.Add ("Consulting");
                                      lstServices.Add ("Outsourcing");

                                      List<String> lstUrls = new List<String> ();
                                      lstUrls.Add ("http://www.dawcons.com/softwareamedida.php");
                                      lstUrls.Add ("http://www.dawcons.com/mobileapps.php");
                                      lstUrls.Add ("http://www.dawcons.com/consultoria.php");
                                      lstUrls.Add ("http://www.dawcons.com/outsourcing.php");

                                      dawconsServicesController.services = lstServices;
                                      dawconsServicesController.urls = lstUrls;
                            }
                   }

Ahora si ejecutamos nuestra aplicación en este momento podemos ver las pantallas como sigue:

 

Cambiando el nombre de la aplicación

Para cambiar las propiedades generales de la App, debemos abrir el archivo info.plist el cual contiene una serie de opciones para personalizar la app, a continuación se muestran las pantallas de las secciones que nos interesan:

Cambiando el nombre de la aplicación:

Cambiando los íconos de la aplicación:

Para cambiar los íconos lo único que debemos hacer es ir a la sección iPhone Icons seleccionar el ícono que deseamos cambiar y seleccionar el nuevo.

Para cambiar la pantalla que se muestra al ejecutar la app, debemos hacer lo mismo que para los íconos solo que esta vez navegamos hasta la sección de iPhone Launch Images.

Una vez hecho lo anterior, la app queda como se observa a continuación:

Acerca del Autor

Víctor M. Rojas es un Ingeniero en Sistemas Computacionales certificado por Oracle como Java Asociated y Java Programmer egresado del I.T.S. de Teziutlán, Puebla. Con más de un año de experiencia profesional en Desarrollo de Software a la medida tanto en la plataforma Java como en la plataforma de .NET, actualmente colabora con Dawcons como Desarrollador en el área de software a la medida. Puedes contactarlo a través de la cuenta de correo vrojas@dawcons.com.