Tutorial Programación iOS: Insertar elementos en UITableViewController (Clase 6)

Bienvenidos a la Clase 6 del Curso de Programación iOS de iPhone4Spain.

En esta clase, veremos cómo añadir información en un objeto de la clase “UITableView” entre distintas escenas a través del patrón “delegado” (delegate). La utilización de este patrón nos ayudará a, en un momento dado, reorganizar las escenas sin que esto suponga algo muy laborioso ya que el patrón “delegado“ hace que el padre sólo contenga aquellos métodos que el hijo necesita.

El ejemplo que vamos a explicar en esta clase, consiste en una “UITableView” en la que podemos añadir celdas con información previamente añadida. También tendremos acceso a un “UIViewController” donde se mostrará el detalle de la celda seleccionada. Cargaremos datos en la “UITableView” desde un “NSMutableArray”.

Creamos un proyecto vacío, lo vamos a llamar “Clase6”.

Una vez se ha generado todo el proyecto agregaremos los ficheros "Objective-C class".

En el ejemplo de hoy tenemos dos "UIViewController" que las hemos llamado "DetailViewController" y "NewElementViewController". También agregamos un "TableViewController" que lo hemos llamado "ListViewController".

La estructura de ficheros de nuestro programa tiene el siguiente aspecto.



Abrimos el fichero “AppDelegate.m”. Creamos el objeto de la clase “ListViewController”, también creamos un objeto de la clase “UINavigationController” y lo inicializamos con “initWithRootViewController” al objeto “ListViewController” anteriormente creado. Asignamos el objeto “UINavigationController” a “rootViewController” para que sea la escena que se abra cuando arranquemos la aplicación.



Abrimos el fichero “NewElementViewController.h”. Declaramos el protocolo "NewElementDelegate”. En él se pueden declarar métodos que puede o tiene que llevar la clase padre de “NewElementViewController”, en este caso “ListViewController”. Indicamos, con el siguiente código, que “ListViewController” tiene que llevar implementado el método “newContactDidChanged” ya que, al no indicar nada. Al no definirlo con @optional, por defecto es @require. También se puede definir como @require pero el efecto sería el mismo.

Dentro de “@interface NewElementViewController” declaramos tres propiedades: La primera es el propio “delegate”, la segunda y la tercera son dos “IBoutlet” de la clase “UITextField”. Seguidamente declaramos dos “IBAction”, “saveNewContact” y “cancelNewContact”, que se encargarán de hacer la funcionalidad de los botones cuando éstos sean pulsados.



Una vez hecho el paso anterior, el siguientes es abrir el fichero “NewElementViewController.m” y hacer “@synthesize” de todos los objetos declarados en el “NewElementViewController.h” para que el compilador genere el código para crear los métodos accesorios para sus propiedades.



Ahora implementamos los métodos, “saveNewContact” y “cancelNewContact”, anteriormente declarados en “NewElementViewController.h”.

El método “saveNewContact” guardará los datos introducidos en los dos “UITextField” en el objeto “NSMutableDictionary” que creamos al entrar en el método. Una vez hecho esto saldrá de la escena con la propiedad “dismissModalViewControllerAnimated”.

El método “cancelNewContact”, simplemente saldrá de la escena modal con la propiedad “dismissModalViewControllerAnimated”.



Abrimos ahora el fichero “DetailViewController.m” y hacemos @synthesize de las @property que hemos declarado en el fichero “DetailViewController.h”.

Buscamos el método “viewDidLoad” y asignamos a la propiedad “text” de los “IBOutlet” cada uno de los campos que el objeto “item” tiene.



En “DetailViewController.xib” hay que enlazar los “IBOutlet” con sus correspondientes componentes.

En el fichero “ListViewController.h” vamos a declarar una @property, “items”, donde almacenaremos todos los datos de la lista. Además, vamos a declarar un “IBAction”, el cual será el encargado de abrir la escena de en la que añadiremos contactos a la lista.



Abrimos el fichero “ListViewController.m”, importamos “DetailViewController.h” y “NewElementViewController.h”, y hacemos @sinthesize de la @property declarada en “ListViewController.h”.

]

En el método “viewDidLoad” tenemos que inicializar el objeto “items”, le vamos a poner un título a la escena “ListViewController” y creamos un “rigthBarButtonItem” el cual ejecutará el método declarado anteriormente “addElement”.



Ahora vamos a insertar en la “UITableView” los datos asignados, anteriormente, a la “NSMutableArray”. Para hacer esto, hay que modificar 3 métodos:

• numberOfSectionsInTableView: En él indicamos el número de secciones que vamos a tener en nuestro listado.
• numberOfRowInSection: En este método vamos a indicar el número de filas que tendrá una sección.
• cellForRowAtIndexPath: Es el método donde configuraremos la fila en cuestión para que se muestre la información deseada.

Al arrancar la aplicación no habrá ningún dato en la lista, por lo que primero tenemos que añadir un contacto.

Implementamos el método “IBOutlet” “addElement”, en el que mostraremos la escena modal.

También hay que implementar el método “newContactDidChanged” en el que asignamos los nuevos contactos a la lista y actualizamos el “UITableView”.



Por último, vamos a “ListViewController.xib” y enlazamos todos los "IBAction" y "IBOutlet".

Ejecutamos y comprobamos el funcionamiento de la aplicación.



La clase de hoy y la última, que será publicada el lunes 7 de mayo, no tendrán ejercicio propuesto. De esta manera podréis aprovechar y repasar las clases anteriores del curso. Intentad combinar los ejercicios vistos con anterioridad para practicar.

Vía | iPhone4Spain.com - Clase 6