iOS Básico | Connections IBAction IBOutlet | Delegate pattern
0. Indice de contenidos.
1. Entorno
- Hardware: Portátil MacBook Pro 15′ (2.6 GHz Intel Core i7, 8GB DDR3 SDRAM, 250GB HDD).
- Sistema Operativo: Mac OS X Mountain Lion 10.8.2
- Xcode 4.6.2
2. Introducción
Apple presenta el concepto de “StoryBoard” a partir de iOS 5 y Mac OS X 10.7.x, una gran ventaja respecto a versiones anteriores, ya que nos aporta la capacidad de crear un flujo de trabajo completo desde un lienzo. En versiones anteriores había que crear varios archivos XIB. Lo que realmente no ha cambiado mucho es la forma de hacer las conexiones entre los componentes de la interfaz de usuario y el controlador que gestionará los eventos de dichos componentes. Esto es precisamente lo que veremos en el tutorial observando como Xcode hace de esta tarea algo muy sencillo, visual e intuitivo.
3. Proyecto
Para el ejemplo propuesto sólo tenemos que crear un proyecto nuevo y seleccionar la plantilla “Single View Application”:
Pulsamos «Next».
A continuación echamos un vistazo a la pantalla de nuestro IDE repasando cada una de las vistas y paneles que necesitaremos para llevar a cabo el ejemplo:
- 1 – Navegador de proyecto: Nos permite acceder de manera fácil a cualquier recurso del proyecto. Desde el navegador si seleccionamos un recurso cualquiera veremos como cambia el panel de inspección de propiedades del mismo.
- 2 – Panel de inspección: Nos servirá para visualizar y modificar cada una de las propiedades del recurso actual.
- 3 – Panel de edición del proyecto : Nos permite elegir distintas vistas, entre ellas se encuentra la vista de “Assistant Editor” desde las cual realizaremos las distintas conexiones.
- 4 – Object library (componentes): Agrupa todos los componentes que podemos utilizar en la interfaz de usuario. Etiquetas, cajas de texto, botones, imagenes etc …..
- 5 – Lienzo del StoryBoard : Es la representación grafica de la interfaz de usuario en la que podremos incluir los componentes del “Object library” y desde donde podremos enlazar la interfaz de usuario con la clase de una manera muy visual.
Ahora que tenemos una visión básica de cómo movernos por nuestro proyecto en Xcode vamos a ir conformando el ejemplo. Para ello vamos incluir distintos componentes desde el “Object library” hasta el lienzo que representa el «StoryBoard» para lo que tenemos que arrastrar y soltar en el lienzo el componente que queramos. Para el ejemplo sólo vamos a hacer uso de algunas etiquetas, una caja de texto, un botón e imagenes. El resultado debería ser algo parecido a:
4. Conexiones
Antes de comenzar el proceso es importante saber que podemos hacer uso de tres tipos de conexiones:
- IBOutlet
- IBAction
- IBOutletCollection
Las dos primeras opciones son las más comunes y las que veremos en este tutorial. La primera de ellas (IBOutlet) se utiliza para los componentes de salida como las etiquetas o para los componentes de entrada/salida como las cajas de texto. Las segundas (IBAction) son usadas para componentes del tipo “boton/accion”. Vamos a realizar nuestra primera conexión para lo que seleccionamos desde el navegador del proyecto el StoryBoard correspondiente, en este caso “MainStoryboard_Iphone.storyboard” y a continuación seleccionamos la vista “Assistant Editor” del panel de edición de proyectos.
Podemos ver que la pantalla ha quedado dividida en dos secciones verticales. En una se muestra el lienzo y en otra se muestra la declaración de la clase sobre la que realizaremos las conexiones de los componentes de la interfaz. El siguiente paso es seleccionar en el lienzo el componente sobre el que queremos realizar la conexión, por ejemplo, el campo de texto y con la tecla “Ctrl” pulsada arrastramos y soltamos el componente visual en el código de la declaración de la clase:
A continuación aparece un pequeño diálogo donde podemos ver la información de la conexión y donde indicamos el nombre de la misma dentro del ViewController.
Siendo el resultado:
Lo que nos está haciendo el asistente es definir una nueva propiedad con “@property” indicando al compilador que genere automáticamente los métodos getter y setter de dicha propiedad. Para comprobar que la conexión se ha realizado correctamente seleccionamos la caja de texto en el lienzo y pulsamos botón dcho del ratón. Aparecerá un cuadro diálogo con las conexiones del componente.
Para desvincular la interfaz de usuario de la clase, sólo tenemos que pulsar la “x” que une el componente con la clase en el cuadro de diálogo anterior.
Repetimos el proceso de conexión para la etiqueta de salida donde mostraremos el resultado de la acción y para el propio botón que realizará la acción que corresponda. Después, la declaración de nuestro controlador deberá parecerse a :
A continuación y para completar el ejemplo debemos realizar la implemetación de nuestra clase. En este caso al pulsar en el botón se muestra en la etiqueta de salida el texto que introducido en el input de entrada.
Ejecutamos nuestra app, escribimos en la caja de texto y pulsamos el botón “Accion”. Vemos que el resultado se muestra en la etiqueta de que hemos enlazado con anterioridad.
5. Delegate pattern
El concepto de delegación es un tema muy importante en Objective C y es necesario entenderlo bien, sobre todo si estamos empezando a desarrollar aplicaciones pasa iOS. Básicamente es la herramienta que nos proporciona el propio lenguaje, o mejor dicho iOS Cocoa Touch para conectar objetos de una manera limpia y ayudarles a comunicarse con los demas. Este modelo nos proporciona una gran flexibilidad a la hora de definir el comportamiento del conjunto de objetos que conforman nuestra app, ya que cualquier objeto puede actuar en nombre o en coordinación con otro.
El objeto que delega responsabilidad mantiene una referencia del objeto al que ha delegado dicha responsabilidad de tal manera que en el momento apropiado envía un mensaje que informa al “delegado” que se ha producido un determinado evento que tendrá que manejar. El objeto delegado puede responder a este mensaje con la actualización del estado de si mismo o de cualquier otro objeto de la aplicación y en algunos casos puede devolver un valor que afecte a cómo se deberá manejar el próximo evento. El principal valor del patrón delegación es que nos permite personalizar fácilmente el comportamiento de varios objetos de manera centralizada en uno solo.
Para terminar de entender el concepto vamos a aplicarlo al ejemplo propuesto. Vamos a hacer que el resultado se muestre al pulsar la opción “Done” del teclado en vez de pulsar el botón “Accion”. Para poder realizar una delegación podemos arrastrar y soltar tal y como hemos realizado en las conexiones, la caja de texto hasta el icono que representa el ViewController en la parte inferior del lienzo.
Nos aparece un pequeño cuadro de diálogo donde tenemos que seleccionar la opción “delegate”.
Indicamos que evento enviará el objeto que delega(inputText-UITextField) al objeto “delegado” (ViewController) responsable de gestionar el evento. Para ello seleccionamos la caja de texto y desde el panel de inspección modificamos el valor del atributo “Return key” de “default” a “done”.
Y por último realizamos la implementación en el objeto «delegado»:
Si ejecutamos la aplicación vemos como al pulsar la opción “Done” del teclado se muestra la información en la etiqueta de salida con el valor introducido en la caja de texto. Pero, ¿cómo sabemos qué métodos debería implementar el objeto “delegado”?. Para ello tenemos que profundizar en el componente especifico sobre el que estemos realizando la delegación y ver que protocolos declara el propio objeto. En nuestro caso se trata de un UITextField que declara el siguiente protocolo con una serie de métodos opcionales.
Nuestro objeto delegado podría implementar todos estos métodos y en cada uno de ellos podríamos cambiar el estado de cualquier otro objeto de la aplicación lo que nos proporciona una gran capacidad a la hora de ampliar el comportamiento definido por defecto de cada componente adáptandolo a nuestras necesidades, haciendo así nuestra aplicación más usable y obteniendo una mejor experiencia de usuario.
6. Conclusiones
Como hemos podido ver XCode y Cocoa ponen a nuestra disposición herramientas y técnicas que hacen el trabajo más facil al desarrollador. Sin embargo es importante profundizar más en estos conceptos para ser capaces de aprovechar todas las capacidades del lenguaje y frameworks de Apple para que nuestros desarrollos tengan un código robusto y eficaz también en la capa de presentación.
Espero que este tutorial os haya sido de ayuda. Un saludo.
Saúl García Díaz
sgdiaz@autentia.com
