icono_twiter icono LinkedIn icono Facebook Icono Xing
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:

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

Fecha de publicación del tutorial: 2010-02-09

Tutorial visitado 6.587 veces Descargar en PDF
Creando la Baraja de SCRUM de Autentia como aplicación para el IPhone 3G.

Puedes descargar el código fuente aquí

Creando la Baraja de SCRUM de Autentia como aplicación para el IPhone 3G.

Los gestores que alguna vez creímos ser técnicos tenemos habitualmente crisis de identidad y nos enredamos en empeños peregrinos para demostrarnos a nosotros mismos que, si quisiéramos, todavía podríamos programar.

En una de estas crisis, se me ha ocurrido que podría hacer una pequeña aplicación útil, el pasar a IPhone la baraja de estimación que utilizamos en nuestra reuniones Scrum (o scrum but…)

Lo primero que he hecho es ir al site de Mac y ver sorprendido que esto se programa con Objetive-C …. Noooooooooooooooo a aprender otro lenguaje (o lo justo para andar tirando). Dado que me tiré largos años programando en C/C++ e incluso que lo tuve que recordar hace poco para dar clases en la Universidad, pues no creo que sea tan complicado.

Ahora bien, advierto que no voy a ser muy ortodoxo con los métodos y que, antes de copiar este código, sería conveniente comprobar el uso de la memoria (que dejo ya para otros tutoriales).

Si queremos empezar gratis hasta donde yo entiendo, podemos registrarnos como desarrolladores y bajarnos el entorno de desarrollo.

Bueno, lo suyo es pagar los 69 dólares que te piden para poder publicar las aplicaciones, pero eso lo veremos más tarde: antes tenemos que ser capaces de hacer una.

Una vez registrado te descargas el software.

Lo instalamos ok, ok, ok

Elegimos los componentes

Y ya tenemos el entorno instalado. Sería interesante crearse un alias sobre la herramienta xcode y ponerla en el escritorio.

Vamos a crear un nuevo proyecto.

El proyecto base a utilizar va a ser una Utility Application: El icono de la derecha.

Echamos un vistazo a todos los ficheros que tenemos.

Yo os recomendaría que leyérais un poquito y cacharreáseis con Objetive-C antes de plantearos hacer algo en serio…. son demasiadas cosas nuevas a la vez (por lo menos eso me ha parecido a mi).

Recordando mis años de aprendizaje de Visual C++ tengo sensación de déjà-vu.

Lo primero que vamos a hacer es poner los iconos que va a utilizar la aplicación y conseguir las imágenes.

Nos vamos al web de autentia y nos bajamos las cartas de Scrum: http://www.autentia.com/archivo-descargas.php

Guardamos el archivo.

Lo copiamos en nuestro directorio de proyecto dentro de AutentiaPlannigPokerCards

Nos hacen falta dos ficheros png, que tenemos que poner en el raíz del proyecto:

icon.png y Default.png (para la ventana splash)

Voy a usar la vista previa del Mac para montar esos dibujos

Recomiendan que tengan un tamaño grande para cuando lo subes al appStore.

Bueno, tampoco me preocupo demasiado de momento.

Indicamos el nombre del icono en el fichero plist.

Hay que irse ahora a la carpeta de Resources e incluir los iconos (también el resto de las imágenes de las cartas)

Indicamos los iconos

Le indicamos que copie si se necesita (sobre todo por las cartas)

Ahora vamos a compilar y ver lo que nos encontramos. Aparece el icono durante la carga y al pulsar el botón central … ya estamos en órbita.

Añadimos las cartas de scrum como recursos

Y vamos a cambiar un pelín los nombres para hacer una chapucilla.

La carta_1_2 la cambiamos por 0,5. La interrogación por el mismo patrón pero con una interrogación y la taza por ¿Descansamos?

Esto es para crear una botonera y que el propio nombre del botón sea el que nos indique qué imagen queremos mostrar.

Os recomiendo que aprendáis cosas básicas de xcode, como encontrar dentro de Finder en tu Mac donde están los ficheros que manejas.



Vamos a tratar de aprovechar al máximo en entorno gráfico y el esqueleto que se nos ha creado en el sistema: Vemos que al arrancar la aplicación aparece una ventana con una vista que no tiene nada y con un pequeño icono que nos lleva con un bonito efecto a unos detalles

Y los detalles

En la primera ventana, vamos a pintar los botones con la carta que queremos mostrar.
Hacemos doble click en el fichero MainView.xib

Bueno, el builder se basa en ventanas sueltas… aquí es cuando se agradece tener más de una pantalla para trabajar. En un lado te puedes poner el código y en otro las ventanillas,

Pinchamos en los botones y los arrastramos a la ventanita (Main View)

Podemos darle un poco de color.

Vamos viendo cómo nos queda en el simulador. Para esto .. ya hace falta un poco de gusto. Sería recomendable contar con un creativo para estos temas.

Ahora vamos a editar la otra vista FlipSideView.xib

Cambiamos el texto del botón y la barra

Ahora arrastramos una vista UIImageView al centro de la vista.

Elegimos ahora la carta por defecto: reverso_cc.jpg. También elegimos que se escale automáticamente.

Salimos y probamos.

Ahora vamos a empezar con lo duro…

Pensemos antes qué hay que hacer:

De algún modo, al pinchar un botón queremos ejecutar la función que es capaz de cambiar una vista por otra, pasando como parámetro el texto del botón.
Al pintarse la vista, hay que decirle que inicialice una imagen que se componga a partir de ese texto…. chupao (jeje … cuando lo has hecho ya).

Lo primero que vamos a hacer es asociar a una variable al control visual donde hemos cargado la imagen del reverso.

Atento a los detalles:

Pinchamos sobre el delfín y en la ventana de la derecha vemos que es de la clase UIImageView.

Ahora, en la parte de Library (si no tenéis alguna ventana a la vista buscarla en el menú de tools)

Dentro del desarrollo de iPhone y del framework cocoa se utiliza un patrón de diseño MVC. La pieza por tanto más importante es el controlador que mantiene los datos del modelo.
Nosotros vamos a pinchar en la sección de Outlets de la clase controladora.

Vamos a crear la variable que queremos ligar al control. Ojo que tenemos que darle el tipo adecuado: UIImageView.
Tenemos que fijarnos en la ruedecita de abajo y desplegar el menú para ordenar reconstruir las clases necesarias.

Ahora, leed bien lo que pone antes de seguir los instintos.

Le damos a merge

Ahora comprobamos el código que quiere incorporar…

Como veis, no parece demasiado lógico lo que pretende hacer, así que NO LO VAMOS A HACER AUTOMÁTICAMENTE y lo haremos de un modo manual.

Cerramos el editor visual visual

y nos vamos a la FlipViewController.h y añadimos la entrada: IBOutlet UIImageView *miControlImagen;

Abrimos de nuevo el editor visual y ya tiene el aspecto que queremos:

Ahora pinchamos con el botón derecho (o con dedos del toutch pad) en File's Owner.
Sobre el circulito que hay al lado de miControlImagen, pinchar y arrastrar sobre el delfín para que se ligue la variable al control.

Nos quedará así.

Bueno, ya sé que ha sido una pequeña chapucilla pero muy práctica (más bien ha sido un apaño que en el futuro no creo que sea necesario hacer)

Ahora vamos a elegir la otra vista y localizar la función que se activa cuando pulsamos la interrogación.

Abrimos el editor gráfico y pinchamos sobre la interrogación: Vemos en la derecha que está asociado el evento Touch Up Inside con showInfo

Vamos al código y localizamos la función.

-(IBAction)showInfo {
    FlipsideViewController *controller = [[FlipsideViewController alloc] initWithNibName:@"FlipsideView" bundle:nil];
    controller.delegate = self;
    controller.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    [self presentModalViewController:controller animated:YES];
    [controller release];
  }

Hay un pequeño problema: necesitamos que esta función reciba como parámetro quién invoca a esta función.

Como la interrogación no la queremos, podemos cambiar directamente la función showInfo … aunque vamos a crear una nueva para ver que nos hace falta (esto sí que es programar copiando y pegando).

Vamos a hacer la misma chapucilla ahora en la lengüeta de Actions.

Vemos el código que hace falta

Cambiamos el MainViewControler.h

Cambiamos el MainViewController.m

Ahora vamos al editor y pinchamos la cruz para borrar la asociación de showInfo

Ahora, dese showInfo vamos a arrastrar a todos los botones uno a uno y, cuando salga el desplegable, seleccionaremos Touch Up Inside

Quedará algo como esto.

Ejecutamos y vemos la consola de depuración: Pulsando Shift + cmd + R sobre el teclado (no sobre el emulador)


Ahora tenemos que pasar el parámetro al controlador del FlipsideViewControler.

Parece que el mejor modo podría ser crear una propiedad.

    // FlipsideViewController.h    
    // BarajaScrupAutentia    
    //
    // Created by rcanales on 06/02/10.    
    // Copyright Autentia 2010. All rights reserved.   
    //      
    @protocol FlipsideViewControllerDelegate; 
    
    @interface FlipsideViewController : UIViewController {
     IBOutlet UIImageView *miControlImagen; 
     id < FlipsideViewControllerDelegate> delegate;
     NSString *nombreDibujo;   
    }     
    
    @property (assign) NSString* nombreDibujo;
    
    @property (nonatomic, assign) id < FlipsideViewControllerDelegate> delegate;
      -(IBAction)done;    
    @end  
       
    @protocol FlipsideViewControllerDelegate  
      -(void)flipsideViewControllerDidFinish:(FlipsideViewController *)controller;
    @end

Ahora vamos al .m e insertamos el código.

    //         
    // FlipsideViewController.m
    // BarajaScrupAutentia         
    //                                 
    // Created by rcanales on 06/02/10.    
    // Copyright Autentia 2010. All rights reserved.
    //                                                  
    #import "FlipsideViewController.h"   
                       
    @implementation FlipsideViewController                      
    @synthesize delegate; @synthesize nombreDibujo; // añadimos anotación para getter y setters automáticos

    -(void)viewDidLoad { 

    [super viewDidLoad];
    self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
    
    UIImage* anterior = miControlImagen.image; // cogemos referencia a imagen anterior
    miControlImagen.image = [UIImage imageNamed:nombreDibujo]; // creamos la nueva        
    [anterior release]; // vemos el valor la segunda vez // liberamos anterior     

           

Invocamos a la propiedad

    // MainViewController.m   
    -(IBAction)showInfo:(UIButton* )sender {  
 
    FlipsideViewController *controller = [[FlipsideViewController alloc] initWithNibName:@"FlipsideView" bundle:nil];
    controller.delegate = self;
   
    NSString* cadenaAux = [NSString stringWithFormat:@"carta_%@_cc.jpg",sender.currentTitle]; // formateamos el nombre de la propiedad
    
    NSLog(cadenaAux); // lo volcamos al log por si acaso
     
    [controller.nombreDibujo release]; // limpiamos la memoria del objeto anterior 
      
    controller.nombreDibujo = cadenaAux; // asignamos memoria al objeto nuevo 
      
      
    controller.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;    
    [self presentModalViewController:controller animated:YES];  
  
    [controller release];

}     

Compilamos y probamos



Bueno, esto ya está… no hay que hacer nada más.

Ahora solamente nos quedaría comprobar que no dejamos lagunas de memoria y realizar el proceso de despliegue en el teléfono real …

Me he quedado sorprendido por lo sencillo que me ha resultado… también es verdad que tampoco hace gran cosa … aunque para nosotros es muy útil.

Si os animáis a hacer cosas con teléfonos móviles ya sabéis dónde estamos si necesitáis ayuda o formación sobre el tema: En Autentia … hasta los jefes hacen programas …

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2010-02-15-18:56:24

Autor: rcanales

Grandioso site cs491f09.wordpress.com/2009/10/ con decenas de ppt sobre el desarrollo iphone

Fecha publicación: 2010-02-10-20:30:30

Autor: rcanales

Hola Alex:

Llevas razón en que sobran los releases ... el documento Memory Management Rules te deja claro que si no has creado el objeto explicitamente (alloc, new, copy, etc.) o hecho retain sobre él, no te tienes que ocupar de liberarlo.... tengo demasiado vicio de C++ y Java... y Objetive-C es otra guerra.