4. Eventos
Nuestros
ordenadores (Pcs, móviles, tablets, etc.) son capaces de hacer muchas
cosas a la vez (multitarea). Todo esto es posible gracias a los potentes
procesadores que llevan pero también gracias a cómo están diseñadas las
aplicaciones. En este capítulo vamos a aprender cómo hacerlo.
Introducción
Nuestros
ordenadores (Pcs, móviles, tablets, etc.) son capaces de hacer muchas
cosas a la vez (multitarea). Podemos navegar por Internet mientras
recibimos mensajes de correo electrónico, podemos empezar a ver vídeos
on-line mientras el resto del video todavía se está descargando de
Internet, podemos escuchar música mientras el navegador nos da
instrucciones para llegar a nuestro destino, etcétera. Todo esto es
posible gracias a los potentes procesadores que llevan pero también
gracias a cómo están diseñadas estas aplicaciones. Vamos a ver un
ejemplo:
1 Empieza un nuevo proyecto y llámalo "eventos".
2 Desde el Diseñador coge un componente label, un componente checkbox y un componente botón en este orden. Añade además un componente AccelerometerSensor que encontrarás dentro de Sensors (sensores).
3 Para este ejemplo no es necesario que cambies los nombres de los componentes pero puedes cambiar el texto del botón y dejar en blanco el texto del control CheckBox. También puedes centrar los componentes en la pantalla usando el componente Screen y cambiar el tamaño del font del componente label para que se vea mejor.
4 Vamos ahora al editor de bloques.
5 Desde la categoría Screen1 selecciona el componente botón (Button1) y coge el bloque marrón (evento) Button1.Click. Selecciona ahora el componente CheckBox1 y coge el bloque marrón (evento) CheckBox1.Change.
6 Selecciona el componente Screen1 y coge el bloque marrón (evento) Screen1.ScreenOrientationChanged.
7 Por último selecciona el componente AccelerometerSensor1 y coge el bloque marrón (evento) AccelerometerSensor1.Shaking. Recuerda que todos los bloques marrones corresponden a eventos y se llaman "when...do" ("cuando pase esto... haz esto"). Selecciona ahora el componente label1 y coge el bloque verde oscuro "set label1.Text to" y ponlo en cualquier parte de la pantalla.
8 Ahora, selecciona la categoría de texto (Text) y elige el primer bloque " ". Cambia el texto y escribe, por ejemplo: "¡Has pulsado el botón!"
9 Coge este bloque de texto y pégalo al bloque verde anterior "set label1.Text to"
10 De esta forma estamos asignándole un texto a la etiqueta de nuestro programa. Vamos a hacer lo mismo para cada uno de los eventos que queremos controlar. Para hacerlo más rápidamente basta con que selecciones el anterior bloque verde y lo dupliques tantas veces como etiquetas vamos a usar; cuatro en nuestro caso. Recuerda usar copiar y pegar. Para ello, haz click sobre este bloque con el botón derecho del ratón y selecciona “Duplicate”.
Ahora tenemos cuatro bloques para asignarle texto a nuestra etiqueta, sólo nos queda cambiar el texto de cada bloque para que sepamos qué evento se está produciendo en nuestro dispositivo.
11 Como ya tenemos el texto para el botón sólo nos queda cambiar el texto para el resto de los eventos. Cambia el texto de los otros bloques y pon respectivamente: "¡Has cambiado el check box", "¡Has cambiado la orientación", "¡Has sacudido el móvil".
12 Ahora sólo queda asignar a cada evento el bloque que le corresponde. Tiene que quedar así:
13 Prueba a sacudir tu teléfono, a cambiar la orientación, a pulsar el botón etc. Si todo funciona correctamente verás que la etiqueta de texto cambia dependiendo de cada evento.
Con este sencillo ejemplo vemos que nuestro programa no hace nada mientras esperamos a que se produzca un evento. Únicamente cuando el evento se produce se activa cada bloque que hemos usado en el Editor de bloques para el evento en concreto.
Esta forma de programar aplicaciones se llama programación dirigida por eventos y es la forma de programar con App Inventor .
1 Empieza un nuevo proyecto y llámalo "eventos".
2 Desde el Diseñador coge un componente label, un componente checkbox y un componente botón en este orden. Añade además un componente AccelerometerSensor que encontrarás dentro de Sensors (sensores).
3 Para este ejemplo no es necesario que cambies los nombres de los componentes pero puedes cambiar el texto del botón y dejar en blanco el texto del control CheckBox. También puedes centrar los componentes en la pantalla usando el componente Screen y cambiar el tamaño del font del componente label para que se vea mejor.
4 Vamos ahora al editor de bloques.
5 Desde la categoría Screen1 selecciona el componente botón (Button1) y coge el bloque marrón (evento) Button1.Click. Selecciona ahora el componente CheckBox1 y coge el bloque marrón (evento) CheckBox1.Change.
6 Selecciona el componente Screen1 y coge el bloque marrón (evento) Screen1.ScreenOrientationChanged.
7 Por último selecciona el componente AccelerometerSensor1 y coge el bloque marrón (evento) AccelerometerSensor1.Shaking. Recuerda que todos los bloques marrones corresponden a eventos y se llaman "when...do" ("cuando pase esto... haz esto"). Selecciona ahora el componente label1 y coge el bloque verde oscuro "set label1.Text to" y ponlo en cualquier parte de la pantalla.
8 Ahora, selecciona la categoría de texto (Text) y elige el primer bloque " ". Cambia el texto y escribe, por ejemplo: "¡Has pulsado el botón!"
9 Coge este bloque de texto y pégalo al bloque verde anterior "set label1.Text to"
10 De esta forma estamos asignándole un texto a la etiqueta de nuestro programa. Vamos a hacer lo mismo para cada uno de los eventos que queremos controlar. Para hacerlo más rápidamente basta con que selecciones el anterior bloque verde y lo dupliques tantas veces como etiquetas vamos a usar; cuatro en nuestro caso. Recuerda usar copiar y pegar. Para ello, haz click sobre este bloque con el botón derecho del ratón y selecciona “Duplicate”.
Ahora tenemos cuatro bloques para asignarle texto a nuestra etiqueta, sólo nos queda cambiar el texto de cada bloque para que sepamos qué evento se está produciendo en nuestro dispositivo.
11 Como ya tenemos el texto para el botón sólo nos queda cambiar el texto para el resto de los eventos. Cambia el texto de los otros bloques y pon respectivamente: "¡Has cambiado el check box", "¡Has cambiado la orientación", "¡Has sacudido el móvil".
12 Ahora sólo queda asignar a cada evento el bloque que le corresponde. Tiene que quedar así:
13 Prueba a sacudir tu teléfono, a cambiar la orientación, a pulsar el botón etc. Si todo funciona correctamente verás que la etiqueta de texto cambia dependiendo de cada evento.
Con este sencillo ejemplo vemos que nuestro programa no hace nada mientras esperamos a que se produzca un evento. Únicamente cuando el evento se produce se activa cada bloque que hemos usado en el Editor de bloques para el evento en concreto.
Esta forma de programar aplicaciones se llama programación dirigida por eventos y es la forma de programar con App Inventor .
Programación dirigida por eventos
Mientras
nuestra aplicación está a la espera de que se produzca un evento,
Android se dedica a hacer otras cosas dejando libre al procesador (CPU)
para que pueda ser utilizado por otras aplicaciones y procesos como
descargar nuestro correo electrónico, actualizar nuestro calendario,
etcétera. De esta forma se comparte un recurso tan valioso como el
procesador entre múltiples aplicaciones sin que ninguna de ellas en
concreto lo llegue a bloquear impidiéndonos usar el dispositivo.
Imagina qué ocurriría si no fuera así. Si nuestro programa se quedara esperando a que se produjera un evento y el procesador de nuestro dispositivo estuviera únicamente dedicado a esto, el resto de programas que corren en nuestro dispositivo se quedarían parados esperando a tener la oportunidad de hacer algo ya que el procesador estaría ocupado. Mientras nuestro programa estuviera corriendo no podríamos recibir llamadas, ni recibir mensajes, ni hacer básicamente nada hasta que terminara.
Cuando programemos con Appinventor es importante que tengamos esto presente para que nuestras aplicaciones sean eficientes y rápidas. Así que lo primero que siempre tendremos que hacer al diseñar nuestras aplicaciones es pensar en los eventos que vamos a programar.
Imagina qué ocurriría si no fuera así. Si nuestro programa se quedara esperando a que se produjera un evento y el procesador de nuestro dispositivo estuviera únicamente dedicado a esto, el resto de programas que corren en nuestro dispositivo se quedarían parados esperando a tener la oportunidad de hacer algo ya que el procesador estaría ocupado. Mientras nuestro programa estuviera corriendo no podríamos recibir llamadas, ni recibir mensajes, ni hacer básicamente nada hasta que terminara.
Cuando programemos con Appinventor es importante que tengamos esto presente para que nuestras aplicaciones sean eficientes y rápidas. Así que lo primero que siempre tendremos que hacer al diseñar nuestras aplicaciones es pensar en los eventos que vamos a programar.
Tipos de eventos
Eventos de GUI (Graphic User Interface o Interface Gráfico de Usuario)
Generalmente la mayoría de
eventos son producidos por el usuario cuando usa el interface de tu
aplicación. Ya hemos visto algunos de estos eventos, por ejemplo, cuando
el usuario pulsa un botón se produce el evento "button1.Click",
etcétera.
Eventos de componentes no visibles
Otro tipo de eventos son
producidos por algunos componentes que usamos en nuestros programas y
que no son visibles. Por ejemplo, el sensor de movimiento dispara un
evento cuando sacudimos nuestro dispositivo, tal y como hemos visto
también en nuestro ejemplo anterior.
Eventos del reloj / cronómetro
Todos nuestros dispositivos cuentan con un reloj interno que funciona
también como un cronómetro. Una forma de usar este reloj/cronómetro es
para hacer que nos avise (generando un evento) cada cierto tiempo que
nosotros queramos. Esto es muy útil cuando queremos hacer algo que
dependa de un determinado tiempo. Por ejemplo, mostrar un mensaje
durante un tiempo determinado, comprobar algo cada cierto tiempo, etc.
Vamos a ver cómo usarlo siguiendo con nuestro anterior ejemplo.
1 Vuelve al diseñador y usa el componente clock (reloj) arrastrándolo a tu programa. Verás que este componente no es visible.
2 Ahora selecciona el componente y vamos a fijarnos en sus propiedades.
3 La propiedad más importante se llama TimerInterval y nos permite definir por cuánto tiempo queremos que funcione nuestro cronómetro. El tiempo se mide en milisegundos, por lo tanto para que cuente, por ejemplo, cinco segundos, tendremos que escribir 5000. Hazlo ahora y pon 5000.
4 Cuando el intervalo de tiempo se cumpla nuestro reloj volverá a contar desde cero. Imagina el sonido del tambor de una banda de música; el tiempo que pasa entre cada golpe del tambor es el intervalo.
La propiedad TimerAlwaysFires nos permite decidir si queremos que el reloj cuando llegue al final del intervalo de tiempo active o no un evento. Mientras esta propiedad esté activa, al cumplirse el intervalo se generará un evento.
5 Para nuestro ejemplo déjalo activo.
6 Por último la propiedad TimerEnable nos permite decidir si el reloj estará contando desde el momento de arrancar nuestro programa o lo activaremos desde el Editor de bloques después. Déjalo también activo.
7 Ahora vamos al editor de bloques.
8 Dentro de la categoría Screen1 verás el componente Clock1. Si lo seleccionas verás que tiene un evento de color marrón llamado Clock1.Timer. Este es el evento que se activará cada vez que nuestro reloj cuente el número de segundos que hemos decidido antes. En nuestro caso 5 segundos. Arrástralo a tu programa.
Ahora sólo nos queda decidir qué queremos que pase cuando esto ocurra. Vamos a añadir un sonido y a actualizar la etiqueta como hemos hecho con los otros eventos.
9 Vuelve al Diseñador y coge el componente Sound.
10 En sus propiedades verás que puedes seleccionar el sonido que quieres usar en Source (origen). Puedes usar el sonido beep.mp3 que encontrarás aquí.
11 Volvemos al editor de bloques donde aparecerá nuestro componente de sonido Sound1. Si lo seleccionas verás que tiene un bloque llamado "call Sound1.Play". Coloca este bloque dentro del evento del reloj "when Clock1.Timer".
De esta forma cada vez que el cronómetro cuente cinco segundos se activará este evento y sonará una alerta.
12 Finalmente vamos a actualizar la etiqueta. Duplica cualquiera de los bloques (set label1.Text) que has usado antes y cambia el texto por: "¡Se ha activado el reloj!"
13 ¿Funciona?
14 Puedes volver a separar el bloque "call Sound1.Play" si no quieres que te vuelva loco mientras seguimos probando cosas.
1 Vuelve al diseñador y usa el componente clock (reloj) arrastrándolo a tu programa. Verás que este componente no es visible.
2 Ahora selecciona el componente y vamos a fijarnos en sus propiedades.
3 La propiedad más importante se llama TimerInterval y nos permite definir por cuánto tiempo queremos que funcione nuestro cronómetro. El tiempo se mide en milisegundos, por lo tanto para que cuente, por ejemplo, cinco segundos, tendremos que escribir 5000. Hazlo ahora y pon 5000.
4 Cuando el intervalo de tiempo se cumpla nuestro reloj volverá a contar desde cero. Imagina el sonido del tambor de una banda de música; el tiempo que pasa entre cada golpe del tambor es el intervalo.
La propiedad TimerAlwaysFires nos permite decidir si queremos que el reloj cuando llegue al final del intervalo de tiempo active o no un evento. Mientras esta propiedad esté activa, al cumplirse el intervalo se generará un evento.
5 Para nuestro ejemplo déjalo activo.
6 Por último la propiedad TimerEnable nos permite decidir si el reloj estará contando desde el momento de arrancar nuestro programa o lo activaremos desde el Editor de bloques después. Déjalo también activo.
7 Ahora vamos al editor de bloques.
8 Dentro de la categoría Screen1 verás el componente Clock1. Si lo seleccionas verás que tiene un evento de color marrón llamado Clock1.Timer. Este es el evento que se activará cada vez que nuestro reloj cuente el número de segundos que hemos decidido antes. En nuestro caso 5 segundos. Arrástralo a tu programa.
Ahora sólo nos queda decidir qué queremos que pase cuando esto ocurra. Vamos a añadir un sonido y a actualizar la etiqueta como hemos hecho con los otros eventos.
9 Vuelve al Diseñador y coge el componente Sound.
10 En sus propiedades verás que puedes seleccionar el sonido que quieres usar en Source (origen). Puedes usar el sonido beep.mp3 que encontrarás aquí.
11 Volvemos al editor de bloques donde aparecerá nuestro componente de sonido Sound1. Si lo seleccionas verás que tiene un bloque llamado "call Sound1.Play". Coloca este bloque dentro del evento del reloj "when Clock1.Timer".
De esta forma cada vez que el cronómetro cuente cinco segundos se activará este evento y sonará una alerta.
12 Finalmente vamos a actualizar la etiqueta. Duplica cualquiera de los bloques (set label1.Text) que has usado antes y cambia el texto por: "¡Se ha activado el reloj!"
13 ¿Funciona?
14 Puedes volver a separar el bloque "call Sound1.Play" si no quieres que te vuelva loco mientras seguimos probando cosas.
Eventos del componente pantalla
Recuerda que todos nuestros programas tienen un componente llamado
Screen1 que corresponde a la pantalla principal de nuestra aplicación.
En nuestro ejemplo anterior hemos usado este componente para detectar
cuando el usuario cambia la orientación del dispositivo usando el evento
Screen1.ScreenOrientationChanged.
Este componente también tienen un evento llamado .Initialize. Este evento se activa cuando la pantalla principal se inicia, es decir, cuando nuestra aplicación arranca por primera vez, que es el momento en que nuestra aplicación inicia la pantalla principal. Podemos usar este evento para preparar cosas dentro de nuestro programa, mostrar un mensaje de bienvenida, etc.
Vamos a aprender a usar este evento para crear un mensaje de inicio o bienvenida a nuestros programas. Para empezar, arrástralo a tu programa.
15 Vuelve al Diseñador y coge el componente Notifier (notificador) dentro de la categoría de componentes User Interface, y arrástralo a tu programa. Verás que este componente no es visible y que tampoco tiene propiedades.
16 Este componente nos permite mostrar mensajes en la pantalla de nuestro dispositivo. Vamos a usarlo en nuestro ejemplo para mostrar un mensaje de bienvenida a los usuarios. Vuelve al Editor de bloques.
17 Como siempre, verás que el componente Notifier1 aparece dentro de la lista Screen1. Si lo seleccionas verás un bloque llamado "call Notifier1.ShowMessageDialog" arrástralo dentro del evento "when Screen1.Initialize do" que hemos usado antes.
Ahora sólo queda crear tres bloques de texto que corresponden al título (title) que queremos darle a la ventana con el mensaje, al mensaje propiamente dicho (message) y al botón que aparecerá junto con el mensaje (button).
18 Por ejemplo: "Bienvenido", "Espero que mi aplicación te guste" y "Continuar" respectivamente. Pégalos al bloque "call Notifier1.ShowMessageDialog" donde corresponden.
19 Para comprobar que funciona sólo nos queda reiniciar nuestra aplicación porque de lo contrario este evento nunca se activará. Para reiniciar nuestra aplicación basta con que selecciones de nuevo la conexión con tu dispositivo aquí.
Una vez resetees la conexión, vuelve a establecerla para que se active este evento. Al hacerlo deberías ver nuestra ventana de bienvenida.
Las pantallas de inicio de las aplicaciones se llaman SplashScreens y sirven para dar la bienvenida a tus usuarios o cuando la aplicación tarda un tiempo en arrancar y no quieres que tus usuarios se impacienten. Más adelante veremos la forma correcta de mostrar este tipo de pantallas usando un segundo componente Screen.
Este componente también tienen un evento llamado .Initialize. Este evento se activa cuando la pantalla principal se inicia, es decir, cuando nuestra aplicación arranca por primera vez, que es el momento en que nuestra aplicación inicia la pantalla principal. Podemos usar este evento para preparar cosas dentro de nuestro programa, mostrar un mensaje de bienvenida, etc.
Vamos a aprender a usar este evento para crear un mensaje de inicio o bienvenida a nuestros programas. Para empezar, arrástralo a tu programa.
15 Vuelve al Diseñador y coge el componente Notifier (notificador) dentro de la categoría de componentes User Interface, y arrástralo a tu programa. Verás que este componente no es visible y que tampoco tiene propiedades.
16 Este componente nos permite mostrar mensajes en la pantalla de nuestro dispositivo. Vamos a usarlo en nuestro ejemplo para mostrar un mensaje de bienvenida a los usuarios. Vuelve al Editor de bloques.
17 Como siempre, verás que el componente Notifier1 aparece dentro de la lista Screen1. Si lo seleccionas verás un bloque llamado "call Notifier1.ShowMessageDialog" arrástralo dentro del evento "when Screen1.Initialize do" que hemos usado antes.
Ahora sólo queda crear tres bloques de texto que corresponden al título (title) que queremos darle a la ventana con el mensaje, al mensaje propiamente dicho (message) y al botón que aparecerá junto con el mensaje (button).
18 Por ejemplo: "Bienvenido", "Espero que mi aplicación te guste" y "Continuar" respectivamente. Pégalos al bloque "call Notifier1.ShowMessageDialog" donde corresponden.
19 Para comprobar que funciona sólo nos queda reiniciar nuestra aplicación porque de lo contrario este evento nunca se activará. Para reiniciar nuestra aplicación basta con que selecciones de nuevo la conexión con tu dispositivo aquí.
Una vez resetees la conexión, vuelve a establecerla para que se active este evento. Al hacerlo deberías ver nuestra ventana de bienvenida.
Las pantallas de inicio de las aplicaciones se llaman SplashScreens y sirven para dar la bienvenida a tus usuarios o cuando la aplicación tarda un tiempo en arrancar y no quieres que tus usuarios se impacienten. Más adelante veremos la forma correcta de mostrar este tipo de pantallas usando un segundo componente Screen.
