Resumen de la Keynote Platforms State of the Union, la interesante para desarrolladores

En esta entrada veremos el resumen de la conferencia principal para desarrolladores de las plataformas de Apple durante la #WWDC18

Read More

Curso de iOS7: IBOutlet e IBAction

Introducción

Unos de los patrones principales que ya comentamos en el tema de Patrones de Diseño fue el de Target-Action. Este concepto puede ejemplificarse con el uso de los IBOutlet e IBAction. Veremos a continuación cómo utilizarlos en el Xcode5 en una aplicación iOS7.

IBOutlet

Este tipo de patrón nos va a permitir relacionar objetos que hay definidos en la vista, con propiedades que definamos en el código de la clase del ViewController que tengamos asignada a dicha Escena.

Empezaremos como siempre con una Simple View Applicaction, si tienes dudas consulta el tema de Mi Primera Aplicación iOS y nos encontraremos con un View Controller vacío:

A continuación buscamos una label en el inspector de objetos:

Escribimos label en el filtrador de objetos:

y nos aparecerá la label en el inspector:

La arrastramos al View Controller de nuestra aplicación:

De esta manera aparecerá la etiqueta dentro de nuestra escena.
Seleccionamos la etiqueta y nos aparecerán sus atributos en el inspector:

Ahora es cuando debemos relacionar esta vista con el código. Para empezar debemos asegurarnos de que el View Controller del storyboard tiene asignado una clase View Controller. Para ello deberemos seleccionar el View Controller desde el Storyboard, bien desde los detalles de la escena:

O bien desde la vista de la escena, huso debajo de la pantalla de la escena, en el botón amarillo:

de ambas maneras podemos ver que en la vista de la escena el view controller nos aparece seleccionado en color azul:

Así en la parte de la derecha en el Identity Inspector tendremos lo siguiente:

Com podemos ver en la captura veremos que el campo class está rellenado y nos indica el nombre de la clase ViewController, por lo que es cierto que esta escena tiene un ViewController asignado y podemos relacionar esta escena con su código.

A continuación deberemos cambiar el modo de vista de edición para poder disponer al lado izquierdo la escena y a la derecha el código de la clase, preferiblemente el fichero de cabecera de la misma. Para ello pulsamos en el botón del Assistant Editor, que tenemos arriba a la izquierda de la ventana:

Esto nos permitirá dividir la pantalla de edición en dos:

Com podemos ver en la parte derecha está seleccionado el fichero de implementación por lo que deberemos cambiarlo al fichero de cabecera para ello seleccionaremos en la parte superior de la ventana del código para cambiar de fichero:

Como podemos ver en la captura la parte superior funciona como un selector de ficheros, dependiendo del que seleccionemos así nos parecerá en el editor uno u otro fichero. En este caso seleccionamos en de cabecera por lo que debería aparecernos algo similar a esto:

Como puede verse es el fichero de cabecera vacío.

Ahora es cuando debemos relacionar la vista, en este caso una label, una etiqueta como una propiedad de la clase ViewController. Para ello con a vista seleccionada y con el control pulsado arrastramos y soltamos la vista en el código:

Como puede verse en la captura nos aparece una línea de color azul cuando la arrastramos y debemos situarla entre el @interface y el @end. Nos aparece dentro del código una linea azul con un círculo en la parte izquierda de la línea, indicándonos donde se colocará el código generado. Al soltar nos debería aparecer el siguiente diálogo contextual:

Veamos los campos en detalle:

  • Connection: indicamos el tipo de conexión con la vista, en este caso nos interesa Outlet, pero podemos encontrar también Action (que veremos más adelante)
  • Objecto: nos aparece ya seleccionado View Controller
  • Name: el nombre que queremos darle a la propiedad, por ejemplo etiqueta
  • Type: tipo de vista del objeto
  • Storage: atributo que le asignaremos a la propiedad, aquí podemos dejar Strong.

Una vez puesto el nombre de la propiedad pulsamos en el botón Connect y debería aparecernos lo siguiente en el código de la clase:

@property (strong, nonatomic) IBOutlet UILabel *etiqueta;

Como puede verse se ha declarado automáticamente una nueva propiedad del tipo UILabel. Todas las Vistas empezarán por UI, con el nombre indicado. Además nos coloca la palabra reservada IBOutlet  delante del tipo del dato. Esta palabra permite a esa propiedad ser relacionada con un elemento en la vista.
Pongo captura para que veamos un pequeño detalle:

Como puede verse en la captura aparece un círculo al lado de la línea de la propiedad de la clase y si pasamos el ratón por encima de ella veremos que se selecciona la etiqueta relacionada.

Otra manera de comprobar que esta relación existe es desde la vista de conexiones. Por ejemplo si seleccionamos la label desde la escena, veremos lo siguiente:

Como puede verse la propiedad etiqueta aparece conectada con el ViewController. Si pulsáramos en la X que sale a la derecha del View Controller quitaríamos esa conexión.

Si seleccionamos el View Controller desde la escena, veremos lo siguiente en el Inspector de Conexiones:

Como puede verse hay un resumen de Outlets relacionados con propiedades dentro del View Controller. Nos aparecen tanto la propiedad de la etiqueta relacionada con la Label de la escena, como la view, propiedad intrínseca de todo View Controller relacionada con el View de la Escena.

Debemos tener mucho cuidado con que las vistas estén relacionadas correctamente con las propiedades de la clase, porque si esto no lo realizamos correctamente, puede darse el caso de que la aplicación no arranque correctamente. Sobre todo debemos tener mucho cuidado si cambiamos los nombres de las propiedades de la clase sin haber cambiado también la relación con la vista.

Existe otra manera a la hora de relacionar propiedades con elementos en la vista, pero esta manera explicada es la más rápida.

Nota: Toda vista que tengamos que modificar desde código deberá ser un IBOutlet

IBAction

De la misma manera que hemos creado un Outlet vamos a intentar generar un IBAction. Los IBAction será la manera que tengamos de modificar comportamientos ante eventos que se puedan disparar en la pantalla. Por ejemplo pulsar en un botón. El comportamiento por defecto al pulsar un botón en iOS es no hacer nada. Pero si queremos modificar ese comportamiento debemos asociar una funcionalidad al Evento de pulsar el botón.

Para poner un ejemplo debemos seguir los mismos pasos que hemos realizado anteriormente para añadir un botón.

Busca el botón en el inspector de objetos:

Arrastralo a la Escena:

Cambiale el title (texto que sale en el botón) en sus atributos y ponle por ejemplo, Pulsame:

Quedará algo similar a esto:

Ahora con la Vista dividida, y teniendo seleccionado en la derecha el fichero de cabecera de la clase, arrastra con el control pulsado el botón a la vista de código:

De la misma manera que hicimos con el IBOutlet nos sale una línea azul cese la vista hasta el código, según lo arrastramos y nos sale una línea azul indicando donde aparecerá el código generado dentro del fichero de la clase. Una vez soltamos nos sale el diálogo de creación de una conexión:

Veamos en detalle los campos, una vez seleccionamos en el Connection-> Action:

  • Connection: dejamos selecionado Action
  • Object: vemos que esta puesto View Controller
  • Name: nombre del método que crearemos en la clase para que se ejecute cada vez que se dispare el evento sobre esa vista, en este caso pulsa
  • Type: tipo del dato que nos envían al invocar el método, en este caso id. Como ya vimos en el Curso de Objective C, id representa un puntero a un objeto.
  • Event: Evento que queremos relacionar con el método. O dicho de otro modo el evento que va a disparar el comportamiento especial que estamos programando. En este caso dejaremos Touch Up Inside, que es lo más parecido al Click del botón.
  • Arguments: aquí dejaremos seleccionado Sender, que será el nombre del objeto que nos pasen por parámetro al método.
Después pulsaremos en Connect y nos aparecerá lo siguiente en el fichero de cabecera:
– (IBAction)pulsado:(id)sender;

Como en el anterior caso pongo captura del código generado y su conexión.

Como puede verse al pasar el ratón por encima del círculo de la línea de código del IBAction también se resalta en la escena la Vista conectada.
Y seleccionando el View Controller en la escena, en el inspector de Conexiones sale lo siguiente:
Como puede verse se relaciona el nombre del método con el botón Pulsame con el Evento Touch Up Inside.
Para cambiar al modo normal de edición sólo debemos seleccionar el botón de Editor Standart:
También se nos ha debido generar una nueva implementación del método en el fichero de implementación de la clase, si lo seleccionamos, ahora debería aparecer en el editor algo similar a esto:
– (IBAction)pulsado:(id)sender {
}
Pongo captura porque aquí también aparece el círculo al lado de la implementación:
Ahora es cuando tocaría realizar algo con esta implementación. Por ejemplo saquemos un mensaje por consola, con un NSLog:
– (IBAction)pulsado:(id)sender {
    NSLog(@»Ha pulsado el botón!»);
}
De esta manera si ejecutamos la aplicación con Comando + R, veríamos algo similar al esto cuando pulsemos el botón:

Categorías de Cursos

RSS Cursos de Desarrollo

  • Balanceadores de Carga 27/01/2020
    Dentro de la arquitectura web necesitamos cumplir con dos condiciones si queremos que nuestra arquitectura sea suficientemente sólida: Alta Disponibilidad y Alto Rendimiento, en esta entrada veremos cómo cumplir con estos dos principios. La alta disponibilidad trata de conseguir que un servicio tenga el máximo posible de tiempo de disponibilidad, es decir, que el servicio […]
  • Serie de Artículos de Docker 13/01/2020
    En esta entrada veremos cómo manejar Docker, en una serie de artículos explicativos. No te los pierdas He instalado Docker, ¿Y ahora qué? Docker Compose, para cuando quieres arrancar varios contenedores de manera coordinada
  • ¿Que Frameworks de Frontend son los más utilizados en el millón de páginas del Top de Alexa? 09/01/2020
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, más de 1.000.000 principales webs de Internet según Alexa. La idea, es la de ampliar la publicación […]
  • Artículos de administración de Servidores 08/01/2020
    Esta serie de artículos nos permiten saber cómo se instala y se configura un servidor desde cero: Nuevo Servidor NAS reciclado Acceso a servidor de la oficina desde fuera gracias a dinaip Configuración de un firewall de manera sencilla en Debian/Ubuntu
  • ¿Cuál es el uso de WordPress en los principales sitios de Internet según Alexa? 14/12/2019
    Empezamos con nuestra serie de publicaciones sobre tecnologías concretas que más se usan en Internet, en este caso con WordPress. ¿Quieres saber cómo es de importante y cuánto se utiliza? No te pierdas esta entrada.
  • Estudio de Uso de Tecnologías en el millón de páginas más vistas según Alexa 13/12/2019
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, más de 1.000.000 principales webs de Internet según Alexa. La idea, es la de ampliar la publicación […]
  • Configuración de un firewall de manera sencilla en Debian/Ubuntu 08/12/2019
    Uno de los problemas principales a la hora de asegurar un servidor es la de filtrar el tráfico de entrada y de salida del mismo, asegurando así que todas las conexiones entrantes y salientes están controladas y sabemos desde donde podemos entrar a los servicios que queremos y no desde donde no queremos. En esta […]
  • Acceso a servidor de la oficina desde fuera gracias a dinaip 06/12/2019
    Una de las tareas para poder acceder a los servicios de nuestro flamante servidor reciclado desde Internet es la de poder configurar el Router y el DNS Dinámico para darle un nombre fijo en Internet, en esta entrada explicaremos cómo lo hemos hecho. Solicitud de IP abierta a Internet en Pepephone El primer paso que […]
  • Arquitectura Web 4.0: Entornos Desacoplados 04/12/2019
    Dentro de la arquitectura Web un Entorno Desacoplado es la combinación de un FrontEnd y un Backend. En esta entrada veremos cómo funciona esta arquitectura desde los puntos más básicos. Como puede verse en el diagrama, una vez cargada una aplicación Frontend, se debería comportar como un agente más que consulta al Servicio Web Rest […]
  • Arquitectura Web 3.0 Frontend 02/12/2019
    Para entender cómo funciona la web iremos viendo cómo funciona de una manera sencilla a la más compleja. En esta entrada veremos los pasos para resolver una petición Web HTTP que gestionar el Navegador Web y cómo se ejecuta el código Javascript   Cliente Web: Solicita la resolución de nombres, actúa como un cliente DNS, […]

Si estás interesado en seguir formándote tenemos una serie de cursos gratuitos: http://cursosdedesarrollo.com/cursos/

También disponemos de algunos cursos de pago por si son de tu interés: https://cursosdedesarrollo.com/tienda/

Curso de Angular: https://cursosdedesarrollo.com/tienda/angular/

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies