Tutorial Programación iOS: Capturar eventos generados por el usuario (Clase 1)

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

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 "iPhone4Spain" 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.

Este viernes, día 30 de marzo, publicaremos la explicación de cómo realizar el ejercicio propuesto y colgaremos el proyecto para que podáis ver el código con más detalle.

Un saludo y hasta la próxima clase.

Vía | iPhone4Spain.com - Clase 1