Tutorial 2: Hola Mundo++

Hola,

Hoy voy a mostrar como hacer interacción con elementos de la GUI, particularmente con un botón.

La interfaz a desarrollar es esta:

En esta aplicación hay un botón que dice "Hola Mundo" y al darle click queremos que cambie a "Hello World", al darle click de nuevo queremos que cambie a "Hola Mundo" otra vez, y así sucesivamente.

El código fuente del Tutorial 1 nos servirá como punto de partida, por lo que en este tutorial solamente vamos a explicar las conexiones que debemos hacer para que nuestro botón ejecute una pieza de código que modifica el texto contenido dentro del mismo botón.

Cambios en el código fuente

Primero, como dentro de nuestro código vamos a tener que modificar un elemento de la GUI necesitamos crear un atributo dentro de nuestra clase HelloWorldView.h que permita referenciar al elemento gráfico. Esto se logra creando un atributo de tipo UIButton* así:

UIButton *button;

Y declarando una propiedad con el mismo nombre y anotada con IBOutlet así:

@property (nonatomic,retain) IBOutlet UIButton *button;
 
Pero como además vamos a necesitar llamar a nuestro código fuente desde una acción del botón de la GUI, necesitamos declarar una función callback (como un listener de Java), de esta manera:

- (IBAction)buttonCallback:(id)sender;

Hasta aquí no hemos creado conexiones pero la idea es que:

• Cuando queramos cambiar desde el código el texto deel botón de la GUI usemos nuestra propiedad button
• Cuando queramos invocar desde nuestro botón de la GUI el código fuente de la aplicación usaremos la función buttonCallback

Resumiendo, el código fuente es este:

 

Pero si recordamos,  al modificar el ".h" sólo declaramos las propiedades y funciones, mas no las implementamos (el "qué hacen" mas no el "cómo lo hacen"), por lo cual necesitamos modificar también nuestro ".m" para realizar las respectivas implementaciones.

Vamos a crear en HelloWorldView.m la función buttonCallback, tal como se muestra en la siguiente imagen, además de sintetizar nuestra propiedad button (recuerdan el código fuente del tutorial 1?).

También es de tener en cuenta que estamos decrementando el conteo de referencias de nuestra propiedad button en el método dealloc.

 

La función que acabamos de crear usa algunos mensajes que no conocemos:

• button:titleForState
  Este mensaje obtiene el texto que aparece dentro del botón. El "estado" al que hace referencia este método es uno de varios posibles estados en que el botón puede estar ("desactivado" por ejemplo). El valor retornado es un NString, por lo que para comporarlo con otro NSString se debe usar el método NSString:compare:
• button:setTitle::forState
  Este método es el compañero del anterior, en vez de obtener el texto del botón, lo cambia.

No voy a explicar la lógica del método pues es sólo darle una mirada y ya.

Listo, todo el andamiaje de código fuente está terminado, ahora falta construir la respectiva parte en la GUI.

Modificación de la GUI

Recuerdan el "Interface Builder" ? Bueno pues necesitamos abrirlo y seleccionar nuestro botón. Aquí lo que vamos a hacer es decirle a nuestro botón "cuando alguien te "toque adentro" debes invocar el método buttonCallback.

Hacer esto es fácil con el "Interface Builder" pues es sólo Drag n Drop. Seleccionamos entonces neustro botón y en la ventana "Button Components" deben mostrarse todas las posibilidades de acciones que el botón puede realizar, vamos a buscar a "Touch up inside" y vamos a tomar el círculo a su derecha y arrastrarlo hasta el elemento "File's owner" de la ventana HelloWorldView.xib

Esto suena complicado, por lo cual lo muestro gráficamente en esta imagen:

Listo, ya creamos la conexión entre nuestro botón y la función buttonCallback que creamos antes.

Pero aún falta la configuración para que nuestra propiedad button referencie al botón real, esto lo hacemos de la siguiente manera:

Aquí estamos asignando a "New Referencing Outlet" de nuevo a "File's Owner", y cuando nos aparezca la ventana para elegir la propiedad a la que queremos asignar la referencia, escogeremos button.

Al final nuestra ventana debe quedar así:

Listo, ahora si eso es todo. Sólo falta ejecutar la aplicación y dar click en el botón varias veces para ver como cambia su texto cada vez.

Dé click aquí para descargar el código fuente de este tutorial

Chao, hasta la próxima !