Desarrollando sobre iPhone (5): nuestra primera aplicación (III)

En nuestro anterior artículo habíamos incluido en la interfaz de nuestra aplicación un Label, un TextField y un Button. Pretendíamos que el contenido del Label se actualizase con lo introducido en el TextField al pulsar sobre el Button. Habíamos (paso 1) creado el proyecto, y (paso 2) utilizado InterfaceBuilder para definir la pantalla. Ahora continuaremos con el resto de pasos para dejar la aplicación funcionando.

Paso 3. Crear variables en el ViewController.

Disponemos de nuestra interfaz correctamente. De hecho, si hiciésemos Build & Go podríamos ver cómo nos va quedando:

Pero obviamente no pasa nada el pulsar en el botón, porque no hemos realizado los desarrollos mínimos imprescindibles. En este paso 3 vamos a introducir las variables y métodos en el HelloWorldViewController, tanto en la interfaz (fichero .h) como en la implementación (fichero .m). Para ello, según indicamos al final del post anterior, tenemos que saber que el TextField se corresponde con una clase UITextField, y el Label con una clase UILabel. Estas 2 clases están dentro del framework UIKit.

Si no hemos cerrado y grabado Interface Builder, lo hacemos y en XCode abrimos el fichero HelloWorldViewController.h. El código ahora mismo tendrá algo así:

Ya estamos viendo algo de Objective-C. En este código vemos una declaración de importación de la librería UIKit, donde están las clases UILabel y UITextField. Vemos cómo se declara la interface, y que ésta extiende de la genérica UIViewController de UIKit.

Dentro del código de la interfaz incluimos el siguiente código:

Podemos explicar ahora qué hemos hecho:

• Hemos declarado dentro del bloque @interface 2atributos de tipo UILabel y UITextField, con 2 nombres de variables *label y *textField respectivamente. Por delante aparece IBOutlet. ¿Qué es todo esto? Nos explicamos. IBOutlet no es un tipo de variable; es una directiva que le ayuda a Interface Builder a conocer la existencia de estas variables de tipo UILabel y UITextField. Por cierto, recordad que en el anterior artículo os habíamos dado un truco para conocer los tipos de variable de los objetos de control (botones, label, text field, etc.) en Interface Builder. Por otro lado, el tema de los * delante del nombre de variable puede sorprender a los programadores Java, no tanto a los de C… pero aprended que así escribiréis en Objective-C las variables de instancia.
• Se declaran las propiedades UILabel y UITextField. nonatomic y retain no lo veremos por ahora, está relacionado con la gestión de memoria.
• Vemos que declaramos un método, updateTexto. Tiene un signo – delante, indicando que es un método de instancia, y no de clase (para ellos se explica un signo +). No podemos entrar a explicar a esto porque esto es programación básica orientado a objetos… Ese método no devuelve nada (es decir, void) y recibe un parámetro de tipo id. Básicamente se refiere al identificador del objeto que provocará la llamada a nuestro método updateTexto, que actualizará el valor del label. Podemos adivinar ya que ese control será el propio botón…

Una vez hecho esto, hemos acabado con el paso 3.

Paso 4. Enlazar controles de la vista con variables del controlador.

Si repasamos, por un lado hemos desarrollado nuestra interfaz con Interface Builder, y por el otro disponemos de las variables relacionadas con esos controles en el HelloWorldViewController.h (interface de la clase controladora HelloWorldViewController.m). Sin embargo, todavía no existe una relación entre la vista y el controlador, es decir, no hemos dado ninguna instrucción para relacionar, por ejemplo, el campo de texto que diseñamos en Interface Builder con la variable de tipo UITextField que hemos metido en la clase. Ahora vamos a realizar esta tarea. Abrimos nuevamente Interface Builder pulsando sobre HelloWorldViewController.xib, pulsamos sobre la caja de texto, y en la paleta Inspector nos vamos a la segunda pestaña (Text Field Connections). Vemos que existe un apartado llamado Referencing Outlets, sin que haya nada marcado. Eso significa que en estos momentos Interface Builder no conoce ninguna relación entre este campo de texto y un IBOutlet (Interface Builder Outlet) de una clase… pero tenemos un IBOutlet UITextField en nuestro HelloWorldViewController, así que vamos a enlazarlo.

Para ello, como vemos en la figura, pulsando sobre el pequeño círculo al lado de «New Referencing Outlet», arrastramos hasta el File’s Owner de la ventana llamada HelloWorldViewController.xib. Nos dejará escoger 2 opciones, view (la vista completa) y textField (nuestra variable). Obviamente escogemos textField, y así relacionamos nuestra caja de texto con la variable de su tipo UITextField. Por cierto, el File’sOwner o dueño del fichero es ni más ni menos que nuestra clase controladora…

Repetimos la operación con el label, relacionándola con nuestra variable del controlador label. Y con el botón, es algo distinto. En este caso lo vamos a relacionar con nuestra operación updateTexto, pero para un evento en concreto. Haced esta operación con el evento ‘Touch Up Inside’, y escoged nuestro método updateTexto:

Y de esta forma ya sí tenemos relacionados los controles que habíamos definido con Interface Builder y las variables que hemos metido en el controlador. Cerramos Interface Builder grabando todo y nos vamos al último paso volviendo a XCode.

Paso 5. Últimos desarrollos.

En XCode abrimos el HelloWorldViewController.m y metemos el siguiente código para que nuestra clase nos quede así:

Si nos fijamos bien hemos metido simplemente el bloque @synthesize, y la implementación del método declarado en la interface .h, updateTexto. Debajo de ese código tendréis mucho código comentado.

La línea de @synthesize hace algo similar a generar los típicos getter/setter (accesores / mutadores) típicos en los lenguajes OO (encapsulación). Los necesitamos para que al controlador le llegue el contenido, por ejemplo, de la caja de texto.

El método updateTexto, como veis, simplemente actualiza el texto de nuestro label con el contenido del campo de texto. Hemos acabado.

Ahora, simplemente hacemos Build & Go, y veréis que al meter una cadena de texto y pulsar en el botón, el contenido del label se actualiza. En el siguiente artículo introduciremos mejoras a nuestra aplicación.