Creación de una aplicación de Xamarin.iOS con Elements API

  • Artículo

Este artículo se basa en la información presentada en el artículo Introducción al cuadro de diálogo MonoTouch. Presenta un tutorial que muestra cómo usar Elements API de MonoTouch.Dialog (MT.D) para empezar a compilar rápidamente una aplicación con MT.D.

En este tutorial, usaremos Elements API de MT.D para crear una aplicación de estilo maestro-detalle que muestre una lista de tareas. Cuando el usuario seleccione el botón + de la barra de navegación, se agregará una nueva fila a la tabla de la tarea. Al seleccionar la fila navegaremos a la pantalla de detalles que nos permite actualizar la descripción de la tarea y la fecha de vencimiento, como se ilustra a continuación:

Al seleccionar la fila navegaremos a la pantalla de detalles que nos permite actualizar la descripción de la tarea y la fecha de vencimiento

Configuración de MT.D

MT.D se distribuye con Xamarin.iOS. Para usarlo, haga clic con el botón derecho en el nodo Referencias de un proyecto de Xamarin.iOS en Visual Studio 2017 o Visual Studio para Mac y agregue una referencia al ensamblado MonoTouch.Dialog-1. A continuación, agregue using MonoTouch.Dialog instrucciones en el código fuente según sea necesario.

Tutorial de Elements API

En el artículo Introducción al cuadro de diálogo MonoTouch, adquirimos una sólida comprensión de las distintas partes de MT.D. Vamos a usar Elements API para reunirlas todas en una aplicación.

Configuración de la aplicación de varias pantallas

Para iniciar el proceso de creación de la pantalla, MonoTouch.Dialog crea un DialogViewController, y después agrega un RootElement.

Para crear una aplicación multipantalla con MonoTouch.Dialog, necesitamos:

  1. Creación de UINavigationController.
  2. Creación de DialogViewController.
  3. Agregue el DialogViewController como raíz del UINavigationController.
  4. Agregue un RootElement al DialogViewController.
  5. Agregue Sections y Elements al RootElement.

Uso de un UINavigationController

Para crear una aplicación con estilo de navegación, necesitamos crear un UINavigationController y después agregarlo como RootViewController en el método FinishedLaunching del AppDelegate. Para que el UINavigationController funcione con MonoTouch.Dialog, agregamos un DialogViewController al UINavigationController como se muestra a continuación:

public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
    _window = new UIWindow (UIScreen.MainScreen.Bounds);
            
    _rootElement = new RootElement ("To Do List"){new Section ()};

    // code to create screens with MT.D will go here …

    _rootVC = new DialogViewController (_rootElement);
    _nav = new UINavigationController (_rootVC);
    _window.RootViewController = _nav;
    _window.MakeKeyAndVisible ();
            
    return true;
}

El código anterior crea una instancia de un RootElement y la pasa al DialogViewController. El DialogViewController siempre tiene un RootElement en la parte superior de su jerarquía. En este ejemplo, el RootElement se crea con la cadena "Lista de tareas pendientes", que sirve como título en la barra de navegación del controlador de navegación. En este punto, la ejecución de la aplicación presentaría la pantalla que se muestra a continuación:

La ejecución de la aplicación presentará la pantalla que se muestra aquí

Vamos a ver cómo usar la estructura jerárquica de Sections y Elements de MonoTouch.Dialog para agregar más pantallas.

Crear las pantallas de diálogo

Un DialogViewController es una subclase de UITableViewController que MonoTouch.Dialog usa para agregar pantallas. MonoTouch.Dialog crea pantallas añadiendo un RootElement a un DialogViewController, como vimos anteriormente. El RootElement puede tener instancias de Section que representan las secciones de una tabla. Las secciones están formadas por elementos, otras secciones o incluso otros RootElements. Al anidar RootElements, MonoTouch.Dialog crea automáticamente una aplicación de estilo de navegación, como veremos a continuación.

Uso de DialogViewController

La DialogViewController, al ser una subclase de UITableViewController, tiene como vista una UITableView. En este ejemplo, queremos agregar elementos a la tabla cada vez que se pulse el botón +. Como el DialogViewController se agregó a un UINavigationController, podemos usar la propiedad RightBarButton del NavigationItem para agregar el botón +, como se muestra a continuación:

_addButton = new UIBarButtonItem (UIBarButtonSystemItem.Add);
_rootVC.NavigationItem.RightBarButtonItem = _addButton;

Cuando creamos el RootElement anteriormente, le pasamos una única instancia de Section para poder agregar elementos a medida que el botón + es pulsado por el usuario. Podemos usar el siguiente código para lograrlo en el controlador de eventos del botón:

_addButton.Clicked += (sender, e) => {                
    ++n;
                
    var task = new Task{Name = "task " + n, DueDate = DateTime.Now};
                
    var taskElement = new RootElement (task.Name) {
        new Section () {
            new EntryElement (task.Name, "Enter task description", task.Description)
        },
        new Section () {
            new DateElement ("Due Date", task.DueDate)
        }
    };
    _rootElement [0].Add (taskElement);
};

Este código crea un nuevo objeto Task cada vez que se pulsa el botón. A continuación se muestra la implementación sencilla de la clase Task:

public class Task
{   
    public Task ()
    {
    }
      
    public string Name { get; set; }
        
    public string Description { get; set; }

    public DateTime DueDate { get; set; }
}

La propiedad Name de la tarea se usa para crear el título de RootElement junto con una variable de contador llamada n que se incrementa para cada nueva tarea. MonoTouch.Dialog convierte los elementos en las filas que se agregan al TableView cuando se agrega cada taskElement.

Presentación y administración de pantallas de diálogo

Usamos un RootElement para que MonoTouch.Dialog cree automáticamente una nueva pantalla para los detalles de cada tarea y navegue hasta ella cuando se seleccione una fila.

La propia pantalla de detalle de la tarea se compone de dos secciones; cada una de ellas contiene un único elemento. El primer elemento se crea a partir de un EntryElement para proporcionar una fila editable para la propiedad Description de la tarea. Cuando se selecciona el elemento, se presenta un teclado para la edición de texto, como se muestra a continuación:

Cuando se selecciona el elemento, se presenta un teclado para la edición de texto, como se muestra

La segunda sección contiene un DateElement que nos permite administrar la propiedad DueDate de la tarea. Al seleccionar la fecha se carga automáticamente un selector de fecha como el que se muestra:

Al seleccionar la fecha se carga automáticamente un selector de fecha como

Tanto en EntryElement como en DateElement (o para cualquier elemento de entrada de datos en MonoTouch.Dialog), cualquier cambio en los valores se conserva automáticamente. Podemos demostrarlo editando la fecha y después navegando hacia delante y hacia atrás entre la pantalla raíz y los distintos detalles de la tarea, donde se conservan los valores de las pantallas de detalle.

Resumen

Este artículo ha presentado un tutorial que muestra cómo usar la API de Elements API de MonoTouch.Dialog. Ha cubierto los pasos básicos para crear una aplicación multipantalla con MT.D, incluyendo cómo usar un DialogViewController y cómo agregar Elementos y Secciones para crear pantallas. Además, ha mostrado cómo usar MT.D junto con un UINavigationController.