Guiabreve

No soy ningún profesional en lo que al desarrollo de aplicaciones se para iPhone se refiere. Mas bien estoy aprendiendo. Mientras tanto, trataré de enseñar algunos conceptos básicos para aquellos que quieran iniciarse en este mundillo.

Aprender no me esta resultando nada fácil. La mayoría de libros que encuentro son de versiones anteriores de xCode y no de la actual (la 4.2) y el problema es que muchas cosas han cambiado entre la versión anterior y la actual.

Este manual, y todos los que le precedan estarán hechos con xCode 4.x. Espero que os sea de ayuda y os guste la guia.

Comenzamos

Para empezar, comenzaremos por una aplicación sencilla que tras presionar un botón, nos mostrará el clásico mensaje de “Hola mundo”.

1. Creamos el proyecto

Para ello, abrimos xCode y creamos un nuevo proyecto. Para este primer programa usaremos una “Single View Application“. Le ponemos de nombre, por ejemplo, holaMundo y marcamos las dos primeras opciones [img]: “Use StoryBoard” y “Use Automatic Reference Counting”.

Por último, lo guardamos donde queramos.

2. Ventana de xCode

La imagen superior representa a la ventana que nos encontraremos una vez hayamos creado el proyecto. En esta ventana tenemos todo lo necesario para crear nuestro programa.

Lo que nos interesa, por ahora, son los archivos en la barra izquierda, concretamente tres:

1. Mainstoryboard.storyboard en este archivo diseñaremos toda la parte visual del programa. Diseñaremos las distintas ventanas, con los distintos controles, botones, labels (etiquetas), etc.

Por otra parte, el ViewController gestiona las interacciones que tu código tiene con el display, y también gestiona las interacciones del usuario con tu código. Esta clase esta compuesta por dos archivos.

2. ViewController.h que contiene la cabecera
3. Y, ViewController.m que contiene la implementación

Es decir, en la cabecera definimos aquellas cosas que vayamos a hacer en la implementación.

3. Es hora de programar

Tendremos que trabajar en los tres archivos para esta aplicación. Vayamos uno por uno comenzando por la cabecera.

ViewController.h

Esta es la vista inicial del archivo sin los comentarios.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

Lo que tenemos que hacer, en la cabecera, es definir los elementos y acciones que nos hacen falta. Para el programa necesitamos definir una Label y una acción que se ejecutará al pulsar el botón.

El archivo quedará así:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController {
    
    // Etiqueta
    IBOutlet UILabel *etiqueta;
}

// Accion
-(IBAction)mostrarMensaje:(id)sender;

@end

• En la linea 6: Definimos el label que estará en la interfaz. IBOutlet por que es un elemento de StoryBoard del tipo UILabel con el nombre “etiqueta”.
• En la linea 10: definimos la acción. Esta tiene que estar fuera del @interface ya que no pertenece a ella. El nombre de la acción es “mostrarMensaje”.

Guardamos.

ViewController.m

En el archivo de implementación tenemos que desarrollar la acción mostrarMensaje que definimos en la cabecera.

Esta acción tiene como unica función definir el texto de la “etiqueta” para mostrar el mensaje “Hola mundo”.

Dentro de la @implementation tendremos que añadir los siguiente:

-(IBAction)mostrarMensaje:(id)sender {
    etiqueta.text = @"Hola Mundo";
}

Como vemos, solamente cambia la propiedad text de la etiqueta.

Guardamos.

MainStoryBoard.storyboard

Aqui, tenemos que definir el botón y el label. Además tenemos que indicar que el label equivale a “etiqueta” en nuestro código y que el botón ejecutará la acción “mostrarMensaje”.

Vamos paso a paso. Primero diseñamos la aplicación añadiendo los elementos. Simplemente arrastramos un Label y un Round Rect Button a la aplicación para que nos quede más o menos así.

Para terminar solo nos queda relacionar los elementos. Primero hacemos click derecho sobre el label y arrastramos el circulo a la derecha de “New Referencing Outlet” a la vista y seleccionamos “etiqueta”.

Con el botón es parecido. Pero en vez de “New Referencing Outlet” tenemos que arrastrar el circulo de “Touch Up Inside” y luego seleccionar “mostrarMensaje:”.

4. Terminamos

Nuestra aplicación esta lista. Ya podemos ejecutarla pulsando el play en la parte superior izquierda y comprobar que todo funciona bien.

Espero que os haya gustado y este todo bien explicado. Cualquier duda, usar los comentarios y como siempre se agradece compartir el enlace en Twitter, Facebook o Google Plus.