Cómo Crear Una Aplicación Simple para iPhone en iOS 5: Parte 1/3

Un modelo de bichos: Implementación

Ok vamos a ello. Haz control-click en el grupo Model y haz click “New File…”. Selecciona la plantilla de clase iOSCocoa TouchObjective-C, y luego haz click en Next.

Asigna a la clase el nombre ScaryBugData, coloca NSObject como subclase y haz click en Next.

En la última ventana haz click en Create de nuevo. Si todo va bien, la sección del Project Navigaror debe lucir como vemos a continuación:

Muy bien, es hora de crear nuestra clase ScaryBugData. Reemplaza el contenido de ScaryBugData.h con lo siguiente:

#import <Foundation/Foundation.h>

@interface ScaryBugData : NSObject

@property (strong) NSString *title;
@property (assign) float rating;

- (id)initWithTitle:(NSString*)title rating:(float)rating;

@end

Esto es bastante sencillo – simplemente estamos declarando un objeto con dos propiedades – una cadena para el nombre del insecto, y un float para la calificación que le asignemos. Utilizamos dos propiedades para esto:

• strong: indica que durante el tiempo de ejecución es necesario mantener una referencia fuerte de forma automática con el objeto. Es una forma elegante de decir que el contador ARC debe mantener al objeto en memoria tanto tiempo como exista una referencia a él, y luego liberarlo sólo cuando todas las referencias hayan desaparecido. Para mayor información consulta nuestro tutorial Beginning ARC in iOS 5.
• assign: esto significa que la propiedad se configura automáticamente, sin ningún tipo de gestión de memoria. Es lo que usualmente se utiliza para crear tipos de dato primitivos (no objetos) como puede ser el punto flotante (float).

También definimos un inicializador para la clase de modo que sea posible asignar el título y la calificación cuando creamos un insecto nuevo.

Cambiamos ahora a ScaryBugData.m y reemplazamos el contenido con lo siguiente:

#import "ScaryBugData.h"

@implementation ScaryBugData

@synthesize title = _title;
@synthesize rating = _rating;

- (id)initWithTitle:(NSString*)title rating:(float)rating {
    if ((self = [super init])) {
        self.title = title;
        self.rating = rating;
    }
    return self;
}

@end

De nuevo, realmente simple. Sintetizamos nuestras propiedades y luego creamos el inicializador para asignar valores a nuestras variables de instancia con los valores recibidos por parámetros. Fíjate que no es necesario liberar memoria (dealloc) ya que estamos utilizando ARC.

Eso es todo con respecto a ScaryBugData. Ahora sigamos los mismos pasos de arriba para crear una nueva subclase del tipo NSObject. Esta vez la llamaremos ScaryBugDoc.

Reemplaza el contenido de ScaryBugDoc.h con lo siguiente:

#import <Foundation/Foundation.h>

@class ScaryBugData;

@interface ScaryBugDoc : NSObject

@property (strong) ScaryBugData *data;
@property (strong) UIImage *thumbImage;
@property (strong) UIImage *fullImage;

- (id)initWithTitle:(NSString*)title rating:(float)rating thumbImage:(UIImage *)thumbImage fullImage:(UIImage *)fullImage;

@end

Nada particular que destacar aquí – sólo hemos creado algunas variables/propiedades de instancia y un inicializador.

Reemplaza el contenido de ScaryBugDoc.m con lo siguiente:

#import "ScaryBugDoc.h"
#import "ScaryBugData.h"

@implementation ScaryBugDoc
@synthesize data = _data;
@synthesize thumbImage = _thumbImage;
@synthesize fullImage = _fullImage;

- (id)initWithTitle:(NSString*)title rating:(float)rating thumbImage:(UIImage *)thumbImage fullImage:(UIImage *)fullImage {   
    if ((self = [super init])) {
        self.data = [[ScaryBugData alloc] initWithTitle:title rating:rating];
        self.thumbImage = thumbImage;
        self.fullImage = fullImage;
    }
    return self;
}

@end

Y eso es todo – ¡nuestro modelo de datos esta completo! Es hora de crear alguna data de ejemplo y desplegarla en nuestra vista de tabla.

Un tipo diferente de lista de bichos

Primero, vamos a configurar nuestra vista de tabla de modo que pueda manejar el despliegue de una lista con el contenido de ScaryBugDocs. Lo primero que debemos hacer es modificar nuestra vista de tabla para que retorne un número dinámico de filas (en lugar de la fila única que nos provee la plantilla).

Para lograrlo, nos dirigimos a MainStoryboard.storyboard. Esta sección te permite visualizar las diferentes “pantallas” de tu aplicación. Como puedes ver, la aplicación de momento cuenta con un controlador de navegación (lo que facilita desplazarse de una pantalla a otra), con el controlador raíz como pantalla principal y un controlador secundario para el despliegue de la vista de detalle.

Selecciona el controlador principal (Master View Controller) y, en el área de selección del panel izquierdo, marca la vista de tabla. En el inspector al lado derecho asegúrate que el valor de Content sea Dynamic Prototypes.

Es esto lo que te permite implementar una vista de tabla de una sola celda en el editor del Storyboard, para luego crear instancias de dicha celda vía código fuente. Nosotros queremos una celda simple por lo que utilizaremos el estilo Basic.

Selecciona la celda de la vista de tablas a la izquierda y en el inspector de atributos asegúrate de configurar en modo Basic la propiedad Style. También configura el identificador (Identifier) como MyBasicCell.

Para más información de como crear celdas personalizadas, consulta nuestro tutorial Beginning Storyboards in iOS 5.

Ok, ahora que tenemos nuestra vista de tabla configurada correctamente, sólo necesitamos actualizar el código para alimentar la tabla con la lista de los insectos.

Procederemos a almacenar nuestro ScaryBugDocs en un arreglo del tipo NSMutableArray, el tipo de estructura que nos permitirá luego realizar modificaciones que afecten su tamaño sin ningún problema.

Añade la siguiente línea a MasterViewController.h entre las líneas @interface y @end:

@property (strong) NSMutableArray *bugs;

Esta será la variable/propiedad de instancia que utilizaremos para hacer el seguimiento de nuestra lista de bichos.

Ahora vamos a MasterViewController.m y realizamos los siguientes cambios:

// Al inicio del archivo
#import "ScaryBugDoc.h"
#import "ScaryBugData.h"

// Luego de @implementation
@synthesize bugs = _bugs;

// Al final de viewDidLoad
self.title = @"Scary Bugs";

// Reemplaza la sentencia "return" en shouldAutorotateToInterfaceOrientation con:
return YES;

// Reemplaza la sentencia "return" en tableView:numberOfRowsInSection con:
return _bugs.count;

// Reemplaza tableView:cellForRowAtIndexPath con:
- (UITableViewCell *)tableView:(UITableView *)tableView
         cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView
                             dequeueReusableCellWithIdentifier:@"MyBasicCell"];
    ScaryBugDoc *bug = [self.bugs objectAtIndex:indexPath.row];
    cell.textLabel.text = bug.data.title;
    cell.imageView.image = bug.thumbImage;
    return cell;
}

¡Finalmente algo interesante que comentar!

Antes de continuar, fíjate que hemos asignado la cadena “Scary Bugs” como valor de la propiedad “title.” Esta es una propiedad especial asociada (built-in) a los view controllers. Cuando un controlador de navegación despliega un view controller, este muestra el contenido de la propiedad “title” en la barra de título. Al configurar este valor lo que logramos es que en la barra superior se lea el texto “Scary Bugs.”

Luego retornamos “YES” en shouldAutorotateToInterfaceOrientation, con lo cual indicamos al sistema que debemos tener la capacidad de soportar todas las orientaciones. Dado que esta clase es del tipo UITableViewController no debemos hacer nada más – ¡la vista rotará de forma automática!

Cuando construimos una vista de tablas con filas dinámicas debemos sobre escribir numberOfSectionsInTableView y numberOfRowsInSection para indicarle al sistema cuantas secciones/filas debe desplegar en la tabla. Sólo tenemos una sección, por lo tanto no es necesario hacer ningún procedimiento adicional. Para establecer el número de filas, debemos retornar la cantidad de objetos en nuestro arreglo de insectos.

Finalmente implementamos tableView:cellForRowAtIndexPath, probablemente el método más importante al momento de crear una vista de tablas. Es aquí donde se configura la celda que será desplegada para una fila en particular. El sistema debe realizar la llamada a este método una vez por cada fila.

Vamos a ver este método en detalle dada la importancia que tiene:

- (UITableViewCell *)tableView:(UITableView *)tableView
         cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView
                             dequeueReusableCellWithIdentifier:@"MyBasicCell"];
    ScaryBugDoc *bug = [self.bugs objectAtIndex:indexPath.row];
    cell.textLabel.text = bug.data.title;
    cell.imageView.image = bug.thumbImage;
    return cell;
}

La primera línea realiza la llamada a una función de ayuda conocida como “dequeueReusableCellWithIdentifier”, la cual intenta devolver una celda reutilizable. ¿Por qué es esto necesario?

Bien, en principio es un tema de optimización del desempeño. Ten en cuenta que las vistas de tabla pueden contener un gran número de filas pero sólo un cierto número de ellas se despliegan en pantalla al mismo tiempo. En lugar de crear una celda cada vez que una nueva fila entra en pantalla, el sistema puede mejorar el rendimiento haciendo uso de la celda creada anteriormente y que no se encuentra ya en pantalla.

Si no se dispone de una celda para ser reutilizada, simplemente creamos una nueva desde la celda básica configurada anteriormente en el Interface Builder (“MyBasicCell”).

Es posible crear tus propias celdas o utilizar una estándar. En nuestro caso, la vista de tablas por defecto funciona perfectamente por lo que confirmamos la selección de este método al configurar el estilo con UITableViewCellStyleDefault.

Si tienes curiosidad sobre los distintos tipos de vistas de tabla y celdas puedes consultar la sección “Standard Styles for Table-View Cells” en Table View Programming Guide.

Finalmente configuramos la celda con los valores de textLabel e imageView (los cuales se encuentran disponibles en el estilo Basic).

Lo creas o no ¡esto es todo lo que necesitamos hacer! Ahora tan solo necesitamos establecer data de muestra para desplegar en nuestra vista de tabla.