Tutorial Programación iOS: Listado y detalle con patrón delegado (Clase 5)

Para dar las gracias debes entrar o registrarte en el foro

iMiembro Pro 3G
iMiembro Pro 3G
Mensajes: 1334 Agradecido: 992
27 Abr 2012, 17:37# 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 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".

Imagen


Lo vamos a llamar “Clase5”.

Imagen


Ahora vamos a añadir, en el proyecto, dos ficheros con sus correspondientes interfaces de usuario.

Imagen


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.

Imagen


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.

Imagen


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.

Imagen


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

Imagen


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.

Imagen


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.

Imagen


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

Imagen


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.

Imagen


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.

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


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

Imagen


Por último, ejecutamos la aplicación y comprobamos que funciona correctamente.

Imagen


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.

Imagen


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
Gracias  
2 personas han dado las gracias: CarlosVEPmanelalbert
Etiquetado en:
iMiembro Pro 6G
iMiembro Pro 6G
Mensajes: 4448 Agradecido: 1653
27 Abr 2012, 19:28# 2

Como todos los tutoriales que has publicado hasta el momento de 10 ;-)

Gracias  
iMiembro Pro 3G
iMiembro Pro 3G
Mensajes: 1334 Agradecido: 992
02 May 2012, 18:09# 3
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 solución y explicación del ejercicio propuesto de la Clase 5 del Curso de Programación iOS de iPhone4Spain.

Cómo ya vimos en la Clase 5, veremos cómo crear un listado y un detalle utilizando el protocolo delegado (delegate).

Este protocolo nos permitirá realizar aplicaciones mucho mejor acabadas y nos facilitará el proceso de reestructurado de la aplicación, siempre que éste sea necesario.

Empezaremos, como siempre, creando un nuevo proyecto "Empty Application" y le escribimos un nombre. Nosotros lo hemos llamado "EjercicioClase5".

Imagen


Añadimos dos nuevos ficheros. Uno subclase de "UITableViewController" y el otro subclase de "UIViewController". En ambos seleccionamos la opción "With XIB for user interface" para que genere la interfaz de usuario.

El "UITableViewController" es el que vamos a utilizar para hacer el listado de elementos. Lo hemos llamado "ListViewController".

El "UIViewController" lo utilizaremos para realizar el detalle, en el que mostraremos la información de la celda y podremos realizar la modificación de su texto. Lo hemos llamado "DetailViewController".

La estructura de ficheros que tendrá la aplicación es la que vemos en la siguiente imagen.

Imagen


Abrimos el fichero "AppDelegate.m" para editarlo. Queremos que la aplicación se abra en la interfaz del listado y, cuando pulsemos una celda, realice una transición hacia el detalle.

Para conseguir este primer requisito, lo primero que haremos será importar "ListViewController.h".

Creamos un objeto de la clase "ListViewController" y creamos otro de la clase "UINavigationController", que será el encargado de realizar la transición. En la declaración del objeto "UINavigationController", utilizaremos el objeto de "ListViewController" para igualarlo al método "initWithRootViewController".

Igualamos, en la propiedad "rootViewController" de "window", el objeto de "UINavigationController".

Imagen


Vamos a empezar haciendo el detalle para ver qué es lo que necesitamos en el listado.

Primero editamos el fichero "DetailViewController.h".

Lo primero que hay que hacer es crear el "@protocol". Lo llamamos "DetailDelegate" y le decimos que la clase que soporte este delegado tiene que contener implementado, de manera opcional "@optional", el método "nameDidChange".

Dentro de "@interface" crearemos la propiedades de "DetailViewController": "delegate" y "cellName". Además, crearemos un "IBOutlet" para el "UITextField" de la interfaz y un "IBAction" para el botón que cambia el nombre de la celda.

Imagen


En el fichero "DetailViewController.m" hacemos "@synthesize" de las propiedades declaradas en "DetailViewController.h" y programamos el "IBAction".

En el método "viewDidLoad", cambiamos el título de la interfaz y el texto del "UITextField".

El "IBAction" se encargará de cambiar el nombre de la celda. Para ello, trabajamos con el método que ha de tener la clase que soporta el protocolo. También vuelve a la interfaz de la lista.

Imagen


Una vez hecho el detalle, vamos a hacer el listado.

Editamos el fichero "ListViewController.h".

Haremos que "ListViewController" soporte el delegado de detalle "" y creamos dos propiedades: cells y selectIndex.

Imagen


Por último, vamos a editar el fichero "ListViewController.m".

Lo primero que haremos es "@synthesize" de las propiedades declaradas en "ListViewController.h".

Creamos el método "didReceiveMemoryWarning" que va a controlar posibles avisos de memoria.

Editamos el método "viewDidLoad" en el que cambiaremos el "title" de la interfaz y rellenaremos "cells" con información.

Imagen


En el método "numberOfSectionsInTableView", hacemos que devuelva 1 y, en el método "numberOfRowsInSection", que devuelva el contador de "cells".

Editamos el método "cellForRowAtIndexPath" para que, el "textLabel" de cada celda, coja el texto de cada uno de los valores de "cells".

En el método "didSelectRowAtIndexPath" es donde crearemos el objeto de "DetailViewController" e igualaremos el delegado de "DetailViewController" con "self". Es lo más importante del ejercicio.

Por último, creamos el método encargado de cambiar el nombre de la celda.

Imagen


Sólo queda enlazar todos los "IBOutlets" y "IBActions" a sus correspondientes elementos de la interfaz.

Ejecutamos la aplicación y probamos que todo funciona correctamente.

Imagen


Vía | iPhone4Spain.com - Clase 5
Gracias  
1 persona ha dado las gracias: CarlosVEP
iMiembro
iMiembro
Mensajes: 1 Agradecido: 0
21 May 2013, 23:02# 4

En la resolucion de la practica, se te olvido colocar la importacion del "DetailViewController.h" en la clase "ListViewController.h".

Y gracias por los tutos estan muy buenos emo:-:24

Gracias  