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
iPadForosBienvenidos a la
Clase 5 del
Curso de Programación iOS de iPhone4Spain.
En esta clase, veremos cómo pasar información 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 patrón “delegado” hace el hijo no tenga que incluir(con “
import”) la cabecera del padre. Es esto lo que hace al patrón “
delegado” algo muy útil para este tipo de aplicaciones.
El ejemplo que vamos a explicar en esta clase, consiste en una “
UITableView” en la que tendremos acceso a un “
UIView” donde se mostrará el detalle de la celda seleccionada. Para hacerlo un poco más complejo, veremos cómo cargar datos en la “
UITableView” desde un “
NSMutableArray”.
Creamos un proyecto "
Empty Application".
Lo vamos a llamar “
Clase5”.
Ahora vamos a añadir, en el proyecto, dos ficheros con sus correspondientes interfaces de usuario.
El primer fichero va a ser del tipo "
Objective-C class" y de la subclase "
UITableViewController".
Lo vamos a llamar "
ListViewController". Va a ser la lista de elementos.
También seleccionamos "
With XIB for user interface" para que se generen las interfaces.
El segundo fichero que vamos a insertar va a ser "
Objective-C class" pero, en este caso, va a ser subclase de "
UIViewController".
Lo hemos llamado "
DetailViewController". Es el detalle de cada elemento de la lista.
Como siempre solemos hacer, agrupamos todos los ficheros insertados, en carpetas.
En la siguiente imagen podemos ver cómo tiene que ser la estructura de nuestro proyecto.
Vamos a pasar ya a la programación de los ficheros.
Abrimos el fichero “
AppDelegate.h”. Creamos el objeto instanciado de la clase “
ListViewController” y un objeto “
UINavigationController” el cual lo inicializamos con “
initWithRootViewController” para que “
ListViewController” sea la escena que se abra cuando arranquemos la aplicación.
Vamos a empezar a realizar el detalle para declarar el patrón “
delegado” y los demás componentes que nos hará falta.
Seleccionamos "
DetailViewController.xib" y añadimos los componentes que vamos a utilizar para mostrar la información. Añadimos dos “
UILabel” en el que mostraremos el nombre del campo y el titulo de la celda seleccionada anteriormente. Además agregaremos un “
UIButton” que va a realizar la misma función volver que realiza el “
Navigation Item” que aparece en la “
Navigation Bar” pero nos servirá para ver la instrucción que realiza internamente el “
Navigation Item”.
Abrimos el fichero “
DetailViewController.h” y añadimos lo siguiente:
Declaramos el protocolo “
DetailDelegate”. En él se pueden declarar funciones que puede o tiene que llevar la clase padre de “
DetailViewController”, en este caso “
ListViewController”. Como “
ListViewController” no tiene que hacer ninguna funcionalidad lo dejaremos vacío.
Dentro de “
@interface DetailViewController” declaramos dos propiedades: La primera es un “
NSString” que se llamará “
cellName” que se encargará de guardar el nombre de la celda y la segunda es el propio “
delegate”. También dentro de “
@interface DetailViewController” declaramos el “
IBOutlet” del “
UILabel” que contendrá el título de la celda y un “
IBAction” llamado "
returnButton", que se encargará de hacer la funcionalidad del botón cuando éste sea pulsado.
Una vez hecho el paso anterior, el siguientes es abrir el fichero “
DetailViewController.m” y hacer “
@synthesize” de todos los objetos declarados en el “
DetailViewController.h” para que el compilador genere el código para crear los métodos accesorios para sus propiedades.
Cuando entremos al detalle de una celda de “
ListViewController” mostramos su nombre en el “
title” de la escena y también en el “
label” que hemos declarado antes.
Lo último que hay que programar en el “
DetailViewController.m” es la funcionalidad del botón que tiene la escena. El botón lo que va a hacer es volver a “
ListViewController” con el método de la clase “
UINavigationController” “
popViewControllerAnimated”.
Una vez realizada toda la programación de “
DetailViewController” vamos a empezar a hacer la programación de “
ListViewController”.
Abrimos el fichero “
ListViewController.h” y añadimos “
” en la declaración de la "
@interface" para que el compilador sepa que la "
@interface" soporta el delegado de “
DetailViewController”. Para ello, tenemos que importar “
DetailViewController.h”.
Lo siguiente es declarar el “
NSMutableArray” que contendrá la información de las celdas y un “
int” en el que captaremos el índice de la celda seleccionada.
Ahora volvemos a abrir “
DetailViewController.xib” y realizamos los enlaces de los “
IBOutlet” y “
IBAction” con los diferentes objetos declarados en la escena, tal y como lo hemos hecho en clases anteriores del
Curso de Programación iOS de iPhone4Spain.
Una vez hecho el paso anterior, abrimos el fichero “
ListViewController.m”. Primero hacemos el "
@synthesize" de las "
@property" anteriormente declaradas.
Buscamos el método “
viewDidLoad” y rellenamos el objeto “
cells” con la información deseada. En este ejemplo, vamos a escribir el texto “
Celda ” y el número correspondiente a esa celda. El método quedará como vemos en la siguiente imagen.
Hay que tener en cuenta que no estamos insertando nada en la “
UITableView”, sino que estamos insertando la información en la lista que tenemos en memoria (“
NSMutableArray”), por lo que en pantalla no aparecerán los datos si ejecutamos la aplicación. Es un ejemplo similar al que tendríamos si tuviésemos una base de datos.
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.
Como vemos en la imagen anterior, en el método “
cellForRowAtIndexPath” es donde modificamos el contenido del “
UITableView”. Con la instrucción “
cell.textLabel.text = [self.cells objcectAtIndex:indexPath.row]”, se selecciona cada celda de “
cells” con el índice “
indexPath.row” y lo insertamos en la propiedad “
text” del “
textLabel” del objeto “
cell”.
Por último, nos queda llamar a la escena “
DetailViewController” cuando seleccionamos una fila del ”
UITableView”.
Nos dirigimos al método “
didSelectedRowAtIndexPath” y simplemente creamos una instancia de “
DetailViewController”, asignamos la información de la celda seleccionada, indicamos el índice de la celda seleccionada, igualamos el delegate a self y hacemos “
pushViewControler” para pasar a “
DetailViewController”.
Por último, ejecutamos la aplicación y comprobamos que funciona correctamente.
El
ejercicio propuesto para esta semana consta de un listado y un detalle como el que hemos realizado hoy, pero en el detalle vamos a tener que poder modificar el texto de la celda seleccionada.
El ejercicio propuesto es algo difícil pero hay que intentarlo.
El
viernes 27 de abril publicaremos la solución del ejercicio.
Vía | iPhone4Spain.com - Clase 5
