En esta nueva entrada vamos a aprender cuál es el flujo de ejecución de una aplicación en App Inventor, además veremos como crear interfaces de usuario.
Flujo de ejecución de una aplicación en App Inventor
El flujo de cualquier programa en Android se basa en eventos, es decir, tiene que ocurrir una acción para que la reacción correspondiente se realice, es decir, el programa “espera” a. Esto ocurre tanto en las aplicaciones generadas con la programación “tradicional” como las generadas con App Inventor o Protocoder.
Diagrama ejecución Android
En el caso de la programación en otros lenguajes, como Arduino, la programación se basa en un ciclo en el que de manera lineal se ejecuta el código. Dentro de este ciclo, tendremos que comprobar si las acciones han ocurrido para entonces ejecutar las acciones correspondientes.
Diagrama ejecución Arduino
Creando la interfaz de usuario
Para crear la interfaz de usuario, el desarrollador puede hacer uso de distintos elementos, desde botones y cuadros de texto, a elementos que modifican la manera en que los elementos visuales se colocan en pantalla.
Para incluir elementos en App Inventor solo tendremos que buscar el que queremos incluir en la aplicación y arrastrarlo en la pantalla Visor, pero hay ciertos elementos que nos facilitarán crear una interfaz mejor, como los elementos Disposición.
Disposición
Los elementos de Disposición, o Layout en inglés, permiten modificar la forma en que se colocan los elementos. Existen varios tipos:
- Tabular: Ordena los elementos en forma de tabla.
- Vertical: Ordena los elementos colocándolos uno después de otro en orientación vertical.
- Horizontal: Ordena los elementos colocándolos uno después de otro en orientación horizontal.
Pueden incluirse disposiciones dentro de disposiciones, por lo que combinando varias podemos conseguir un buen diseño de interfaz.
Aplicación
En esta entrada vamos a hacer una aplicación que utilizará el reloj del dispositivo para ejecutar la vibración, demostrando así como la aplicación responde a eventos.
Diseño de la UI
Para comenzar, utilizaremos un contenedor vertical ( Disposición Vertical ) en el que organizaremos el resto de elementos. Fijamos las propiedades Ancho y Alto para que se ajusten al contenedor:
A continuación, dentro del contenedor vertical, incluimos una disposición Horizontal y una disposición Tabular. Modificamos ambos anchos para que se ajusten al contenedor:
Dentro del contenedor horizontal que hemos incluido en el paso anterior, incluimos dos botones, que se encargarán de iniciar y parar la ejecución del programa. Modificamos su nombre y texto por Iniciar y Parar y cambiamos su Ancho para que se ajusten al contenedor:
Entre el contenedor vertical y el contenedor horizontal, incluiremos el elemento Lienzo (Dibujo y animación), que utilizaremos para cambiar el intervalo entre vibraciones al arrastrar sobre el eje Y, y cambiar el tiempo de vibración al arrastrar sobre el eje X. Modificamos su alto y ancho para que se ajusten al contenedor.
A continuación, dentro del contenedor tabular, colocamos cuatro etiquetas:
Cambiamos el nombre de arriba a abajo y de izquierda a derecha por: Label_vibracion, tiempo_vibracion_label, Label_intervalo y tiempo_intervalo_label. Estas variables se encargarán de mostrar la palabra Vibración, el tiempo de vibración, mostrar intervalo y el tiempo de intervalo entre cada vibración, respectivamente. Modificamos el texto que muestran las etiquetas de Label_vibracion y label_intervalo por Vibración e Intervalo, respectivamente. Cambiamos el texto de las variables tiempo_vibracion_label y tiempo_intervalo_label por los valores con los que incializaremos las variables en la parte de programación, 100 y 1000 respectivamente.
Por último, incluiremos el elemento Reloj, incluido dentro de sensores, que utilizaremos como temporizador, y el elemento Sonido, incluido dentro de Medios, que utilizaremos para hacer vibrar el dispositivo. Estos dos elementos no tienen representación gráfica dentro de la interfaz.
Programación
En el modo Bloques programamos la aplicación. Para comenzar, declaramos las variables globales intervalo y vibración, para ello, arrastramos el bloque “inicializar global nombre como” y dentro de Matemáticas, el bloque para incluir números (primero del listado matemáticas):
Una vez que hemos unido ambos bloques, cambiamos nombre por intervalo y vibracion, y en el bloque de números asignamos 1000 a intervalo y 100 a vibración:
A continuación, programamos los botones Iniciar y Parar. Para ello utilizaremos la orden set Reloj1.TemporizadorHabilitado, que se encarga de habilitar o deshabilitar el temporizador si asignamos el valor cierto o falso respectivamente.
Además, utilizaremos el bloque “poner Reloj1.IntervaloDelTemporizador como”, uniendolo con el bloque “cuando Iniciar.Clic” para que se asigne el valor de la variable global intervalo al intervalo del temporizador. Este intervalo será el tiempo que tarde en “activarse” el temporizador.
Para obtener el bloque “tomar global intervalo”, nos situamos encima del nombre de la variable en su declaración, aparecerá un desplegable y desde ahí arrastramos el bloque tomar “global intervalo” al conjunto anterior:
Ahora, cada vez que se pulse sobre el botón Iniciar, se modificará el valor de la frecuencia con la que se activará el temporizador.
Para continuar, programaremos las acciones que se ejecutarán cuando se active el temporizador, para ello, dentro de Reloj1 arrastramos el bloque “cuando Reloj1.Temporizador”:
Con el bloque anterior, unimos el bloque “llamar Sonido1.Vibrar” y un bloque “tomar global vibracion”:
Para finalizar, programaremos la respuesta del lienzo al movimiento utilizando el bloque “cuando Lienzo1.Arrastrado”:
Dentro de este bloque, incluiremos la sentencia de control “si entonces” (if-else) y un bloque de comparación matemática:
Modificamos la comparación para que sea mayor que y incluimos en los miembros de la comparación, de izquierda a derecha, tomar YPrevio y tomar YActual:
Esta orden se ejecuta si nos desplazamos dentro del lienzo sobre el eje Y y hacia arriba, por lo que aumentaremos la variable. Podríamos asignar a la variable un valor en función de la posición que se haya tocado, pero para hacer la ejecución más estable e intuitiva, se aumentará el valor de la variable en una cantidad fija. En este caso, aumentaremos en 100 unidades el valor de la variable intervalo:
Duplicamos el bloque Si-Entonces anterior y lo unimos a éste, modificamos la comparación para que sea menor que, obteniendo la detección del desplazamiento contrario al anterior, es decir, vamos a detectar si se esta “bajando” dentro del lienzo. Al realizar el movimiento contrario, vamos a disminuir el valor de la variable:
Duplicación bloque
Podemos reutilizar todo el bloque menos la operación de suma, que tenemos que cambiar por una resta:
Para modificar el tiempo que vibrará cada vez que se active el temporizador, utilizaremos el movimiento sobre el eje X del lienzo. Los bloques de programación son los mismos que los utilizados para el eje Y, modificando los valores Y por X, la variable intervalo por vibración y la modificación del valor pasa de valer 100 a 10.
Ejercicios para mejorar la compresión
En el programa incluido, las variables pueden tomar valores negativos. Puedes modificar la aplicación para que si una variable toma un valor negativo se asigne el valor por defecto.
Puedes programar también la aplicación para que sea necesario desplazarse una cierta distancia sobre el lienzo para que se modifique la variable.
