Muy molesto por el poco contenido en español que existia sobre el Objective C y los tutoriales que requieren un poco de conocimiento tecnico he decidido comenzar una serie de tutoriales basados en mis apuntes. A esto lo he llamado el Walhez Learning Center y publicaré paulatinamente (espero uno a la semana) textos con los pasos puntuales para herramientas como : Django, CodeIgniter, WordPress, Apache, Android, Blackberry OS, entre otras cosas que he aprendido. Quizá me lleve la vida haciendo esto pero creo que vale la pena.

Todo el tutorial es paso por paso y utiliza el paquete de developer en Ingles. No explicare mucho de la sintaxis de Objective C revisa http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/ObjectiveC/Introduction

Cosas que aprenderas

En el siguiente curso aprenderas:

  • Como usar Xcode y poder configurar aplicaciones del tipo  View-Based Application.
  • Como usar el Interface Builder para crear xib y views.
  • Como usar y entender los IBOutlet. En otras palabras la instancia que permite conectar Variables de instancia con el Interface Builder.
  • Como usar  y entender las IBAction. En  Otras palabras la instancia que permite conectar eventos del Interface Builder con sus respectivos manejadores de eventos.
  • Como usar Drag-and-Drop para conectar los elementos del Interface Builder con variables de Instancia en los controladores.
  • Como usar Drag-and-Drop para conectar los eventos del Interface Builder con variables de Instancia en los controladores.

 

Prerequisitos

Seguirnos en Twitter  como @walhezblog.

Tener una Mac.

Tener instalado y configurado el IOS 4.2 Developer Kit.

Crear un nuevo proyecto en Xcode

Para crear un proyecto en OBjective C sigue los siguientes pasos.

  1. Si Xcode no esta ejecutandose:
    1. Abre el Finder (el icono de la carita en el Doc).
    2. En el panel izquierdo, da click en Macintosh HD.
    3. En el panel derecho, Da click en el folder Developer.
    4. Da click en el folder Applications.
    5. Da click en el icono de Xcode
  2. Con Xcode Ejecutando se:
    1. Ve a File > New Project
    2. En el panel Izquierdo, selecciona Application dentro de la sección de iPhone OS.
    3. En el panel Derecho de la misma ventana, selecciona View-Based Application. (Importante: Selecciona View-Based Application y nada mas)
    4. Da click en el botón Choose.
    5. Ingresa un nombre, para este tutorial utilizaré Counter como nombre de proyecto.
    6. Da click en Save.
  3. Xcode a creado un par de archivos y carpetas de manera automatica. Explicaremos después como funciona cada una de estas.
  4. Da click en Build and Go para poder visualizar tu aplicación en el simulador.
  5. Veras que se abre una aplicación con un fondo gris.:

El proximo paso es crear nuestra interfaz.

Acerca del Interface Builder

Mientras que Xcode es para aventar código, el Interface Buildig es para desarrollar interfaces.Esta herramienta te servirá en este tutorial para:

  1. Arrastrar y soltar 2 controles, el UILabel y el UIButton, en la vista. Poscicionarlos en su lugar final para el usuario.  El UILabel mostrara el valor del contador que construimos, mientras que el UIButton aumentará el valor.
  2. Utilizaremos IBOutlet para conectar nuestro Label con una variable local en Xcode.
  3. Utilizaremos tambien  los IBAction para poder detectar eventos dentro de las ventanas para ejecutar metodos en Xcode.

Tanto el Interface Builder como Xcode son herramientas diferentes, muchas veces dejan de sincronizarse. Ten cuidado de como es que trabajas y estate atento de todo lo que se crea.

Empezando el Interface Builder

Para corre el Interface Builder:

  1. En Xcode en la ventana de File Name,veras el CounterViewController.xib. ( o [nombre de tu proyecto]ViewController.xib)
  2. Da doble click en CounterViewController.xib.( o [nombre de tu proyecto]ViewController.xib)
  3. Se abrirá el Interface Builder así como muchas otras ventanas.

Interface Builder :  File’s Owner

En el Interface Builder veras una serie de 3 iconos en una ventana pequeña cuadrada :

  1. File’s Owner. Este icono conecta el la interface con la clase en Xcode.
  2. First Responder. Ignoremos por ahora.
  3. View. Esta es la vista actual del proyecto que trabajamos.

EL Icono que dice  File’s Owner muestra la definición de la clase que maneja esta vista en Xcode. Para poder usar una vista con un controlador lee lo siguiente:

  1. En la ventana pequeña veras 3 iconos. Juntos se llaman View Mode.
  2. Por default todos están en icon view mode.
  3. Si haces click en el boton de en medio podrás ver  Name (nombre) y su Type (tipo ) de cada uno de los iconos. En la columna de tipo podrás ver la herencia de cada elemento.
  4. Repitamos el  File’s Owner asocia el archivo de vista xib con la determinada clase en Xcode. Es el contector. Para poder conectarlo desde el código utilizaremos la instancia IBOutlet y la instancia IBAction que veremos después.

Usando el Interface Builder Para hacer vistas

Para poder trabajar con el Interface Builder sigue los siguientes pasos:

  1. En Interface Builder, haga doble clic en el icono de View que está en la misma ventana que el File’s Owner y the First Responder.
  2. Usted debe observar una ventana llamada View abierta (it may already be open).
  3. Observe que el color de fondo de la vista es de color gris.
  4. Usa el menu del Interface Builder y selecciona Tools > Library.
  5. Observa  una ventana llamada Library.
  6. En la ventana Library, observa que hay una colección de  Objects/Classes/Media. Por ahora nos concentraremos con los objetos unicamente.
  7. Observa la palabra Library que esta debajo del boton Objects/Classes/Media.
  8. Da click en la flecha de la caja donde esta la palabra Library, verás lo siguiente:
    1. Cocoa Touch Plugin
    2. Custom Objects
  9. Dentro de Cocoa Touch Plugin, Veras:
    1. Controllers
    2. Data Views
    3. Inputs & Values
    4. Windows, Views & Bars
  10. Da click en Inputs & Values.
  11. Observaras como se desplaza y veras una serie de componentes de IU, como el Label (UILabel).
  12. Da cick en Label, abajo veras su descripción.
  13. Arrastra el icono de Label de la Library a tu ventana View. Colócalo por la mitad
  14. Selecciona Label en la ventana View, ve a Tools > Attributes Inspector.
  15. Observaras los Atributos del objeto Label, como Text, Baseline, Layout, y  otros.
  16. Para este caso configura el Label de la siguiente maneta:
    1. Layout: Centered
    2. Font Size: 28
  17. Regresa a la ventana Library, ahora arrastra un Round Rect Button a View.
  18. Haz mas grande tu botón pero sin pasarte de las lineas Azules. Steve Jobs ha definido varias buenas practicas de diseño y entre ellas es el evitar tocar los bordes.
  19. Dale doble click al Botón y cambia el texto  a “Sumar”.
  20. Ahora regresa a XCode. Puedes usar cmd +tab
  21. En Xcode da click en Build and Go.
  22. Observa como ya funciona tu botón y se puede ver el label. En el simulador.
  23. Presiona Home (el unico boton frontal del iPhone) y pararas la simulación.

Ahora trabajaremos sobre Xcode para poder agregar funcionalidad.

Agregando un IBOutlet a las cabeceras de nuestro controlador  (CounterViewController.h)

Nota: usaremos CounterViewController.h puede que no sea tu caso pero debe de ser algo como [nombre de tu proyecto]ViewController.h

El IBOutlet, repetimos sirve para poder comunicar nuestros objetos de vista con nuestro Código.

Para esta aplicación utilizaremos el Botón y el label que hemos creado.

  1. En Xcode, Da click en CounterViewController.h para usar el editor de texto.
  2. Ahorita no hemos modificado nada así que tu código se verá algo así:
    • #import <UIKit/UIKit.h>
      @interface CounterViewController : UIViewController {
      }
      @end
  1. Agregaremos 2 variables de instancia:
    • #import <UIKit/UIKit.h>
      @interface CounterViewController : UIViewController {
      UILabel *label;
      UIButton *button;
      }
      @end
  1. Crea 2 Property para ambas instancias (una cosa rarísima que te permite “transportar” tus variables de instancia ), Usa IBOutlet para decirle a la clase que acceda al socket que permite la conexión con el Interface Builder:
    • #import <UIKit/UIKit.h>
      @interface CounterViewController : UIViewController {
      UILabel *label;
      UIButton *button;
      }
      @property (nonatomic, retain) IBOutletUILabel *label;
      @property (nonatomic, retain) IBOutletUIButton *button;
      @end
  1. Da click en Build and Go.
  2. Tu aplicación deberá correr sin problemas. Esto que hicimos en este archivo nos permite conectar nuestras vistas y controladores. Toca implementar la funcionalidad en el archivo .m
  3. Presiona Home para parar el simulador.

Agregar variables de instancia a CounterViewController.m

Si bien tus variables ya están declaradas en el archivo .h file, ahora tenemos que poder acceder a ellas en el archivo .m.

  1. En Xcode ve a  CounterViewController.m da le click para abrir el editor.
  2. Como no haz editado nada tu proyecto se verá así:
    • #import “CounterViewController.h”@implementation CounterViewController
       
  1. Debajo de @implementation, agregaremos la palabra @synthesizeseguida de nuestras variables de instancia:
    1. #import “CounterViewController.h”@implementation CounterViewController@synthesize label;
      @synthesize button;
       
  2. Da scroll dentro de .m y encontraras algo como esto:
    • /*
      // Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
      - (void)viewDidLoad {
      [super viewDidLoad];
      }
      */
  1. Este método se usa para poder ejecutar algo justo cuando se termine de cargar el view.
  2. Remueve los comentarios y agrega esto. Lo que asemos es inicializar las variables cuando se termina de cargar View:
    • // Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
      - (void)viewDidLoad {
      [      superviewDidLoad];// Initialize values of the controls
      label.text = @”0?;
      [      buttonsetTitle:@"Press to Increment Count"forState:UIControlStateNormal];
      }
  1. Da click en Build and Go.
  2. Tu app debe verse justo como antes. La aplicación no hace aun nada..

Conectemos el Interface Builder con nuestra clase usando IBOutlets

Ahora conectaremos el Interface Builder usando IBOutlets directo al código de Xcode.

  1. Vamos al Interface Builder donde nos quedamos
  2. Abre CounterViewController.xib desde Xcode. Da click on File’s Owner para seleccionarlo.
  3. Usa el menu del Interface Builder para ir a Tools > Connections Inspector.
  4. Observaras las conexiones de esta vista con el controlador de nuestra aplicación.
  5. Observa la lista de IBOutlets disponibles:
    1. button
    2. label
    3. navigationItem
    4. tabBarItem
  6. Observa que hay un pequeño circulo al final de los nombres.
  7. Concentrate en el “button”, usa control click sobre el circulo y arrastrado al botón que generaste en el view. Verás una especie de tubería.
  8. Ahora tu Botón esta conectado con el objeto instanciado como button en la clase controlador de Xcode.
  9. Repitamos para entender mejor:
    1. Da click en File’s Owner
    2. Ve a Tools > Connections Inspector
    3. Usa control + click para arrastar la pipa al botón.
  10. Repite el proceso para el Outlet “label” Pero ahora unelo a tu Label.
  11. Salva, Regresa a Xcode
  12. Build and Go.
  13. Ahora verás que el Label ya tiene “0? en lugar de la palabra label y el botón tambien debió haber cambiado
  14. Sal del simulador

Agrega una IBAction las cabeceras de nuestro controlador ( CounterViewController.h )

Una IBAction permite trabajar con los eventos de la interface directamente en el código. Por ejemplo, cuando alguien presione nuestro botón.

Para esta aplicación definiremos un IBAction en nuestra cabecera (el archivo .h).

  1. En Xcode ve a CounterViewController.h. Veras el editor
  2. Para este punto tu código se verá así:
    • #import <UIKit/UIKit.h>
      @interface CounterViewController : UIViewController {
      UILabel *label;
      UIButton *button;
      }
      @property (nonatomic, retain) IBOutletUILabel *label;
      @property (nonatomic, retain) IBOutletUIButton *button;
      @end
  1. Agregamos el Método que cachará la acción al final:
    1. #import <UIKit/UIKit.h>
      @interface CounterViewController : UIViewController {
      UILabel *label;
      UIButton *button;
      }
      @property (nonatomic, retain) IBOutletUILabel *label;
      @property (nonatomic, retain) IBOutletUIButton *button;
      - (IBAction) do_button_press:(id) sender;
      @end
  2. Ve a Build > Build.
  3. Veras un icono amarillo en la parte de abajo.
  4. Dale click a ese icono, una ventana llamada Build Results se abrirá.
  5. En esta ventana nos informa que el metodo do_button_press esta escrito en la cabecera pero  no está implementado.

Implementar una IBAction en CounterViewController.m

En este ejercicio implementaremos do_button_press en el CounterViewController.

  1. Eb Xcode, da click en CounterViewController.m, verás el editor
  2. Dale scroll y verás lo que programamos anterior mente en el archivo:
    • // Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
      - (void)viewDidLoad {
      [      superviewDidLoad];// Initialize values of the controls
      label.text = @”0?;
      [      buttonsetTitle:@"Press to Increment Count"forState:UIControlStateNormal];
      }
  1. Agrega el metodo do_button_press después del  viewDidLoad code:
    1. // Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
      - (void)viewDidLoad {
      [      superviewDidLoad];// Initialize values of the controls
      label.text = @”0?;
      [      buttonsetTitle:@"Press to Increment Count"forState:UIControlStateNormal];
      }

      - (IBAction) do_button_press:(id)sender {
      staticint count = 0;
      count++;
      label.text = [NSStringstringWithFormat:@"%d\n", count];
      }

  2. Build and Go.
  3. Si todo sale bien, veras la aplicación como la habíamos dejado. El botón a un no funciona por que no lo hemos conectado con el método correspondiente

Usando el Interface Builder para conectarlo con el IBAction

In this exercise, you will use Interface Builder to connect the event from the button to the IBAction code in your Xcode source code.

  1. Presiona Command+Tab para ir al Interface Builder.
  2. En tu vista del Interface Builder  ve a la ventana llamada View. Selecciona el botón
  3. Usa el menu y ve a Tools > Connections Inspector.
  4. Observaras la las conexiones asociadas al Button.
  5. Esta es la lista de eventos:
    1. Did End On Exit
    2. Editing Changed
    3. Editing Did Begin
    4. …
    5. Touch Up Inside
    6. …
  6. Cada una tiene tambien un pequeño circulo que igual puede arrastrarse,.
  7. Asegurate que la ventana de CounterViewController.xib visible
  8. Observa el evento Touch Up Inside del Button. Usa control + click sobre el circulo dele vento Touch Up Inside y arrastralo a File’s Owner
  9. Cuando sueltas el botón sobre File’s Owner, verás una ventana donde aparece el método do_button_press. Seleccionalo y listo. Haz terminado de implementar la coneción
  10. Cada que le des click al botón (se ejecuta el evento Touch Up Inside ) se ejecutará do_button_press.
  11. Repitamos esto es muy importante. :
    1. Da click en el Button de la ventana.
    2. Ve a Tools > Connections Inspector
    3. Usa control + click sobre el evento “Touch Up Inside”  y arrastralo a File’s  Owner .
    4. Cuando lo sueltes elije do_button_press
  12. Regresa a Xcode
  13. Build and Go.
  14. Ahora cada vez que utilices el botón el contador se incrementará
  15. Presiona Home para salir

Con esto terminamos este largo tutorial de iniciación para programación en el iPhone. Siente libre de mandarme un mail con dudas a iPhone@arturojamaica.com o de dejar un comentario con dudas