Roberto Canales Mora

Creador y propietario de AdictosAlTrabajo.com, Director General de Autentia S.L., Ingeniero Técnico de Telecomunicaciones y Executive MBA por el Instituto de Empresa 2007.
Twitter: Follow @rcanalesmora

Autor de los Libros: Planifica tu éxito: de aprendiz a empresario y Informática profesional, las reglas no escritas para triunfar en la empresa

Puedes consultar mi CV y alguna de mis primeras aplicaciones (de los 90) aquí

Ver todos los tutoriales del autor

Puedes descargar el código fuente aquí

Aprendiendo Objetive-C desarrollando para nuestro Iphone 3Gs

Antecedentes

Julián, mi proveedor de mamparas y muebles de oficina ( http://www.provimobelmamparas.com ) me dijo hace meses que el iphone era el mejor teléfono que había tenido. Al principio no me parecía la mejor opción por el tamaño y fundamentalmente por no tener GPS. Yo era más bien de htc, y he tenido casi toda la gama. Al surgir el modelo 3Gs me he animado a coger uno y … es el mejor móvil que he tenido nunca. De hecho, otra vez me doy cuenta de que no tenía razón y de haberlo adquirido antes (incluso el modelo anterior) seguro que me hubiera interesado en su programación hace tiempo.

Lo bueno de no ser el primero es que ya hay multitud de ejemplos y libros sobre el tema por lo que "no pagas tanto las novatadas". Además, desde que algo surge hasta que las empresas en España lo demanden creedme que pasan muchos meses.

He visto que algunos miembros de Autentia tienen también el htc con Android con unas sensaciones igual de buenas y … parece que hay una feroz competencia que dará mucho juego. Android tiene como ventaja de partida para nosotros los Javeros, que se programa en Java pero corremos también el peligro de entrar en el anti-patrón golden hammer (para un martillo de oro todos son clavos): No estaría bien elegir un dispositivo solamente porque usa el lenguaje que conocemos…

De momento me ha gustado la vistosidad de Iphone y como el lenguaje y entorno me es completamente nuevo estoy bastante picadillo porque veo decenas de posibles combinaciones con las aplicaciones empresariales que habitualmente nos piden. Aunque trabajemos habitualmente con JSF, Spring y cosas similares: interfaces ricos basados en Iphone o android y tirando de servicios Web y de nuestros componentes SOA, no parece descabellado. Adicionalmente para fortalecer el interés en aprender estas cosas, creo que el IPad (sobre todo una segunda generación futura que me arriesgaría a apostar sale a los pocos meses del primero) nos abrirán un mundo de posibilidades cambiando la percepción del interfaz de usuario… el tiempo lo dirá.

Aunque hay centenares de documentos cuanto te registras en la Web de Mac, empezar me ha requerido leerme un montón de cosas e incluso buscar por internet hasta cuadrar un poco los conceptos. En este tutorial pretendo presentar un poquito el lenguaje, un planteamiento básico de aplicación y las herramientas más comunes a la hora de desarrollar. Siendo egoísta, este tutorial me valdrá a mí para copiar y pegar en otros ejemplos porque al principio la notación se hace un poco extraña por el vicio de Java. Esto es como sacarte el carnet de conducir cuando has llevado desde los 15 años coches por el campo … tienes muchos vicios.

Por cierto, que no se os olvide visitar el tutorial anterior que tengo sobre esto. Seguro que os quedarán las cosas más claras. http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=scrumiphone

Ejemplo a realizar

• Una clase base que represente un objeto gráfico y defina los atributos comunes y los métodos a redefinir. Será CObjetoGrafic
• Una clase derivada por cada objeto gráfico a pintar: Básicamente como un patrón estrategia. Serán CRectangulo y CElipse.
• Un vista que controle los eventos del dedo (o ratón en el simulador) que diga donde pintar.
• Unos botones que nos ayuden a definir si pintamos una elipse o un rectángulo.
• Un controlador que reciba los eventos de los botones y establezca el tipo de elemento a pintar.

Entorno

        Xcode: 3.2.1 (1613)

        Interface Builder: 3.2.1 (740)

        Instruments: 2.0.1 (1096)

        Dashcode: 3.0 (328)

Mac OS X:
           10.5:(9J61)
           10.6:(10M2003)

iphone OS:
           2.2.1: (5H11)
           3.0:(7A341)
           3.1:(7C144)
           3.1.2:(7D11)

iphone Simulator:
           3.0:(7A341)
           3.1:(7C144)
           3.1.2:(7D11)

Creación del esqueleto del proyecto con el wizard de xcode

Pintando el icono con Icon Composer.

Añadiendo clase de vista

Establecer la clase manejadora de la vista

//
// CAreaPintadoView.m
// Pintadoriphone
//
// Created by rcanales on 13/02/10.
// Copyright 2010 Autentia. All rights reserved.
//

#import "CAreaPintadoView.h"
@implementation CAreaPintadoView

// Metodo invocado cuando se carga desde un nib -initWithCoder:
- (id)initWithCoder:(NSCoder*)coder {
      [super initWithCoder:coder]; // no olvidar invocar al padre para que se pinte el nib
      
      NSLog(@"Cargamos desde nib, buen momento para inicializar cosas");
      
      return self;
}

Manejarnos por la documentación y pdfs recomendados

Construir y ver lo que pasa en la consola.

Creando el comportamiento polimórfico

// IPintable.h
// Pintadoriphone
//
// Created by rcanales on 13/02/10.
// Copyright 2010 Autentia. All rights reserved.
//

#import < Foundation/Foundation.h>

@protocol IPintable // es el equivalente a un interfaz en java

@required // declaramos el método como requerido     
-(void) pintate:(CGContextRef *) contexto;

@end

 

#import < Foundation/Foundation.h>
#import "IPintable.h"
@interface CObjetoGrafico : NSObject < IPintable> { // No se puede declarar una clase abstracta en Objetive-C
      @protected // atributos protegidos porque queremos usarlos en clases derivadas polimorficas
      NSInteger x; // punto x inicial donde pintar la figura
      NSInteger y; // punto y inicial donde pintar la figura
      NSInteger ancho; // ancho de la figura
      NSInteger alto; // alto de la figura
}

// ojo que las propiedades no assign hay que liberarlas en dealloc
@property NSInteger x;
@property NSInteger y;
@property NSInteger ancho;
@property NSInteger alto;

// creamos el inicializador con los nombres de los atributos
-(id) initConValores:(NSInteger) px y:(NSInteger)py ancho:(NSInteger)pancho alto:(NSInteger)palto;

-(void) traza; // metodo para volcar en la consola el contenido de las variables

@end

// Como repaso, si queremos utilizar métodos particulares en clases hijas, recondar:
// isMemberOfClass verifica si es de una clase concreta
// isKindOfClass verifica si es de una derivada

 

//
// CObjetoGrafico.m
// Pintadoriphone
//
// Created by rcanales on 13/02/10.
// Copyright 2010 Autentia. All rights reserved.
//

#import "CObjetoGrafico.h"
@implementation CObjetoGrafico
@synthesize x; // getters y setters automaticos
@synthesize y; // getters y setters automaticos
@synthesize ancho; // getters y setters automaticos
@synthesize alto; // getters y setters automaticos

// inicializamos la clase base
-(id) initConValores:(NSInteger) px y:(NSInteger)py ancho:(NSInteger)pancho alto:(NSInteger)palto
{
      self = [super init]; // leer convenciones
      self.x = px;
      self.y = py;
      self.ancho = pancho;
      self.alto = palto;
      return self; // simpre retornar self
}


-(void) traza // mostramos el contenido
{
      NSLog(@"valor X: %d",x);
      NSLog(@"valor Y: %d",y);
      NSLog(@"valor Ancho: %d",ancho);
      NSLog(@"valor Alto: %d",alto);
      NSLog(@"--------------");
}


// método base que pinta un rectangulo por defecto
-(void) pintate:(CGContextRef *) contexto
{
}
@end

Ver la relación de clases como modelo UML

Creando botones en la vista y la acción ejecutora para cambiar el elemento a pintar.

//
// PintadoriphoneViewController.h
// Pintadoriphone
//
// Created by rcanales on 13/02/10.
// Copyright Autentia 2010. All rights reserved.
//

#import < UIKit/UIKit.h>

@interface PintadoriphoneViewController : UIViewController {
}

// método común a pulsar cualquiera de los botones
-(IBAction)botonPulsado:(UIBarButtonItem *)sender;

@end

//
// PintadoriphoneViewController.m
// Pintadoriphone
//
// Created by rcanales on 13/02/10.
// Copyright Autentia 2010. All rights reserved.
//

#import "PintadoriphoneViewController.h"

@implementation PintadoriphoneViewController

// al pulsar los botones modificamos los atributos de la vista
- (IBAction)botonPulsado:(UIBarButtonItem *)sender {
// Asociamos la vista a nuestra vista (un casting explicito no vendría mal comprobando el tipo)
      CAreaPintadoView* vista = [self view];
      // interesante ver como se comparan dos cadenas ... muy al estilo de Java
      if([[sender title] isEqualToString:@"Rect"] == TRUE)
      {
            NSLog(@"Pues es un rec");
            vista.tipo = 0;
      }
      else if([sender.title isEqualToString:@"Elipse"] == TRUE)
      {
            vista.tipo = 1;
            NSLog(@"Pues es una elipse");
      }
}

Incorporar el comportamiento de pintado

// CAreaPintadoView.h
// Pintadoriphone
//
// Created by rcanales on 13/02/10.
// Copyright 2010 Autentia. All rights reserved.
//

#import < UIKit/UIKit.h>
// Clase base que asociamos al nib como vista

@interface CAreaPintadoView : UIView {
@private
      NSMutableArray* arrayObjetos; // array de objetos a pintar
      NSInteger xtem; // variables auxiliares para boton pulsado
      NSInteger ytem;
      NSInteger anchotem; // variables auxiliares para boton soltado
      NSInteger altotem;
@public
      NSInteger tipo; // tipo
}

@property NSInteger tipo;
@end

Aprender a depurar

Pintando en la pantalla

 //
// CAreaPintadoView.m
// Pintadoriphone
//
// Created by rcanales on 13/02/10.
// Copyright 2010 Autentia. All rights reserved.
//
#import "CAreaPintadoView.h"
#import "CoreGraphics/CoreGraphics.h"
#import "CObjetoGrafico.h"
#import "CRectangulo.h"
#import "CElipse.h"

// clase donde imlementamos todo el código particular de pintado
@implementation CAreaPintadoView

@synthesize tipo; // nos ivocarán desde clases externas

// Metodo invocado cuando se carga desde un nib -initWithCoder:
- (id)initWithCoder:(NSCoder*)coder {
      [super initWithCoder:coder]; // no olvidar invocar al padre para que se pinte el nib
      NSLog(@"Cargamos desde nib, buen momento para inicializar cosas");
      arrayObjetos = [[NSMutableArray alloc] init ]; // inicializamos el array
      tipo = 0; // ponemos un tipo 0 por defecto
      return self;
}

- (id)initWithFrame:(CGRect)frame {
      if (self = [super initWithFrame:frame]) {
      // Initialization code
}

NSLog(@"Inicializamos el frame");
      return self;
}

// cojemos la pulsación inicial
-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
      NSLog(@"Pulsado");
      CGPoint primerPunto;
      for (UITouch *touch in touches) {
          primerPunto = [touch locationInView:self]; // recuperamos coordenas locales
          break; // ignoramos resto de touches
      }

      xtem = primerPunto.x; // Asociamos las auxiliares
      ytem = primerPunto.y;
}


// de momento no nos interesa el movimiento
-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
      // NSLog(@"Movido");
}


// al levantar los dedos
-(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
      CObjetoGrafico* temporal = nil; // creamos una objeto de la clase base
      CGPoint ultimoPunto; // recuperamos coordenas
      for (UITouch *touch in touches) { // ete bloque es igual que al pulsar pero no refactorizamos aposta
              ultimoPunto = [touch locationInView:self];
              break;
      }


      anchotem = ultimoPunto.x - xtem; // calculamos ancho y alto
      altotem = ultimoPunto.y - ytem;
      if( tipo == 0) // en función del tipo creamos un objeto distinto para usar polimorfismo
      {
            NSLog(@"Creamos rect");
            temporal = [[CRectangulo alloc] initConValores:xtem y:ytem ancho:anchotem alto:altotem];
      }
      else if (tipo == 1)
      {
            NSLog(@"Creamos elipse");
            temporal = [[CElipse alloc] initConValores:xtem y:ytem ancho:anchotem alto:altotem];
      }
      else {
            NSLog(@"Error al elegir el tipo objeto");
            return;
      }
      
      NSLog(@"Soltado");
      
      [arrayObjetos addObject:temporal]; // añadimos elemento al array
      
      // indicamos que hay que refrescar la vista
      [self setNeedsDisplay]; // ojo que no lleva el :YES como aparece en algunos sitios de la doc
}


- (void)drawRect:(CGRect)rect { // código invocado al pintar

          NSLog(@"Pintamos --En el CAreaPintado");
          
          CGContextRef contexto = UIGraphicsGetCurrentContext();
          
          // Pintar los objetos delegando en la función polimorfica
          for ( CObjetoGrafico *elemento in arrayObjetos) { // usamos las enumeraciones rápidas
                [elemento traza]; // mostramos los datos en la consola de depuración
                [elemento pintate:contexto]; // pasamos contexto
          }
}

// como hemos hecho alloc debemos limpiar la memoria. Nunca se invoca dealloc directamente
- (void)dealloc {

[super dealloc];
      NSLog(@"Borramos memoria");
      // no se nos olvide limpiar los objetos del array
      for ( CObjetoGrafico *elemento in arrayObjetos) { // recorremos el array y pintamos
            [elemento release];
      }
      [arrayObjetos release]; // limpiamos el array en si mismo.
}

@end

// método base que pinta un rectangulo por defecto

-(void) pintate:(CGContextRef *) contexto
{
      NSLog(@"Pintamos un rectangulo por defecto");
      CGContextSaveGState(contexto); // guardardamos el contexto
      CGContextSetRGBFillColor(contexto, 255.0, 0.0,0.0,1.0); // ponemos el color rojo por defecto
      CGRect rec = CGRectMake(x, y, ancho, alto); // inicializamos el rectangulo
      CGContextFillRect(contexto,rec); // pintamos el rectangulo
      CGContextRestoreGState(contexto); // recuperamos el contexto
      // para saber si una clase conforma un protocolo conformsToProtocol:@protocol(clase)
}  
   
   
   

Hacer una foto (snapshot) del código actual

Código en función polimorfa para pintar elipse

Creamos una función auxiliar
//
// CElipse.h
// Pintadoriphone
//
// Created by rcanales on 13/02/10.
// Copyright 2010 Autentia. All rights reserved.
//

#import < Foundation/Foundation.h>
#import "CObjetoGrafico.h"

@interface CElipse : CObjetoGrafico { // no necesitamos definir los métodos a redefinir
}


-(CGPathRef)creaCirculo; // método auxiliar de instancia para crear la mascara de un circulo

@end

// CElipse.m
// Pintadoriphone
//
// Created by rcanales on 13/02/10.
// Copyright 2010 Autentia. All rights reserved.
//

#import "CElipse.h"
#import "CoreGraphics/CoreGraphics.h"

@implementation CElipse
-(void) pintate:(CGContextRef *) contexto
{
      CGContextSaveGState(contexto); // Guardamos los atributos del contexto
      CGRect rec = CGRectMake(x, y, ancho, alto); // creamos un rectangulo
      CGContextSetRGBFillColor(contexto, 0.0, 255.0 , 0.0 , 0.5); // Cambiamos el color del contexto
      // la elipse es semitransparente
      
      NSLog(@"Pintamos un rectangulo por defecto");
      CGContextAddPath(contexto, [self creaCirculo]); // añadimos el modificador de elipse
      CGContextClip(contexto); // definimos el área de pitando.
      // si no restaurammos el contexto no podríamos pintar fuera
      
      CGContextFillRect(contexto,rec); // pintamos un rectangulo con la máscara alterada
      
      CGContextRestoreGState(contexto); // restauramos el estado del contexto de nuestra vista
      
      // para saber si una clase conforma un protocolo conformsToProtocol:@protocol(clase)
}

-(CGPathRef) creaCirculo
{
      CGMutablePathRef circulo = NULL; // recordar incluir los ficheros de cabecera
      CGRect rec = CGRectMake(x, y, ancho, alto);
      
      circulo = CGPathCreateMutable();
      CGPathAddEllipseInRect(circulo, NULL, rec);
      
      return circulo;
}

@end

Indentar el código

Observar comportamiento de la memoria

Fecha publicación: 2011-01-02-23:27:49

Autor: Pipo

hola Roberto

Esta muy bueno el tutorial, me gustaria poder revisar el anterior que hiciste pero no aparece el tutorial, ademas seria bueno para aprender el merge que no lo discutes en este tuto

un saludo gracias

Fecha publicación: 2010-02-16-13:33:38

Autor: rcanales

Hombre, todo es relativo. ¿Hay una versión del Developer Studio para Mac o Linux?

De todos modos yo procuro mantenerme neutral. Es el cliente el que elige y yo quiero tener los conocimientos y herramientas para dar servicio (dentro de nuestros gustos). De todos modos mira la ventaja competitiva... todo el mundo tiene un PC... poca gente en España tiene un Mac. Si aprendes a programar un MAC, la competencia a priori parece menor (y más si hay que usar Objetive-C y no Java)

También decirte que estamos en paralelo con Android ... así podemos comparar.

Fecha publicación: 2010-02-16-13:02:24

Autor: joxeka

Hola Roberto,

esta muy bien el desarrollo para Iphone/IPod, pero me parece algo intolerable que para poder desarrollar para este dispositivo, las mejores herramientas sólo estén disponibles para Mac, y no para PC. Yo en mi caso, me voy a decantar por Android, porque aunque esté mas verde, no necesito gastarme un pastizal para desarrollar en el.

Un saludo

Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento-No comercial-Sin obras derivadas 2.5