() translation by (you can also view the original English article)
En el tutorial anterior, creaste tu primer proyecto Swift en Xcode, una aplicación simple de cosas por hacer. En esta entrega de Swift desde Cero, vamos a agregar la habilidad de crear elementos por hacer. A lo largo del camino, aprenderás sobre acciones, delegación, y propiedades.
Prerrequisitos
Si quisieras seguir a la par conmigo, entonces asegúrate de que tienes Xcode 6.3 o superior instalado en tu máquina. Al momento de la escritura, Xcode 6.3 está en beta y disponible desde el iOS Dev Center de Apple para desarrolladores iOS registrados.
La razón para requerir Xcode 6.3 o superior es poder sacar ventaja de Swift 1.2, el cuál Apple introdujo hace unos días. Swift 1.2 introduce un número de adiciones grandiosas de las que sacaremos ventaja en el resto de esta serie.
1. Agregando Elementos
Al final de este tutorial, el usuario podrá agregar nuevos elementos por hacer tocando un botón en la barra de navegación, presentando una vista con un campo de texto y un botón. Comencemos creando el controlador de vista que manejará agregar nuevos elementos por hacer, la clase AddItemViewController.
Paso 1. Crea un AddItemViewController
Elige New > File... desde el menú File de Xcode y selecciona la plantilla Cocoa Class desde la lista de plantillas iOS > Source.
Nombra la clase AddItemViewController y asegúrate de que hereda de UIViewController. Revisa dos veces que el Language está establecido a Swift y Also create XIB file está desmarcado.
Dile a Xcode en donde quieres que guarde el archivo para la clase AddItemViewController y da clic en Create.
Paso 2: Agregando Outlets y Acciones
Antes de que creemos la interfaz de usuario de la clase AddItemViewController, necesitamos crear un outlet para el campo de texto y dos acciones, una para un botón de cancelar en la barra de navegación y otra para el botón crear debajo del campo de texto.
Agregar un outlet debería ser familiar ahora. Crea un outlet en la clase AddItemViewController y llámala textField como se muestra abajo.
1 |
class AddItemViewController: UIViewController { |
2 |
@IBOutlet var textField: UITextField! |
3 |
|
4 |
override func viewDidLoad() { |
5 |
super.viewDidLoad() |
6 |
}
|
7 |
|
8 |
override func didReceiveMemoryWarning() { |
9 |
super.didReceiveMemoryWarning() |
10 |
}
|
11 |
}
|
Crear una acción es muy similar a crear una método de instancia. De hecho, el atributo @IBAction no es nada más que una pista para Interface Builder. Prefijando un método con el atributo @IBAction, Interface Builder está consciente del método, el cuál nos permite conectarlo en el storyboard. Dejaremos los cuerpos de ambas acciones vacíos por ahora.
1 |
class AddItemViewController: UIViewController { |
2 |
@IBOutlet var textField: UITextField! |
3 |
|
4 |
override func viewDidLoad() { |
5 |
super.viewDidLoad() |
6 |
}
|
7 |
|
8 |
override func didReceiveMemoryWarning() { |
9 |
super.didReceiveMemoryWarning() |
10 |
}
|
11 |
|
12 |
@IBAction func cancel(sender: AnyObject) { |
13 |
|
14 |
}
|
15 |
|
16 |
@IBAction func create(sender: AnyObject) { |
17 |
|
18 |
}
|
19 |
}
|
Paso 3: Crea Interfaz de Usuario
Abre Main.storyboard en el Project Navigator y arrastra un View Controller desde Object Library en la derecha. Con el controlador de vista seleccionado, abre el Identity Inspector en la derecha y establece Custom Class > Class a AddItemViewController.
Para agregar una barra de navegación a la vista de agregar elemento, selecciona el Add Item View Controller y elige Embed In > Navigation Controller desde el menú Editor. Esto hará al Add Item View Controller el controlador de vista raíz de una controlador de navegación.
El siguiente paso es agregar un elemento de botón de barra a la barra de navegación del View Controller---no el Add Item View Controller---y establece su Identifier a Add en el Atributes Inspector.
Cuando el usuario presiona el botón Add, el Add Item View Controller debería ser presentado de manera modal. Para lograr esto, Control-Arrastra desde el botón Add al Navigation Controller, seleccionando present modally desde el menú que emerge. Esto creará un seguimiento desde el Add Item View Controller al nuevo Navigation Controller.
Arrastra un campo de texto y un botón desde la Object Library y agrégalos a la escena Add Item View Controller. Selecciona el Add Item View Controller y conecta el outlet textField con el campo de texto y la acción create: con el botón. La acción create: debería poder ser activada cuando el evento Touch Up Inside es disparado. Cambia el título del botón a Change y agrega las restricciones de diseño necesarias al campo de texto y botón.
Para terminar la interfaz de usuario, agrega un elemento de botón de barra a la parte superior izquierda de la barra de navegación del Add Item View Controller y establece su Identifier a Cancel. Con el Add Item View Controller seleccionado, abre el Connections Inspector y conecta la acción cancel: al botón Cancel.
Construye y ejecuta la aplicación presionando Command-R para verificar que todo está enganchado correctamente.
2. Implementando Protocolo Delegado
Cuando el usuario crea el botón Create para agregar un elemento por hacer, el add item view controller necesitar notificar al view controller. La delegación es una solución perfecta para este escenario. El proceso es bastante simple.
Creamos un protocolo delegado al que se conforma la clase ViewController. Cuando la instancia AddItemController es creada---cuando el usuario toca el botón Add---el objeto ViewController es establecido como el delegado de la instancia AddItemViewController, habilitando el último para notificar a la instancia ViewController cuando un nuevo elemento por hacer es creado. Desglosémoslo para entender mejor este proceso.
Paso 1: Declara Protocolo AddItemViewControllerDelegate
Abre AddItemViewController.swift y declara el protocolo AddItemViewControllerDelegate debajo de la declaración de importación en la parte superior. La declaración del protocolo luce similar a una declaración de clase. La palabra clave protocol es seguida por el nombre del protocolo.
1 |
import UIKit |
2 |
|
3 |
protocol AddItemViewControllerDelegate { |
4 |
func controller(controller: AddItemViewController, didAddItem: String) |
5 |
}
|
El concepto es muy similar a los protocolos en Objective-C. El nombre del protocolo es AddItemViewControllerDelegate y define un método, controller(controller:didAddItem:).
Paso 2: Declara la Propiedad delegate
El objeto que necesita implementar el protocolo delegado es el delegado de AddItemViewController. Primero necesitamos crear una propiedad para el delegado como se muestra en el código de abajo.
1 |
class AddItemViewController: UIViewController { |
2 |
@IBOutlet var textField: UITextField! |
3 |
|
4 |
var delegate: AddItemViewControllerDelegate? |
5 |
|
6 |
...
|
7 |
}
|
La propiedad delegate es de tipo AddItemViewControllerDelegate?, un tipo opcional, ya que no podemos estar seguros de que la propiedad delegate no es nil. Nota que el nombre del protocolo no está envuelto en símbolos menor y mayor qué como en Objective-C.
Paso 3: Implementa Acciones
El método delegado, controller(controller:didAddItem:), será invocado en la acción create: como se muestra abajo. Para mantener simple el ejemplo, no necesitamos hacer ninguna validación en la entrada del usuario. Desenvolvemos de manera segura el valor almacenado en la propiedad delegate, lo que significa que el método delegado solo es invocado si la propiedad delegate es establecida. El valor del campo de texto es temporalmente almacenado en una constante llamada item.
1 |
@IBAction func create(sender: AnyObject) { |
2 |
let item = self.textField.text |
3 |
|
4 |
if let delegate = self.delegate { |
5 |
delegate.controller(self, didAddItem: item) |
6 |
}
|
7 |
}
|
La implementación de la acción cancel: es sencilla. Todo lo que hacemos es desechar la instancia AddItemViewController.
1 |
@IBAction func cancel(sender: AnyObject) { |
2 |
self.dismissViewControllerAnimated(true, completion: nil) |
3 |
}
|
Paso 4: Estableciendo el Delegado
Hay una pieza faltante del rompecabezas sin embargo. La propiedad delegate de la instancia AddItemViewController no está siendo establecida por el momento. Podemos resolver esto implementando el método prepareForSegue(_:sender:) en la clase ViewController. Primero, sin embargo, necesitamos revisitar el storyboard.
Abre Main.storyboard y selecciona el segue conectando el botón Agregar con el Navigation Controller. Abre el Inspector de Atributos y establece el Identificador del segue a AddItemViewController.
Después, implementa el método prepareForSegue(_:sender:) en la clase ViewController como se muestra abajo. Nota la palabra override prefijando al método. Esto debería ser familiar ahora.
1 |
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { |
2 |
if segue.identifier == "AddItemViewController" { |
3 |
let navigationController = segue.destinationViewController as? UINavigationController |
4 |
let addItemViewController = navigationController?.topViewController as? AddItemViewController |
5 |
|
6 |
if let viewController = addItemViewController { |
7 |
viewController.delegate = self |
8 |
}
|
9 |
}
|
10 |
}
|
Comenzamos revisando el identificador del segue, asegurando que estamos preparando para el segue correcto. Después pedimos al segue su controlador de vista destino. Podrás esperar que esto sea la instancia AddItemViewController, pero recuerda que que hicimos al controlador de vista el controlador de vista raíz de un controlador de navegación. Esto significa que necesitamos pedir al controlador de navegación, el controlador de vista destino del segue, su controlador de vista superior.
La constante addItemViewController es de tipo AddItemViewController? debido al uso de la palabra clave as?. En otras palabras, usando as? degradamos el valor de la propiedad topViewController a un tipo opcional.
En la declaración if, desenvolvemos el opcional y establecemos la propiedad delegate de la instancia ViewController.
Estos seguro que has notado el uso de varios opcionales en la implementación del método prepareForSegue(_:sender:). Cuando interactúas con APIs Objective-C, siempre es mejor ir a la segura. Mientras que mandar mensajes a nil está perfectamente bien en Objective-C, no lo es en Swift. Debido a esta diferencia clave, siempre necesitas tener cuidado cuando interactúas con APIs Objective-C en Swift. El ejemplo de arriba ilustra esto bien.
Paso 5: Implementando el Protocolo AddItemViewControllerDelegate
Implementar el AddItemViewControllerDelegate es similar a la implementación del protocolo UITableViewDataSource. Comenzamos conformando la clase ViewController al protocolo como se muestra abajo.
1 |
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, AddItemViewControllerDelegate { |
2 |
...
|
3 |
}
|
Después, implementamos los métodos del protocolo AddItemViewControllerDelegate, que se reduce a implementar el método controller(controller:didAddItem:). Agregamos el nuevo elemento a la propiedad items del controlador, recargamos la vista de tabla, y desechamos el controlador de vista de agregar elemento.
1 |
// MARK: Add Item View Controller Delegate Methods
|
2 |
func controller(controller: AddItemViewController, didAddItem: String) { |
3 |
// Update Data Source
|
4 |
self.items.append(didAddItem) |
5 |
|
6 |
// Reload Table View
|
7 |
self.tableView.reloadData() |
8 |
|
9 |
// Dismiss Add Item View Controller
|
10 |
self.dismissViewControllerAnimated(true, completion: nil) |
11 |
}
|
Paso 6: Construye y Ejecuta
Construye y ejecuta la aplicación para probar si puedes agregar nuevos elementos a la lista de cosas por hacer. Actualmente no validamos la entrada del usuario. Como un ejercicio, mostramos una vista de alerta al usuario si presionan el botón Crear y el campo de texto está vacío. Agregar algo por hacer en blanco no es muy útil. ¿Verdad?
Aprende Más en Nuestro Curso de Programación Swift
Si estás interesado en llevar tu educación Swift al siguiente nivel, puedes echar un vistazo a nuestro curso completo de desarrollo Swift.
Conclusión
En este tutorial, aprendiste cómo declarar e implementar un protocolo personalizado. También aprendiste cómo crear acciones y engancharlas en Interface Builder. En la entrega de la siguiente semana, vamos a completar nuestra aplicación de cosas por hacer agregando la habilidad de borrar elementos por hacer y también mejoraremos la experiencia de usuario de la aplicación.
