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

Para dar las gracias debes entrar o registrarte en el foro

iMiembro Pro 3G
iMiembro Pro 3G
Mensajes: 1334 Agradecido: 992
02 May 2012, 19:36# 1
Imagen


Curso de programación realizado por nuestros amigos de iPhone4Spain.com que nos han pedido que compartamos esta serie de cursos de programación en iOS con la comunidad de iPadForos


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.

Imagen


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.

Imagen


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.

Imagen


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.

Imagen


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”.

Imagen[/URL]

En el “NewElementViewController.xib” y enlazamos, tanto los “IBOutlet” con los “UILabel” correspondientes, como los “IBAction” con los “UIButton” correspondientes.

Vamos ahora a modificar el fichero “DetailViewController.h”.

En él vamos a declarar tres @property:
  • NSMutableDictionary item" -> contendrá la información de la fila seleccionada de la “UITableViewController”.
  • IBOutlet UILabel nameLabel" -> en el que guardaremos el nombre del contacto seleccionado de la lista.
  • IBOutlet UILabel surnameLabel" -> en el que guardaremos el apellido del contacto seleccionado de la lista.

[centrar]Imagen


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.

Imagen


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.

Imagen


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

[IMG]http://www.iphone4spain.com/wp-content/uploads/2012/04/Captura-de-pantalla-2012-04-30-a-las-20.25.351.png[/IMG
]

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”.

Imagen


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.

Imagen


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”.

Imagen


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

Ejecutamos y comprobamos el funcionamiento de la aplicación.

Imagen


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
Gracias  
1 persona ha dado las gracias: manelalbert
Etiquetado en: