Bienvenidos a la Clase 7 del Curso de Programación iOS de iPhone4Spain.
En esta clase vamos a hacer una introducción a una herramienta, integrada en Xcode, llamada Storyboard. Con ella podemos tener una visión general de la aplicación a través de sus escenas. Facilita la navegación entre escenas por lo que se trabaja de forma algo diferente a los ejercicios de clases anteriores.Es una herramienta muy potente y va a ser un punto de inflexión para el desarrollo de vuestras aplicaciones iOS.
Vamos a ver cómo sería el desarrollo de la aplicación de la Clase 6 con Storyboard para que veáis la diferencia entre utilizarlo o no.
Creamos un proyecto nuevo. File ->New->Project…
En esta ocasión, vamos a seleccionar un proyecto “Single View Application“.
El proyecto lo hemos llamado “Clase 7” y marcamos la opción del formulario “Use Storyboard“.
Eliminamos el “ViewController” que genera automáticamente, tanto en el esquema de ficheros como en el Storyboard.
El siguiente paso es añadir todos los ficheros que necesitamos para el ejercicio: “ListViewController” que es subclase de “UITableViewController“, “DetailViewController” subclase de “UIViewController” y “ModalViewController” subclase de “UIViewController“. En esta ocasión, cuando insertamos los ficheros, no tenemos que seleccionar la opción “With XIB user interface” porque añadiremos las interfaces de usuario en el Storyboard.
Todos los ficheros que hemos insertado al proyecto los ordenaremos en carpetas.
Hemos de tener creada la estructura de ficheros que mostramos en la siguiente imagen.
Abrimos el Storyboard y añadimos las interfaces de usuario.
Agregamos el componente “Navigation Controller“. Puede que os aparezca junto con un “ViewController“. En ese caso, borramos el “ViewController” y añadimos un “TableViewController“. Ahora, enlazamos con el botón izquierdo del ratón + Ctrl el “Navigation Controller” y el “TableViewController” y seleccionamos “Relationship – Root View Controller“.
En la propiedad “Class” del “ViewController” seleccionamos “ListViewController“, de esta manera le decimos que es la interfaz de “ListViewController“.
Seleccionamos la celda del “ListViewController” y, en la propiedad “Identifier” le ponemos el nombre de “Cell“.
Añadimos un “Bar Button Item” a la “Navigation Bar” y seleccionamos “Add” en el “Identifier” del “Bar Button Item“.
Agregamos dos “ViewController“, uno para “DetailViewController” y otro para “ModalViewController“. Insertamos en los “ViewController” los componentes necesarios para tener el mismo resultado que en la Clase 6.
Enlazamos los “ViewController” al “ListViewController” para hacer la navegación de la aplicación.
Primero enlazamos “ModalViewController“. Como vamos a mostrar la escena cuando le demos al botón “+“, pulsamos el botón izquierdo del ratón + Ctrl y lo arrastramos hasta el “ModalViewController“. Seleccionamos el tipo de transición “Modal“.
Vamos a enlazar “DetailViewController“. En este caso, vamos a enlazarlo desde la celda del “TableView” y seleccionamos el tipo de transición “Push“.
El Storyboard ha de tener el siguiente aspecto.
Puntos a tener en cuenta en el Storyboard:
- Enlazar la escena del Storyboard con la clase a la que pertenece.
- Poner identificador al enlace creado para poder acceder a él.
- Cuando trabajamos con Storyboard no es necesario editar el fichero “AppDelegate.m” para arrancar desde alguna escena.
Empezamos la edición de ficheros con “ModalViewController.h”. Vamos a declarar el “delegate” con un método que es obligatorio que esté implementado en la escena padre.
El método es “newContact” y es el encargado de agregar un contacto nuevo al listado.
Declaramos el objeto “delegate”, dos “IBOutlet” para los “UILabel” (uno para “nameTextField” y otro para “surnameTextField”) y dos “IBAction” (“saveNewContact” y “cancelNewContact”).
Abrimos el fichero “ModalViewController.m” y añadimos los @synthesize de “delegate”, “nameTextField” y “surnameTextField”.
Lo último que haremos en la edición del fichero es programar los métodos que harán la funcionalidad de dar de alta a un nuevo contacto y cancelar el alta del nuevo contacto.
Abrimos ahora el fichero “DetailViewController.h” en el que declaramos un “NSDictionary”, en el que guardaremos la información de la fila seleccionada, y Dos “IBOutlet”, con los que mostraremos la información por pantalla.
Una vez declarado todo lo que necesitamos en el “DetailViewController.h”, abrimos el fichero ”DetailViewController.m”. Como siempre, lo primero que haremos será hacer @sinthesize de todos lo objetos declarados en “DetailViewController.h”.
Buscamos el método “viewDidLoad” y añadimos el título de la escena, además de rellenar los “IBOutlet” con la información de la celda seleccionada.
Por último, tenemos que programar los ficheros “ListViewController.h” y “ListViewController.m”.
Abrimos el fichero “ListViewController.h” e importamos “ModalViewController.h” para que “ListViewController” pueda soportar el “delegate” de ModalViewController. También declaramos la estructura donde guardaremos la información de la lista. La hemos llamado “items” y es un objeto de la clase “NSMutableArray”.
Ahora vamos a editar el fichero “ListViewController.m”. Importamos “DetailViewController.h” y “ModalViewController.h”. Declaramos el @sinthesize del objeto “NSMutableArray” “items” que hemos declarado anteriormente en el fichero “ListViewController.h”.
En el método “viewDidLoad” inicializamos el objeto “items” y añadimos un título a la escena, nosotros le hemos llamado “Contactos”.
Ahora vamos a insertar en la “UITableView” los datos asignados, anteriormente, a la “NSMutableArray”. Para hacer esto, hay que modificar 3 métodos:
- numberOfSectionsInTableView: En él indicamos el número de secciones que vamos a tener en nuestro listado.
- numberOfRowInSection: En este método vamos a indicar el número de filas que tendrá una sección.
- cellForRowAtIndexPath: Es el método donde configuraremos la fila en cuestión para que se muestre la información deseada.
Creamos el método obligatorio que ha de contener “ListViewController” debido a la declaración del “delegate” de “ModalViewController”. La función que ha de desempeñar el método es la de añadir el objeto “item”, que recibe de “ModalViewController”, a la lista “items”.
Ahora, vamos a hacer un método, en el cual vamos a discriminar los dos enlaces creados en el Storyboard. Este método es por el que tenemos que poner un “Identifier” en cada transición.
El método será el encargado de pasar la información de una escena a otra con la propiedad “segue.destinationViewController”.
El último paso es enlazar todos los objetos que tienen funcionalidad con los diferentes “IBOutlet” y “IBAction”.
Para finalizar la aplicación, vamos a enlazar los componentes con sus métodos u objetos correspondientes.
Como venimos repitiendo en algunas clases de este tutorial, para enlazar un objeto del “XIB”, simplemente, arrastramos el ratón con la combinación Ctrl + botón izquierdo desde el origen al destino. En el caso de los “IBOutlet”, desde “File’s Owner” hasta los componentes de texto, y en el caso de los “IBAction” el proceso de enlace es al revés, desde el componente al “File’s Owner”.
Probamos el funcionamiento de la aplicación.
Con esta clase terminamos el Curso de Programación iOS.
Quiero agradecer a todos los que habéis seguido el curso porque ha sido muy gratificante leer todas las dudas generadas y las muestras de apoyo que nos habéis dado.
Esperamos que este curso os haya sido de gran ayuda para iniciaos en el mundo de la programación de aplicaciones móviles.
Un saludo!!!
