post thumbnail

iOS desde Cero: Controladores

Publicado Por: Oscar González, El 24/06/2013


Detalles del Curso:

Dificultad: Novato

Duración: 20 min


Bienvenidos una vez más a iOS desde Cero. En este capítulo de la serie vamos a empezar a desarrollar aplicaciones, ¡Yei!. Aprenderemos las habilidades básicas mínimas que necesitas saber para poder construir cualquier aplicación de iOS utilizando Xcode.


Modelo-Vista-Controlador (MVC)

El patrón de diseño de arquitectura o modelo de arquitectura de software MVC, es un patrón fundamental en el desarrollo de aplicaciones para iOS. Éste ha estado presente desde los años 70. Su filosofía parte principalmente de la idea de separar dependencias en tres módulos básicos para hacer el código más legible.

  • Modelos: Los modelos representan la lógica de la aplicación, generalmente son las clases de acceden a datos (persistencia).
  • Vistas: Las vistas son las interfaces gráficas que los usuarios ven.
  • Controladores: Son los encargados recibir los eventos disparados por las vistas y ejecutar las acciones correspondientes a dichos eventos en los modelos.

Lo bueno de esto es que es muy flexible. Dependiendo del nivel de complejidad de nuestra aplicación, éste patrón puede reducirse a solo vistas y controladores, como extenderse a usar más capas más allá de los modelos.

Básicamente el patrón MVC se representa de la siguiente manera:

1 - MVC-ios-desde-cero-controladores


Conectando la vista con el controlador

En Xcode las vistas vienen siendo los archivos .xib y los .storyboard, y los modelos y controladores son simplemente clases de Objective-C. Podrías no utilizar archivos para las vistas y generarlas por código desde los controladores, pero requiere mucho más trabajo, es preferible utilizar vistas siempre que se pueda.

Los objetos en los controladores que deben ser conectados con la interfaz se llaman outlets. Lo que debemos hacer en Xcode es conectar los outlets de los controladores con su representación gráfica:

2 - Conecciones Outlets - ios-desde-cero-controladores

Vamos a poner esto en práctica creando un nuevo proyecto en Xcode, haremos una app sencilla que permita a los usuarios introducir su nombre y les retorne un mensaje de saludo.

xcode-nuevo-proyecto-ios-desde-cero-controladores

Esta vez no vamos a seleccionar Use Storyboards, vamos a usar solo xibs, pero si seguiremos usando ARC (automatic reference counting), este es el standard que Apple quiere que todos usemos de ahora en adelante.

Una vez que tengamos la ventana principal de Xcode frente a nosotros, seleccionamos ViewController.xib del navegador de archivos y veremos entonces como el editor despliega el Interface Builder.

Vamos a agregar tres objetos a nuestra interfaz:

agregando-text-field-ios-desde-cero-controladores

  1. En la parte inferior del inspector escribimos text. En la lista que está inmediatamente arriba, seleccionamos Text Field y lo arrastramos hasta la interfaz. Yo lo voy a colocar en la parte superior y lo voy a estirar un poco para tener mejor visibilidad. Tomate la libertad de modificarlo como quieras (o puedas).

  2. En el inspector podemos editar algunas propiedades de los objetos que seleccionamos, juega con estos como quieras, es bueno que te familiarices con lo que puedes hacer a través Interface Builder porque así puedes sacar el máximo de él, ya verás en el futuro que hay algunas otras que solo pueden hacerse por código.

agragando-boton-ios-desde-cero-controladores

  1. Ahora agregamos un botón, este será el que el usuario debe presionar para recibir el mensaje de saludo. Igualmente puedes hacerle los cambios que quieras, yo voy a agrandarlo un poco para que sea más fácil de seleccionar.

agregando-label-ios-desde-cero-controladores

  1. Ahora solo hace falta agregar un Label para mostrarle el mensaje de saludo al usuario.

  2. Yo le coloqué un mensaje desde el inspector solo para saber donde está. Sin texto el label es completamente invisible. Luego por código reemplazaremos este mensaje.

Bien, ya tenemos nuestra interfaz lista, solo falta crear nuestros outlets en el código y conectarlos con la vista. La manera más fácil de hacerlo es la siguiente:

Seleccionamos el editor asistente para que Xcode coloque lado a lado, la vista y la clase controladora.

asistente-xcode-ios-desde-cero-controladores

Si su pantalla es pequeña como la que estoy usando en este momento (Macbook Pro 13') y el panel izquierdo de Interface Builder (Document Outline) les molesta, pueden colapsarlo haciendo click en el botón de la esquina inferior izquierda.

boton-ocultar-document-outline-ios-desde-cero-controladores

Si en el editor que aparece del lado derecho no muestra el header file: ViewController.h, puedes navegar hasta él haciendo click en el navegador superior del editor.

navegador-archivos-editor-ios-desde-cero-controladores

Manteniendo la tecla control presionada, hacemos click sobre el text field y arrastramos hasta el editor del lado derecho.

conectar-outlet-ios-desde-cero-controladores

Entonces aparecerá una pequeña ventana preguntándonos:

[agregar-outlet-ios-desde-cero-controladores][11]

  1. El tipo de conexión: Seleccionamos Outlet
  2. El nombre del atributo que vamos a crear: Yo lo llamé nameField, tu puedes llamarlo como quieras.
  3. En el tipo dejamos: UITextField, este es un objeto de UIKit, el framework de apple que contiene todos los elementos de interfaz gráfica de iOS. UITextField representa un campo de texto en código.
  4. Y por último, Storage, lo dejamos en weak, todos los elementos de interfaz gráfica deberían ser weak. ¿Por qué?. Esto lo estaré explicando en el tutorial de manejo de memoria del curso Objective-C desde Cero.

Repetimos el mismo proceso para el label. yo llamaré el outlet messageLabel.

Para el botón, el proceso es similar, solo que con una ligera diferencia. En lugar de seleccionar outlet para el tipo de conexión, seleccionamos Action. Esto es porque no queremos al botón en nuestro código, no vamos a modificar ninguna de sus propiedades. Lo que queremos es recibir el evento de cuando sea presionado por el usuario.

agregar-outlet-button-ios-desde-cero-controladores

  1. Seleccionamos Action entonces como dijimos anteriormente.
  2. Le colocamos un nombre al metodo que será llamado cuando se dispare este evento. Yo lo llamé buttonSelected
  3. En Type seleccionamos UIButton, podría ser id, pero yo prefiero tener el botón. Cuando el evento se dispare podemos recibir al botón como argumento del método, por eso prefiero recibirlo como UIButton en lugar de id, así evito tener que hacer un casting (casteo, convertirlo, etc). "id" es el tipo de objeto general de Objective-C, un "id" puede ser cualquier objeto, es como el "var" de C#
  4. El evento será TouchUpInside, esto significa que el método será llamado cuando el usuario levante el dedo luego de presionar el botón.
  5. En Arguments, seleccionamos none, en este caso no vamos a hacer nada con el botón, solo recibir el evento. En algunos casos podrías necesitar recibir el botón, por ejemplo: para cambiarle el titulo, cambiarle el color, cuando es presionado. Este no es el caso, así que lo dejamos en none.

Ahora, si todo salió bien, tu código debería lucir así:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UITextField *nameField;
@property (weak, nonatomic) IBOutlet UILabel *messageLabel;


- (IBAction)buttonSelected;

@end

Y del lado izquierdo del editor del código, deberías ver unos pequeños círculos rellenos, al lado de tus outlets. Esto significa que han sido conectados correctamente.

outlets-conectados-ios-desde-cero-controladores


Programando el controlador

Bien, ahora vamos a la implementación del controlador, seleccionamos ViewController.m del navegador de archivos.

En este momento debes estar preguntándote, ¿Qué demonios es esto?. Ok, en Objective-C las clases se separan en archivos .h y .m.

  • Los archivos .h son los Header File. Estos son los que revelan los atributos y métodos que serán públicos al resto de la aplicación.
  • Los archivos .m resguardan la implementación de los métodos que anunciamos en el Header. Todos los métodos o propiedades que estén en este archivo y no estén anunciados en el Header, serán privados.

¡Alerta!

Más sobre orientación a objetos será explicado con mayor detalle en el curso Objective-C desde Cero.

Entonces si abres el .m deberías ver el siguiente código:

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)buttonSelected {
}


@end

Nos encontramos con 3 métodos que Xcode ha generado para nosotros.

  1. viewDidLoad: Este método lo tienen todos los controladores en iOS. Este método es llamado cada vez que la aplicación termina de cargar la vista. Esto significa que ya ha leído el archivo .xib y esta lista para mostrarla en la pantalla. Más sobre el ciclo de vida de una vista puede verse en la documentación.
  2. didReceiveMemoryWarning: este método también lo tienen todos los UIViewControllers, es llamado cuando se recibe una alerta de memoria. En su implementación deberías liberar toda la memoria que tu aplicación este consumiendo y pueda ser liberada para evitar que se caiga.
  3. buttonSelected, este es el metodo que generamos para ser llamado cuando se dispare el evento TouchUpInside del botón.

Entonces en este último método deberíamos captar el nombre que el usuario introdujo en el text field y desplegarlo en el mensaje que va en el label. Esto lo hacemos de la siguiente manera:

Primero creamos un string con el mensaje y el nombre que aparece en el text field:

NSString *message = [NSString stringWithFormat:@"Hola, %@", self.nameField.text];

NSString es la clase de apple para manejar strings, stringWithFormat es un metodo estático de la clase que retorna un objeto del mismo tipo. En Objective-C, los strings se representan con el carácter "@" como prefijo. "%@" es el formato para representar un objeto dentro de un string (%f representa float, %i un int, %c un char, etc), en este caso el objeto es otro string (esta es una manera de concatenar).

Luego, asignamos el mensaje al label:

[self.messageLabel setText:message];

Todo el código junto del método debería verse así:

- (IBAction)buttonSelected {

    NSString *message = [NSString stringWithFormat:@"Hola, %@", self.nameField.text];

    [self.messageLabel setText:message];
}

Tal vez te preguntes. Si hablo español, ¿Por qué programo en inglés?. Bueno, esto es una cuestión de estilo, yo prefiero programar en ingles porque la mayoría de las palabras son más cortas y requieren menos conectivos.

Bueno, volviendo al tema...

Ahora corremos la app. Seleccionamos el Text field, escribimos nuestro nombre (podemos usar el teclado de la máquina, no tenemos que usar el del simulador, duh) y hacemos click en el botón. Debería verse así:

iphone-app-ios-desde-cero-controladores


Conclusión

¡Felicidades, has escrito tu primera aplicación!. Muy simple, pero es un comienzo. En el próximo tutorial hablaremos del elemento de interfaz más importante (a mi juicio) de iOS, el UITableView.

¡Nos vemos!


¿Te ha gustado esta publicación?

Compártela:

Por Oscar González

Conoce más sobre este autor aquí


comments powered by Disqus