thxou

Ama la sabiduría. Desea el conocimiento.

Programando Para iOS: Patrón De Diseño MVC Al Detalle

| Comments

Hola denuevo readers!. He querido cambiar un poco el chip y centrarme en lo que más me llena en este mundillo de la informática: La programación. Es por eso que empiezo esta serie de posts dedicados a la programación para diversas plataformas. En la que más me voy a centrar es en iOS para iPhone, iPod y iPad, ya que indagando un poco me ha llamado muchísimo la atención. También encontrarán tutoriales de PHP, SQL, JavaScript, Android, etc etc, así que manténganse al tanto del blog que va a estar muy interesante.

Sin más que decir, empecemos. Existen muchos patrones de diseño para organizar el código y la forma de programar aplicaciones. En la programación para iOS utilizaremos el MVC o Model View Controller (Modelo-Vista-Controlador).

He querido empezar con esto porque es un tema que, aunque a muchos os ha sido fácil de entender, a mi no, así que lo haré lo más entendible posible para que no tengan que volver a leer sobre este tema en el futuro.

Principalmente consiste en dividir tu aplicación en estas 3 capas. Cada clase que escribas, botón que pongas en el Interface Builder, o trozo de código que tengas que escribir, va a pertenecer a alguna de estas 3 capas.

MVC-thxou.com

La Vista es todo lo que tu puedes ver de la aplicación y con la que el usuario puede interactuar, dentro de esta encontramos los botones, labels, campos de texto, etc; en general, la mayoría de los objetos que son subclases de UIView (También las clases predefinidas por el usuario).

El Modelo incluye objetos que nos permiten almacenar y manipular datos. Esto no tiene nada que ver con la interfaz de usuario y le dice a la aplicación como llevar a cabo tal o cual tarea, o también que características van a tener ciertos objetos.

El Controlador es el cerebro de este patrón de diseño. Este va a hacer trabajar a la vista y el modelo en sincronización para que tu puedas ver cosas en la pantalla o para que al presionar un botón, sea efectuada alguna acción.

El MVC se explica mejor con la imagen:

  • El usuario interactua con la aplicación y la vista (U objeto de la vista) a través de la interfaz de usuario.
  • La vista le envía un mensaje al controlador diciendole por ejemplo que hemos presionado un botón y queremos que esto responda a alguna acción.
  • El controlador recibe el mensaje y contacta con el modelo para realizar la acción y actualizar la información pertinente.
  • El controlador recoge la información requerida por la vista pero actualizada por el modelo y por ultimo actualiza la vista con los cambios que  se han hecho en el modelo.

Sencillo verdad?. Si te das cuenta el modelo no contacta directamente con el controlador, sino que es este quien manipula e interpreta los datos del modelo, los recoge y procede a actualizar la vista.

Es muy necesario tener en cuenta las siguientes reglas:

  • El controlador puede comunicarse con el Modelo y la Vista directamente.
  • La capa Modelo y la capa Vista no se pueden comunicar entre si.
  • La capa Vista no se comunica directamente con el controlador, pero si interactuan de alguna forma, a través de acciones como veremos un poco más adelante en esta entrada.
  • El Modelo no se puede comunicar directamente con su el Controlador, pero si pueden comunicarse con otras capas Modelo de otros MVC.
  • Puede existir también comunicación entre distintos Controladores.

Si alteras alguna de estas reglas ya no existiría el patrón de diseño MVC.

Aplicación práctica

Como todo lo que se aprende a nivel practico se aprende más rápido y mejor, he creado un proyecto muy simple para explicar un poco este patrón de diseño MVC, esta mini aplicación muestra por pantalla 2 textos al presionar un botón. Puedes descargar el proyecto desde este enlace y seguir este post juntamente. He utilizado la plantilla View-Based Application (Single View Application en XCode 4.2).

Al abrir el proyecto verás en el panel de más a tu izquierda (Project Navigator: Es importante que te vayas quedando con estos nombres) la lista de los archivos que componen tu proyecto. Lo que salta a simple vista es una clase llamada MVCAppDelegate.h y .m (AppDelegate.h si usas XCode 4.2). Esta clase es el controlador de la aplicación y se encarga de cargar la vista por defecto y la aplicación en si. Bien, si abrimos el AppDelegate.h veremos esto si usas XCode 4.2:

1
2
3
4
5
6
7
8
9
10
11
#import <UIKit/UIKit.h>

@class ViewController;

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@property (strong, nonatomic) ViewController *viewController;

@end

De momento vamos a dejar de lado algunas cosas de este código porque las explicaré en entradas posteriores.

Ya podemos empezar a identificar objetos. UIWindow es una clase perteneciente al UIKit Framework y que define un objeto ventana (En este caso la variable *window) de la interfaz de usuario (De ahí las iniciales “UI” de User Interface). Cada aplicación va a tener por lo general un solo objeto de estos. Por eso este objeto, al ser de la interfaz de usuario, pertenece a la parte de la Vista del MVC.

Si volvemos al Project Navigator veremos una clase llamada “ViewController”. Como su mismo nombre lo indica es un controlador, y es para una vista específica, en este caso la vista principal que verás al arrancar la aplicación.
[nota]
NOTA: Con respecto a los nombres para los controladores, es muy recomendable que el nombre incluya al final las palabras ”Controller” o ”View Controller” ya que esto te va a permitir organizar mejor tu Project Navigator y ubicar más rápido tus archivos para editarlos. Por lo general (por no decir siempre) te vas a encontrar con proyectos en que los controladores tienen nombres como: ListasViewController o GameController. Si son proyectos muy grandes, vas a agradecer que se nombren los controladores de esta manera, te liarás menos :).
[/nota]
Abrimos el archivo de cabecera de nuestro controlador: MVCViewController.h, y veremos el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
#import <UIKit/UIKit.h>

@interface MVCViewController : UIViewController {
	NSMutableArray *textos;

	IBOutlet UILabel *texto1;
	IBOutlet UILabel *texto2;
}

- (IBAction)mostrarTextos:(id)sender;

@end

El Modelo suele utilizar objetos de colección como los NSArray o NSDictionary o los tipos como NSString o NSNumber, en nuestra aplicación podemos identificar como parte del modelo al objeto *textos de la clase NSMutableArray. También tenemos 2 objetos UILabelque corresponden a la interfaz de usuario y forman parte de la capa Vista. Los nombres de las clases personalizadas para la Vista suelen terminar con la palabra ”View” como por ejemplo: GhaphicView, y eso por la misma razón que para los controladores. Estos también pertenecen a la capa Vista.

La comunicación entre la capa controlador y la capa vista es ciega. Como puedes ver en el código, a los UILabel les precede una macro llamada IBOutlet, esta les permite conectarse con el controlador para así poder enviarle acciones. Los objetos de la vista no tienen control sobre que hacer sobre si, así que envían acciones al controlador cuando algo ocurre, por ejemplo cuando se presiona un botón como en nuestro caso con el método mostrarTextos:sender.

A veces, la capa Vista necesita responder a ciertos eventos como por ejemplo cuando un campo de texto se ha empezado a editar. Como la Vista no tiene control sobre si misma, necesita del controlador para que responda por ella, entonces el controlador se asigna a si mismo como delegado (Veremos estos conceptos más adelante) de la vista (Todo esto a través de protocolos) y si está preparado para responder (Tiene los métodos adecuados correctamente implementados), responde.

Si abrimos el archivo de implementación: MVCViewController.m, podremos ver el método mostrarTextos:sender:

1
2
3
4
5
6
7
8
9
10
11
//Método que va a mostrar los textos
- (IBAction)mostrarTextos:(id)sender {
    //Inicializamos en un array los 2 textos a mostrar
    textos = [[NSMutableArray alloc] initWithObjects:@"Texto de ejemplo para MVC", @"MVC mola cuando lo entiendes", nil];

    NSString *txt1 = textos[0];
    NSString *txt2 = textos[1];

    [texto1 setText:txt1];
    [texto2 setText:txt2];
}

Al presionarse el botón se ejecuta la acción (En realidad se envía un mensaje y ya veremos esto en otro capítulo) mostrarTextos:sender. En esta acción el controlador toma los datos que tiene disponibles la capa Modelo, en este caso la información cargada en el objeto NSMutableArray llamado textos y entonces asigna los valores recogidos en variables temporales y las devuelve a la vista para que los textos sean mostrados. El objeto UILabel sabe mostrar texto, pero NO SABE que texto mostrar, de igual manera el NSMutableArray sabe almacenar datos, pero NO SABE que datos tiene que almacenar, es por eso que usamos el controlador para esto.

Recuerda respetar las reglas del MVC y así tus aplicaciones estarán bien estructuradas, de manera que cuando compartas tu código, este sea entendible.

Espero haberlos ayudado. Si me ha faltado algo, solo comentadlo. Puedes descargar los archivos del tutorial presionando el botón de abajo.

Comments