Cursos

 Clase 0: introducción a Xcode

Bienvenidos al Curso de Programación iOS de iPhoneBerry. Durante las próximas semanas vamos a publicar una serie de clases en las que os vamos a mostrar cómo programar aplicaciones en el sistema operativo iOS, utilizado en los dispositivos móviles de Apple (iPhone, iPad y iPod Touch).

El curso constará de 8 clases y está orientado a gente que quiere iniciarse en la programación de aplicaciones iOS y que tiene ciertos conocimientos de programación. En este curso se podrá programar una aplicación desde la primera clase.

La herramienta que vamos a utilizar para el desarrollo de aplicaciones iOS es Xcode y el lenguaje de programación es Objective-C. Sólo podemos utilizar Xcode en un Macintosh. La versión que vamos a utilizar en el curso es la 4.3.2 y para esta versión necesitamos OS X 10.7 Lion. Mac OS X sólo se puede instalar en ordenadores Macintosh.

Xcode ha evolucionado de forma muy notable en los últimos meses. Desde la versión 4 de Xcode, Interface Builder se ha integrado dentro del mismo Xcode haciendo que la programación sea más intuitiva y cómoda.

No sólo ha evolucionado en la parte visual en las últimas versiones de Xcode, sino que la programación también ha sufrido cambios. Uno de los más importantes ha sido la entrada del Grand Central Dispatch. Grand Central Dispatch es una tecnología, desarrollada por Apple, que gestiona los hilos de ejecución de las aplicaciones de forma totalmente transparente tanto para los usuarios como para los programadores. De esta manera la ejecución de la aplicación está optimizada.

Vamos a pasar ya a la acción. Para empezar, tenemos que descargar e instalar la herramienta Xcode que podéis encontrar en el enlace. Los pasos de la instalación son muy sencillos, simplemente ejecutamos el archivo descargado y arrastramos la aplicación en la carpeta Aplicaciones de nuestro Mac.

Una vez instalado Xcode, abrimos el programa y creamos un proyecto nuevo en Xcode. Para ello, accedemos a File -> New ->New Project.

Seleccionamos «Empty Application«, así crearemos un proyecto vacío. De esta manera no tenemos nada predefinido, aunque veremos todas las opciones de las que disponemos.

Nombramos el proyecto y seguimos al siguiente paso, en el que seleccionaremos el fichero donde queremos guardar el proyecto.

Una vez hecho el paso anterior, Xcode nos mostrará la pantalla con el resumen de la configuración de nuestra aplicación. En esta pantalla podemos, entre otras cosas, decir con qué orientación queremos ejecutar nuestra aplicación.

Ahora añadimos una clase a nuestra aplicación. Necesitamos que la clase tenga una interfaz.

Seleccionamos una clase de Objective-C.

A continuación, le damos un nombre a la clase y, como lo que necesitamos es una clase que sea una pantalla en la que podamos agregar controles, en «Subclass of» seleccionamos «UIViewController«. Además, marcamos la opción «With XIB for user interface» para que también se genere un fichero .xib que representará la vista de la interfaz. Por último seleccionaremos, en el paso siguiente, el destino de dicha clase. Evidentemente, tendrá que ser ubicado en el fichero del proyecto.

Agrupamos la clase en una carpeta para tener el proyecto más organizado.

Todos los pasos anteriores son los que vamos a seguir siempre a la hora de hacer cualquier proyecto.

Para iniciar la ejecución de la aplicación en la escena que hemos creado junto la clase, tenemos que editar el fichero «AppDelegate.m«, escribiendo lo que podemos ver en la siguiente imagen.

Lo primero que tenemos que hacer es importar la clase «MainViewController.h«. Una vez importada, creamos un objeto de la clase y se lo asignamos a la propidad «rootViewController» de «window«.

Seleccionamos el fichero “MainViewController.xib” y añadimos un “Label”. Después, hacemos doble click en él y escribimos “Hola Mundo”.

Por último, vamos a ejecutar la aplicación. Pulsamos el botón “Run” y vemos como arranca el “Simulador iOS”. Instantes después sale nuestra aplicación en la que podemos ver el “Label” con el texto introducido.

En la “Clase 0” no vamos a publicar un ejercicio debido a que es una pequeña explicación del entorno en el que vamos a trabajar y son cosas que vamos a repetir en las próximas sesiones del curso.

Espero que podáis seguir el curso sin ningún problema y que también os sea de gran ayuda todas las explicaciones que vamos a dar.

Clase 1:cómo capturar eventos generados por el usuario

Bienvenidos a la Clase 1 del Curso de Programacion de IPhoneBerry.

En la clase de hoy vamos a ver cómo realizar acciones con botones y explicaremos conceptos básicos que servirán en futuras aplicaciones. Volveremos a ver pasos ya realizados en la Introducción a Xcode porque no queremos hacer que tengáis que estar mirando constantemente la clase anterior para ver cómo se hacía cada uno de los pasos que no os acordéis. Conforme avance el curso iremos quitando pasos vistos con anterioridad.

Cuando terminéis la realización del ejercicio que explicaremos en la clase, podréis hacer una aplicación que reaccione a cualquier acción que el usuario haga en la escena que estéis mostrando por pantalla.

Vamos a empezar ya a hacer el proyecto de la Clase 1. En esta clase vamos a trabajar sobre una aplicación que mostrará en un label «iPhoneBerry» y, cuando pulsemos un botón, el texto cambiará y mostrará «Curso Programación iOS«.  Con ello, abrimos Xcode y empezamos la acción. Como ya vimos en la Introducción a Xcode, para hacer un nuevo proyecto iremos al menú «File->New->Project…» y seleccionaremos «Empty Application«.

El siguiente paso es nombrar el proyecto. Nosotros le hemos puesto «Clase1». La aplicación también será Universal (funciona tanto en iPhone como en iPad).

Ahora añadiremos una clase «UIViewController» a nuestro proyecto.

Seleccionaremos «Objective-C class» y pasaremos al siguiente paso, en el que nos pedirá el nombre que queremos dar a la clase y el tipo de clase de la que va a heredar. Como hemos dicho antes, queremos que sea una subclase de «UIViewController» y la vamos a nombrar «MainViewController«. Seleccionaremos «With XIB for user interface» para que se genere la clase con el fichero de la interfaz.

Insertaremos los ficheros generados en una carpeta que se llame igual que la clase, «MainViewController», para organizar mejor el proyecto.

Tenemos que decirle a Xcode que la aplicación arranque en la escena «MainViewController«. Para ello, editaremos el fichero «AppDelegate.m«. Dentro del método «didFinishLaunchingWithOptions» igualaremos la propiedad «rootViewController» de la clase «window» a un objeto instanciado de la clase «MainViewController«. Como podemos ver los métodos tienen nombres muy significativos. Eso es debido a que dichos métodos se ejecutan cuando su propio nombre indica.

Para entender mejor lo que vamos a realizar, antes de nada vamos a abrir el fichero «MainViewController.xib» y agregamos un «Label» y un «Round Rect Button«. Al «Label» le cambiamos el texto por «iPhone4Spain» y al «Round Rect Button» le escribimos «Pulsar«. Ahora ya tenemos noción de los objetos que tenemos en la parte visual de nuestra aplicación.

Luego volveremos a «MainViewController.xib» porque, para que la aplicación funcione correctamente, hay que realizar un paso importante.

Editaremos, ahora, el fichero «MainViewController.h«. Lo primero que tenemos que pensar es «¿Qué necesitamos para que nuestra aplicación funcione?» El razonamiento es sencillo, en la parte visual («MainViewController.xib«), cambiaremos la propiedad de un «UILabel» cuando el «UIButton» sea pulsado. Por lo tanto, la respuesta va a ser también sencilla. Para cambiar las propiedades de cualquier objeto visual utilizaremos «IBOutlet» y para capturar el evento de un botón cuando éste es pulsado, deslizado, etc, utilizaremos «IBAction«. Haremos la declaración del «IBOutlet» de la siguiente manera: @property «porque va a ser una propiedad de clase» (nonatomic, strong) «explicaremos en posteriores clases lo que significa« IBOutlet UILabel *nombreLabel. El «IBAction» también necesita ser declarado en este fichero. Le pondremos «pushButton«, aunque podéis llamarlo como queráis. Vamos a ver cómo quedaría en la aplicación que estamos desarrollando.

Abrimos el fichero «MainViewController.m» para editarlo. En él programaremos los getters y setters del «@property» utilizado para el «IBOutlet» y programaremos el «IBAction«. Para hacer los getter y setters del «@property» simplemente tenemos que utilizar «@synthesize nombreDeLaProperty«.

En el mismo fichero, «MainViewController.m» programaremos el «IBAction» que se ejecutará cuando el «UIButton» lance el evento que nosotros le digamos. En este ejercicios queremos que se modifique el texto del «Label«.

Si nos fijamos en el código, los string tienen un formato distinto al que se suele ver en otros lenguajes de programación como C++, @»texto». La propiedad del «UILabel«, tag es un entero que con el que podemos identificar objetos visuales. En este caso lo utilizamos para saber el estado del «UILabel«.

La parte de programación de esta aplicación ya está terminada. Como podéis observar no ha habido que hacer grandes trozos de código. Tampoco es que haga demasiado la aplicación pero os podéis hacer una idea de que en este lenguaje de programación, junto con Xcode, facilitan mucho la labor del programador. El concepto puede chocar un poco a gente que esté habituada a programar para .Net u otras plataformas de desarrollo, pero en cuanto te acostumbras a las herramientas es realmente intuitivo hacer las cosas.

Ahora toca hacer una parte muy importante, muy fácil y muy rara, enlazar el «IBOutlet» al «Label» de la vista y el «IBAction» al «Round Rect Button«.

Empezamos con el «IBOutlet«. Mantenemos pulsado la tecla «Crtl» del teclado, pinchamos con el botón derecho del ratón en el «File’s Owner» que podemos encontrar en el «Placeholders» y arrastramos hasta el «UILabel«, la linea azul que se despliega. Seleccionamos «displayLabel«, que es el «IBOutlet» que hemos creado anteriormente.

En la captura que mostramos no aparece la linea azul que une «File’s Owner» con el «UILabel«.

Por último, enlazamos el «Round Rect Button» con «File’s Owner«, haciendo la combinación de tecla y ratón que hemos hecho anteriormente, y seleccionamos «pushButton«. Haciéndolo de este modo, se enlazará con el evento por defecto del componente. En el caso del «Round Rect Button«el evento por defecto es «Touch Up Inside«.

Investigad sobre los posibles eventos y probadlos. Podéis ver la lista de eventos disponibles pulsando sobre el objeto con el botón derecho del ratón.

Sólo queda ver que no hay ningún error, probar la aplicación y ver que funciona correctamente. Pulsamos el botón «Run» y se abrirá el «Simulador iOS«.

Vemos que arranca la aplicación en «MainViewController» como hemos dicho al principio.

Comprobamos que el botón «Pulsar» modifica el texto correctamente.

La aplicación está completamente termina y funcionando correctamente. Con esto hemos terminado la clase de hoy.

A partir de ahora, os vamos a proponer un ejercicio al final de cada clase. El ejercicio guardará relación con la clase explicada y también requerirá de conocimientos explicados en anteriores clases del curso. Las clases se publicarán los lunes y la explicación/solución de los ejercicios propuestos se publicarán los viernes.

El ejercicio propuesto de hoy es una aplicación con dos botones(«Round Rect Button«) y una etiqueta(«Label«). Uno de los botones incrementará un contador que mostraremos en la etiqueta y el otro botón se encargará de poner el contador a cero. Os ponemos una captura de pantalla de cómo sería la aplicación.

Para hacer un poco más fácil la realización del ejercicio, vamos a explicar cómo realizar un contador y os diremos qué método utilizar para mostrar el formato deseado en una etiqueta.

Para realizar un contador hay que crear una variable de tipo int en la «@interface» del «UIViewController«. Sé que puede, al principio, resultar saber cómo hacerlo, pero si buscáis ayuda por internet no tendréis ningún problema en dar con la solución.

El método que hay que utilizar para poder mostrar texto con el formato requerido es «stringWithFormat» de la clase «NSString«. Buscad información de cómo utilizar correctamente el método.

Curso 2:transición con pushViewController

Bienvenidos a la Clase 2 del Curso de programación iOS de iPhoneBerry.

En esta clase vamos a aprender a hacer transiciones «pushViewController» entre diferentes escenas de nuestra aplicación.

La transición «pushViewController» es muy común en las aplicaciones iOS. Se suele utilizar, sobre todo, para mostrar el detalle de una fila en un listado. Los listados(«TableView«) los veremos en la Clase 4.

Vamos ya a empezar la explicación de cómo hacer transiciones con «pushViewController«. Podéis combinar el ejercicio de hoy con ejercicios anteriores o ampliarlo, añadiendo componentes o funcionalidades.

Como siempre, empezamos creando un nuevo proyecto, New -> Project -> Empty Application. Le ponemos un nombre, nosotros le hemos puesto «Clase2«.

Una vez creado el proyecto, agregamos dos ficheros. Uno va a ser para la primera escena y otro para la segunda.

Ambos ficheros van a ser «Objective-C class«.

A la primera escena la vamos a llamar «MainViewController» y a la segunda «SecondViewController«. Acordaos de agregar los ficheros generados en carpetas para tener el proyecto ordenado.

La estructura de ficheros del proyecto será tendrá que ser como el que vemos en la siguiente imagen.

Abrimos y editamos el fichero «AppDelegate.m«.

Importamos «MainViewController.h» para poder hacer referencia a la clase. Creamos un objeto de la clase «MainViewContoller«.

Ahora vamos a crear un objeto de la clase «UINavigationController» asignando el objeto de «MainViewController«. Para ello, utilizaremos la propiedad «initWithRootViewController«.

El objeto de «UINavigationController» es el encargado de hacer las transiciones entre escenas. Como vamos a ver, a lo largo de la clase, es muy sencillo hacer este tipo de transiciones y, además, le dá dinamismo a la aplicación.

Vamos a editar el fichero «MainViewController.h«. Lo único que hay que hacer en este fichero es declarar un «IBAction» que nosotros hemos llamado «pushButton«.

En el fichero «MainViewController.h» implementamos el «IBAction» que hemos declarado en «MainViewController.h«.

Antes que nada importamos «SecondViewController» y, en el método «viewDidLoad«, hemos modificado el «title» de «MainViewController«.

El «IBAction» será el encargado de llamar a la siguiente escena. Dentro del método, declararemos un objeto de la clase «SecondViewController«, le cambiamos el title y decimos que el «navigationController» haga «pushViewController» con el objeto de «SecondViewController«. También le decimos que, cuando haga la transición, haga la animación.

Los fichero de «SecondViewController» no los vamos a editar porque no va a hacer ningún tipo de función.

Por último, modificaremos las interfaces.

En la interfaz de «MainViewController» vamos a agregar un «Round Rect Button» y lo enlazaremos con «File´s Owner«. Para enlazar el «Round Rect Button» con el «IBAction«, hay que combinar la tecla «Ctrl» y el botón derecho del ratón sobre el «Round Rect Button» y arrastramos hasta «File´s Owner» al igual que vimos en la Clase 1 del Curso de Programación de iPhone4Spain. Seleccionamos «pushButton» de la lista.

En la interfaz de «SecondViewController» cambiamos el color de fondo.

Ahora sólo queda ejecutar la aplicación y comprobar que funciona correctamente.

Pulsamos el botón y vemos que hace correctamente la transición.

El ejercicio que proponemos en esta clase es una aplicación que tendrá tres escenas.

Una principal que contendrá dos botones.

Si pulsamos el botón con el texto «Verde«, se mostrará la escena con fondo verde. Si pulsamos el botón con el texto «Amarillo«, mostraremos la escena con el fondo amarillo.

Clase 3:Secciones con TabBarController

Bienvenidos a la Clase 3 del Curso de Programación de iPhoneBerry.

En la clase de hoy veremos cómo separar escenas según su categoría. Para ello, vamos a utilizar el conocido componente “tabBarController”.

Este componente es utilizado en la «App Store«, entre otras aplicaciones, y dá un aspecto integrado a todas las aplicaciones que realicemos.

En el ejercicio, que vamos a realizar a continuación, podemos ampliarlo con ejercicios vistos en anteriores clases del Curso de Programación iOS de iPhoneBerry.

Empezamos, como siempre, creando un nuevo proyecto. “File -> New -> Project…”. Seleccionamos un proyecto “Empty Application”.

Le damos un nombre. Nosotros le hemos llamado “Clase3” y lo guardamos en el directorio que nos convenga.

Ahora, crearemos los ficheros de las clases que contendrán las escenas: “FirstScene” y “SecondScene”.

Agregamos un nuevo fichero al proyecto.

Seleccionamos “Ojective-C class”.

Le damos un nombre y marcamos la opción “With XIB for user interface”.

Recordad agrupar los ficheros generados en una carpeta, dentro del proyecto, para tenerlo más organizado.

Abrimos el fichero «AppDelegate.m» para crear el «tabBarController» y enlazarlo con el inicio de la aplicación.

Antes que nada, en el fichero «AppDelegate.m«, importaremos las clases creadas en el paso anterior, «FirstViewController» y «SecondViewController«.

Creamos un objeto de la clase «FirstViewController» y otro «SecondViewController«.

También creamos un objeto de la clase «UITabBarController» que es el que utilizaremos para separar por categorías nuestra aplicación.

Una vez hecho lo anterior, creamos un objeto de «NSArray» que inicializaremos con los objectos de «FirsViewController» y «SecondViewController«.

Por último, asignamos el objeto «NSArray» a «tabBarController» con el método «setViewControllers» y a la propiedad «rootViewController» de «window» le asignamos el «tabBarController«.

Vamos a ponerle imágenes a los botones del «tabBarController«.

Hay que saber que las imágenes que hay que añadir para el «tabBarController«, tienen que ser de fondo transparente para que el propio componente se encargue de dar el color si está pulsado o no.

Primero hay que agregar las imágenes al proyecto. Pulsamos con el botón derecho del ratón sobre la carpeta de la clase donde queremos agregar la imagen y elegimos «Add Files to «Clase3″…«.

Seleccionamos la imagen que queremos y pulsamos «Add»

Para hacer que se cargue la imagen en el botón correspondiente del «tabBarController«, hay que programarlo ya que la carga se hará de forma dinámica.

Vamos a ver cómo sería en «FirstViewController«. El proceso hay que repetirlo para «SecondViewController«.

Abrimos el fichero «FirstViewController.m» y accedemos a la imagen del «tabBarController» mediante «self.tabBarItem.image«. Con el método «imageNamed» de la clase «UIImage» decimos el nombre de la imagen que tenemos agregada al proyecto.

Además de cargar la imagen, vamos a cambiar el titulo de la escena. Todo se hace en el método «initWithNibName«.

Por último, cambiamos el color de fondo de las escenas.

Sólo queda ejecutar la aplicación y comprobar que funciona correctamente.

El ejercicio que vamos a proponer para esta semana no es más que hacer el mismo que hemos realizado en la explicación de la Clase 3pero con tres escenas. La dificultad del ejercicio propuesto no es la programación sino en conseguir que se vean bien las imágenes que insertemos en el proyecto. Intentad que sean lo más parecidas a las de la siguiente imagen.

Como podéis ver, estamos obteniendo conocimientos para poder hacer aplicaciones que se asemejan mucho a las que podéis comprar en la «App Store«. Seguiremos viendo, en las próximas clases, más componentes que sirven para contextualizar, aún más, nuestras aplicaciones.

Clase 4:introducción a TableViewController

Bienvenidos a la Clase 4 del Curso de Programación iOS de iPhoneBerry.

En esta clase vamos a hacer una introducción a la utilización del «TableViewController«, uno de los componentes más importantes y más utilizados en la aplicaciones iOS. A lo largo del curso profundizaremos más en utilidades y propiedades de este componente.

Este componente se utiliza para crear listados de elementos. Sin ir más lejos podemos ver el ejemplo en la AppStore, donde tendremos listados de los tipo de aplicaciones que hay.

Empezamos ya con la clase creando un proyecto nuevo. «File -> New -> Project…«. Seleccionamos una «Empty Application».

Nombramos el proyecto. Nuestro proyecto lo hemos llamado «Clase 4«.

Una vez creado el proyecto, vamos a añadir un nuevo fichero de la clase «UITableViewController» con el que crearemos el listado.

Primero, pulsamos el botón derecho en la carpeta del proyecto y pulsamos «New File… »

Seleccionamos «Objective-C class«.

En el siguiente paso nombramos a la clase. Nosotros la hemos llamado «ListViewController«.

Seleccionamos que es subclase de «UITableViewController» y marcamos «With XIB for user interface«.

Agrupamos los ficheros en carpetas con el nombre de la clase para tener el proyecto ordenado.

Una vez añadido la «ListViewController» vamos a hacer que la aplicación arranque en la escena asociada. Para ello, como siempre, editamos el fichero «AppDelegate.m«.

Importamos «ListViewController.h«, creamos un objeto de «ListViewController» y lo asignamos a la propiedad «rootViewController» de «window«.

Ahora abrimos el fichero «ListViewController.m» y vamos a observar los métodos «numberOfSectionsInTableView«,  «numberOfRowsInSection» y «cellForRowAtIndexPath«.

En «numberOfSectionsInTableView» es el método donde indicamos el número de secciones que va a tener el «TableViewController«. En «numberOfRowsInSection» indicamos el número de filas que tendrá el componente. Es importante quitar los #warning una vez modificamos los métodos.

El «TableViewController» de la aplicación va a tener una sección y doce filas.

Además, el texto que va a tener cada celda es «Celdas«. Para ello, modificamos el método «cellForRowAtIndexPath«.

También, hay que comprobar que «cell» sea igual a «nil» e inicializar «cell«, sino dará error al ejecutar la aplicación.

Ejecutamos y probamos el funcionamiento de la aplicación. Podéis poner un «breakpoint» en el método «cellForRowAtIndexPath» para ver cómo se comporta cuando se ejecuta.

La aplicación mostrará el «UITableViewController» con doce filas en las que el «textLabel» tendrá escrito «Celdas»

La aplicación que vamos a proponer esta semana ha de tener 25 filas en las que mostraremos el número de celda y el índice que tiene. Para ver el índice utilizaremos una variable que recibe el método, «indexPath«.

Clase 5:Listado y detalle con patrón delegado

Bienvenidos a la Clase 5 del Curso de Programación iOS de iPhoneBerry.

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 “<DetailDelegate>” 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 propuestopara 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.

Clase 6:insertar elementos en UITableViewController

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

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

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.

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.

Clase 7: cómo utilizar la herramienta Storyboard

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

En esta clase vamos a hacer una introducción a una herramienta, integrada en Xcode, llamada Storyboard. Con ella podemos tener una visión general de la aplicación a través de sus escenas. Facilita la navegación entre escenas por lo que se trabaja de forma algo diferente a los ejercicios de clases anteriores.

Es una herramienta muy potente y va a ser un punto de inflexión para el desarrollo de vuestras aplicaciones iOS.

Vamos a ver cómo sería el desarrollo de la aplicación de la Clase 6 con Storyboard para que veáis la diferencia entre utilizarlo o no.

Creamos un proyecto nuevo. File ->New->Project…

En esta ocasión, vamos a seleccionar un proyecto «Single View Application«.

El proyecto lo hemos llamado «Clase 7» y marcamos la opción del formulario «Use Storyboard«.

Eliminamos el «ViewController» que genera automáticamente, tanto en el esquema de ficheros como en el Storyboard.

El siguiente paso es añadir todos los ficheros que necesitamos para el ejercicio: «ListViewController» que es subclase de «UITableViewController«, «DetailViewController» subclase de «UIViewController» y «ModalViewController» subclase de «UIViewController«. En esta ocasión, cuando insertamos los ficheros, no tenemos que seleccionar la opción «With XIB user interface» porque añadiremos las interfaces de usuario en el Storyboard.

Todos los ficheros que hemos insertado al proyecto los ordenaremos en carpetas.

Hemos de tener creada la estructura de ficheros que mostramos en la siguiente imagen.

Abrimos el Storyboard y añadimos las interfaces de usuario.

Agregamos el componente «Navigation Controller«. Puede que os aparezca junto con un «ViewController«. En ese caso, borramos el «ViewController» y añadimos un «TableViewController«. Ahora, enlazamos con el botón izquierdo del ratón + Ctrl el «Navigation Controller» y el «TableViewController» y seleccionamos «Relationship – Root View Controller«.

En la propiedad «Class» del «ViewController» seleccionamos «ListViewController«, de esta manera le decimos que es la interfaz de «ListViewController«.

Seleccionamos la celda del «ListViewController» y, en la propiedad «Identifier» le ponemos el nombre de «Cell«.

Añadimos un «Bar Button Item» a la «Navigation Bar» y seleccionamos «Add» en el «Identifier» del «Bar Button Item«.

Agregamos dos «ViewController«, uno para «DetailViewController» y otro para «ModalViewController«. Insertamos en los «ViewController» los componentes necesarios para tener el mismo resultado que en la Clase 6.

Enlazamos los «ViewController» al «ListViewController» para hacer la navegación de la aplicación.

Primero enlazamos «ModalViewController«. Como vamos a mostrar la escena cuando le demos al botón «+«, pulsamos el botón izquierdo del ratón + Ctrl y lo arrastramos hasta el «ModalViewController«. Seleccionamos el tipo de transición «Modal«.

Vamos a enlazar «DetailViewController«. En este caso, vamos a enlazarlo desde la celda del «TableView» y seleccionamos el tipo de transición «Push«.

El Storyboard ha de tener el siguiente aspecto.

Puntos a tener en cuenta en el Storyboard:

• Enlazar la escena del Storyboard con la clase a la que pertenece.

 

• Poner identificador al enlace creado para poder acceder a él.

 

• Cuando trabajamos con Storyboard no es necesario editar el fichero “AppDelegate.m” para arrancar desde alguna escena.

Empezamos la edición de ficheros con “ModalViewController.h”. Vamos a declarar el “delegate” con un método que es obligatorio que esté implementado en la escena padre.

El método es “newContact” y es el encargado de agregar un contacto nuevo al listado.

Declaramos el objeto “delegate”, dos “IBOutlet” para los “UILabel” (uno para “nameTextField” y otro para “surnameTextField”) y dos “IBAction” (“saveNewContact” y “cancelNewContact”).

Abrimos el fichero “ModalViewController.m” y añadimos los @synthesize de “delegate”, “nameTextField” y “surnameTextField”.

Lo último que haremos en la edición del fichero es programar los métodos que harán la funcionalidad de dar de alta a un nuevo contacto y cancelar el alta del nuevo contacto.

Abrimos ahora el fichero “DetailViewController.h” en el que declaramos un “NSDictionary”, en el que guardaremos la información de la fila seleccionada, y Dos “IBOutlet”, con los que mostraremos la información por pantalla.

Una vez declarado todo lo que necesitamos en el “DetailViewController.h”, abrimos el fichero ”DetailViewController.m”. Como siempre, lo primero que haremos será hacer @sinthesize de todos lo objetos declarados en “DetailViewController.h”.

Buscamos el método “viewDidLoad” y añadimos el título de la escena, además de rellenar los “IBOutlet” con la información de la celda seleccionada.

Por último, tenemos que programar los ficheros “ListViewController.h” y “ListViewController.m”.

Abrimos el fichero “ListViewController.h” e importamos “ModalViewController.h” para que “ListViewController” pueda soportar el “delegate” de ModalViewController. También declaramos la estructura donde guardaremos la información de la lista. La hemos llamado “items” y es un objeto de la clase “NSMutableArray”.

Ahora vamos a editar el fichero “ListViewController.m”. Importamos “DetailViewController.h” y “ModalViewController.h”. Declaramos el @sinthesize del objeto “NSMutableArray” “items” que hemos declarado anteriormente en el fichero “ListViewController.h”.

En el método “viewDidLoad” inicializamos el objeto “items” y añadimos un título a la escena, nosotros le hemos llamado “Contactos”.

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.

Creamos el método obligatorio que ha de contener “ListViewController” debido a la declaración del “delegate” de “ModalViewController”. La función que ha de desempeñar el método es la de añadir el objeto “item”, que recibe de “ModalViewController”, a la lista “items”.

Ahora, vamos a hacer un método, en el cual vamos a discriminar los dos enlaces creados en el Storyboard. Este método es por el que tenemos que poner un “Identifier” en cada transición.

El método será el encargado de pasar la información de una escena a otra con la propiedad “segue.destinationViewController”.

El último paso es enlazar todos los objetos que tienen funcionalidad con los diferentes “IBOutlet” y “IBAction”.

Para finalizar la aplicación, vamos a enlazar los componentes con sus métodos u objetos correspondientes.

Como venimos repitiendo en algunas clases de este tutorial, para enlazar un objeto del “XIB”, simplemente, arrastramos el ratón con la combinación Ctrl + botón izquierdo desde el origen al destino. En el caso de los “IBOutlet”, desde “File’s Owner” hasta los componentes de texto, y en el caso de los “IBAction” el proceso de enlace es al revés, desde el componente al “File’s Owner”.

Probamos el funcionamiento de la aplicación.

Con esta clase terminamos el Curso de Programación iOS.

Quiero agradecer a todos los que habéis seguido el curso porque ha sido muy gratificante leer todas las dudas generadas y las muestras de apoyo que nos habéis dado.

Esperamos que este curso os haya sido de gran ayuda para iniciaos en el mundo de la programación de aplicaciones móviles.