Conexiones IBOutlets y IBActions en iOS con Storyboards

Conectar la interfaz gráfica con el código es el momento en que una app deja de ser estática y cobra vida. En el desarrollo iOS con Swift, esto se logra a través de dos tipos de conexiones fundamentales: los IBOutlets y los IBActions. Dominar estas conexiones permite capturar lo que el usuario escribe, reaccionar cuando toca un botón y decidir hacia dónde dirigir el flujo de la aplicación de forma programática.

¿Qué son los IBOutlets y cómo se crean?

Cada pantalla en iOS está gestionada por un ViewController, que es la clase encargada de controlar todo lo que sucede en una vista [0:42]. Cuando se crea un proyecto nuevo, Xcode genera un ViewController por defecto que está ligado a la pantalla inicial del storyboard.

Para conectar un elemento de la interfaz con el código, es necesario dividir la pantalla del editor en dos: a un lado el storyboard y al otro el archivo del ViewController [1:15]. La conexión se realiza manteniendo presionada la tecla Control y arrastrando el componente hacia el código.

• Al soltar, aparece un popup que solicita el tipo de conexión y un nombre.
• Para campos de texto, el tipo de conexión es Outlet [1:55].
• La buena práctica indica nombrar cada componente en inglés y agregar el tipo del padre al que pertenece, por ejemplo: emailTextField o passwordTextField [2:10].

Un IBOutlet es una referencia directa a un componente visual de la pantalla. Gracias a esta conexión, desde el código se puede leer o modificar el valor de cualquier elemento de la interfaz.

¿Cómo funcionan los IBActions para detectar eventos del usuario?

Mientras los IBOutlets sirven para referenciar componentes, los IBActions sirven para reaccionar ante eventos [3:00]. Cuando se necesita saber que el usuario tocó un botón, la conexión cambia de outlet a action.

Al crear un IBAction, Xcode muestra opciones adicionales:

• Event: por defecto es Touch Up Inside, lo que significa que la acción se dispara al hacer clic dentro del botón [3:30]. Cambiar este comportamiento no es recomendable porque resultaría antiintuitivo.
• Sender: parámetro opcional que representa el elemento que disparó la acción. Se puede dejar en none para mantener el código limpio.
• Name: conviene agregar la palabra action al nombre, por ejemplo loginButtonAction, para que cualquier desarrollador entienda de inmediato que se trata de un evento [3:15].

¿Cómo validar credenciales con el código?

Dentro del bloque del IBAction se pueden obtener los valores de los campos de texto accediendo a la propiedad .text de cada outlet [4:25]. Con esos valores se construye una validación sencilla usando un if:

swift let email = emailTextField.text let password = passwordTextField.text

if email == "carlos@mejia.com" && password == "123" { print("Bienvenido") } else { print("Credenciales inválidas") }

Este ejemplo compara el correo y la contraseña ingresados con valores fijos. Si coinciden, imprime "Bienvenido" en la consola; de lo contrario, muestra "Credenciales inválidas" [5:20].

¿Cómo navegar a otro storyboard de forma programática?

En clases anteriores, la navegación se hacía conectando un botón directamente a otro storyboard mediante un segue. El problema es que esa conexión se ejecuta sin importar si las credenciales son válidas o no [6:00]. La solución es eliminar ese segue del botón y crear uno nuevo desde el ViewController completo hacia la referencia del storyboard destino.

¿Qué es performSegue y para qué sirve el identifier?

Al crear el segue desde la vista general, es indispensable asignarle un identifier, por ejemplo homeSegue [7:10]. También se recomienda configurar la presentación como fullscreen para que el usuario perciba un cambio de flujo completo.

Desde el código, la navegación se ejecuta con el método performSegue del UIViewController [7:30]:

swift performSegue(withIdentifier: "homeSegue", sender: nil)

Este método recibe el identificador del segue y un sender opcional. Se coloca dentro del bloque donde las credenciales son válidas, logrando así que la transición solo ocurra cuando el usuario ingrese los datos correctos [7:45].

Con estos conceptos ya es posible crear conexiones de controles y eventos, validar información ingresada por el usuario y controlar la navegación entre storyboards desde el código. Experimenta creando más condiciones, conectando otros elementos y dirigiendo el flujo hacia distintos storyboards para afianzar lo aprendido.