Uso de StoryBoards en desarrollo IOS
De vez en cuando dedico un rato a probar las novedades en tecnología y entornos de desarrollo, sobre todo para hablar con algo de criterio cuando realizo labores comerciales. Esta vez he decidido a probar el asistente para crear flujos de páginas en IOS: los Storyboards.
Sólo decir que me ha parecido fácil aunque tiene un poquito de truco.
EL entorno es:
- OS X versión: 10.8.2
- XCode utilizada es la 4.5.1
Lo que vamos a hacer lo resumimos en tres pasos:
- Entender como se crea un StoryBoard.
- Definir transiciones a ventanas modales y volver de ellas.
- Pasar parámetros del ViewControler que invoca al invocado a través del Segue.
Creamos un proyecto nuevo:
Lo llamo Pantallas:
He elegido que funcione sólo para iPhone para que ocupen menos las capturas, no por nada más especial.
Si veis algunas capturas en internet y vídeos, veréis que a algunas personas le funciona haciendo algo tan sencillo como esto: crear un botón en la vista principal, crear un controlador de vista y ligarlos.
Lo voy a hacer y veréis lo que pasa (porque deben utilizar versiones más antiguas o algo no cuadra). Arrastro un ViewControler de la barra de herramientas a la pantalla:
Selecciono el botón. Cuando está oscuro pulso el botón Control y arrastro hasta la otra vista (dentro del nuevo ViewControler).
Aparece una ventana de selección de acción y elijo: Segue->push.
Aparece el vinculo entre las dos pantallas.
Compilo y ejecuto (Control+r) y aparece el simulador.
Al pulsar el botón: ERROR
Si miráis la traza… Hay una line que dice_: ‘Push segues can only be used when the source controller is managed by an instance of UINavigationController.’
2012-10-15 10:20:15.681 Pantallas[611:c07] Simulator slow-motion animations are now on
2012-10-15 10:20:25.690 Pantallas[611:c07] *** Terminating app due to uncaught exception ‘NSGenericException’, reason: ‘Push segues can only be used when the source controller is managed by an instance of UINavigationController.’
*** First throw call stack:
(0x1c8c012 0x10c9e7e 0x466e71 0x458ad9 0x458b54 0x10dd705 0x14920 0x148b8 0xd5671 0xd5bcf 0xd4d38 0x4433f 0x44552 0x223aa 0x13cf8 0x1be7df9 0x1be7ad0 0x1c01bf5 0x1c01962 0x1c32bb6 0x1c31f44 0x1c31e1b 0x1be67e3 0x1be6668 0x1165c 0x201d 0x1f45)
libc++abi.dylib: terminate called throwing an exception
Bueno, no es tan grave el problema, solo tenemos que incluir nuestro ViewController dentro de un NavigationController.
El sistema intercala el control de navegación (Navigation Controller) y sólo tenemos que volver a lanzar.
Y ya funciona correctamente.
Podemos cambiar el estilo del Segue para que sea modal y no permita la transición automática hacia atrás. De ese modo podemos hasta cambiar el estilo de transición.
Aunque ahora veréis que al ser una ventana modal, desaparece el botón de volver por defecto y la barra superior.
He pintado uno para hacer esa vuelta, cuando queramos, a través de código.
Ahora tendremos que crear una clase controladora para la última ventana creada para poder interceptar los eventos y poner las propiedades y métodos que nos permitan interactuar con ella.
Usaremos el asistente: Vamos al menú File.
Creamos una clase Objective-C.
Elegimos el nombre deseado: ojo que cuando seleccionamos del desplegable le pone él solo la coletilla.
Yo la he llamado SegundoViewControler, (ojo que le he puesto sólo una l al final, no os vayáis a volver locos con esto).
Los añadimos al directorio de proyecto y metemos en el Target adecuado (ojo si hacemos TDD con no olvidar el de Test).
Asignamos nuestro ViewController a la clase recién creada. Pulsamos la flecha al lado del nombre.
Con el botón seleccionado arrastramos hasta el código de SegundoViewController con la tecla Control pulsada.
Y le asignamos tipo Action y el nombre «Volver».
La función que hay que invocar es:
[self dismissViewControllerAnimated:NO completion:nil];
El código quedaría tal que así:
- (IBAction)Volver:(id)sender {
[self dismissViewControllerAnimated:NO completion:nil];
}
Hasta aquí ya tenemos la navegación básica.
Ahora vamos a intentar pasar un parámetro desde una vista hasta la otra del StoryBoard de nuestro IPhone:
Vamos pintar una caja de texto de entrada en la primera vista y cuando pulsemos el botón vamos a saltar a la segunda donde queremos que que aparezca ya mostrado nuestro valor.
Creamos en la primera vista un Outlet llamado CajaTexto. Con ello podremos recuperar el texto introducido en cualquier momento en el objeto de tipo UITextField simplemente accediendo a su «text».
Le ponemos nombre al Segue. Pinchamos sobre el enlace y cambiamos su identificador.
En el primer controlador redefinimos el método: prepareForSegue.
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
NSString *cadena = _CajaTexto.text;
if ([segue.identifier isEqualToString:@"salto"])
{
SegundoViewControler *controlador = [segue destinationViewController];
[controlador setCadenaRecibida:cadena];
}
}
@end
Si observamos bien, estamos capturando el evento que indica que estamos a punto de saltar a través de un Segue a otro ViewController. Verificamos que el Segue tiene nuestro nombre e invocamos el código deseado.
Vamos a hacer una pequeña chapucilla, acoplando los dos controladores, haciendo una conversión del UIViewControler genérico al nuestro: SegundoViewControler.
Esto se podría hacer más genéricamente pero tampoco tiene sentido hacerlo aquí. Es fácil y os dejo un enlace por si queréis investigar.
No olvidéis incluir el fichero de declaración de vuestra clase (cabecera) SegundoViewControler.h
Ahora vamos a crear una propiedad en el fichero SegundoViewControler llamada CadenaRecibida. Es donde estamos pasando el valor.
También vamos a asociar un outlet a la caja de texto estática del ViewController receptor.
Cuando se visualice en la pantalla en segundo controlador asignaremos la variable pasada al texto del control a través de su outlet. Eso lo haremos en viewDidLoad. Vemos el código:
//
// SegundoViewControler.m
// Pantallas
//
// Created by Roberto Canales imac on 15/10/12.
// Copyright (c) 2012 Autentia. All rights reserved.
//
#import "SegundoViewControler.h"
@interface SegundoViewControler ()
@end
@implementation SegundoViewControler
@synthesize cadenaRecibida;
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
_CajaTextoEstatica.text = cadenaRecibida;
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (IBAction)Volver:(id)sender {
[self dismissViewControllerAnimated:NO completion:nil];
}
@end
Y ya tenemos todo el montaje completo.
Como habréis visto es relativamente sencillo montar el esqueleto de una aplicación en base a los Storyboards. Ahora sólo hay que hacer una interesante y bonita 🙂
