Aplicaci´on final

Tras todo esto, la aplicaci´on deber´ıa quedarnos de la siguiente manera:

B.10.

Acciones y eventos

En este tema vamos a tratar las cosas que pasan cuando interactuamos con una aplicaci´on.

B.10.1.

Acci´on

Una acci´on es aqu´el gesto que realiza el usuario sobre una aplicaci´on sobre un elemento de la misma.

Las acciones pueden ser: Pulsar.

Arrastrar. Doble Click. ...

Existen algunas acciones que pueden ser producidas por el propio programa, como por ejemplo los temporizadores, que realizan acciones cada determinados se- gundos.

B.10.2.

Evento

Un evento es la respuesta que da el programa a una determinada acci´on. Los eventos pueden ser:

Acceder a una ventana nueva. Guardar unos cambios.

Desplegar un men´u de opciones.

En definitiva, cualquier cosa que pasa en la aplicaci´on.

B.10.3.

Dentro de un proyecto

Como ya hemos visto, antes de empezar a programar una aplicaci´on tenemos que tener previsto el funcionamiento general de la aplicaci´on. Deberemos realizar un peque˜no an´alisis sobre c´omo queremos que sea las transiciones entre nuestras

diferentes ventanas, c´omo se le presentar´an las opciones al usuario y qu´e tendr´a que hacer con ellas.

En algunos casos nos encontraremos con que el evento que se lanzar´a despu´es de una acci´on no hace nada a simple vista, como por ejemplo iniciar un contador o guardar unos cambios. Por ello debemos indicar al usuario de alguna manera que se ha realizado.

B.11.

Pulsar botones

En este ejemplo vamos a ver qu´e cosas podemos hacer cuando pulsemos un bot´on, as´ı como usar un temporizador.

Vamos a usar como ejemplo una pantalla de preguntas y posibles respuestas, al que le pondremos puntuaci´on y un temporizador.

B.11.1.

Creando la interfaz

Como ya tenemos experiencia en crear men´us, dise˜naremos uno que nos sirva para responder preguntas. Por ejemplo algo as´ı:

Procura que los nombres de los diferentes elementos quede de esta forma:

B.11.2.

Acciones

Ahora vamos a darle funcionalidad a esos botones. Abrimos Blocks Editor y arrastramos los tres Botones.Click:

Como al responder cualquier pregunta pasaremos a la siguiente pantalla, intro- duciremos estas piezas:

Ahora haremos que los botones cambien de color seg´un se acierte o se falle. Para ello, elegiremos las piezas de set BotonRespuestaX.BlackgroudColor. A la 1 y 3 las pondremos de color Rojo y a la 2 en Verde.

Ahora vamos a hacer que, cada vez que acertemos, se incrementen los puntos. Para ello, primero deberemos dar un valor inicial a la Puntuaci´on. Este valor de- ber´a empezar a 0, por lo que le daremos ese valor al iniciar la ventana.

Para conseguir esto, moveremos la pieza Pregunta1.Initialize al ´area de traba- jo. Ahora buscaremos la pieza set ValorPuntuacion.Text to, la arrastraremos y le pondremos el valor 0, quedano algo as´ı:

Ahora actualizaremos el valor de esta variable cuando acertemos con la pregunta:

Como puedes ver, la manera que tenemos de actualizar un dato es usandolo en el proceso, es decir, si queremos que un valor se incremente en uno, lo que deberemos hacer es almacenar en la misma variable, el valor que tiene m´as 1 -> X = X +1

B.11.3.

Temporizador

Vamos a darle un tiempo al usuario para que responda a la pregunta, para que el juego sea m´as entretenido. Para ello, vamos a utilizar un temporizador, o lo que es lo mismo, un elemento que realizar´a una acci´on pasado un tiempo.

Iremos a Designer y arrastraremos un Clock sobre la pantalla.

A continuaci´on, iremos al Blocks Editor y programaremos para que nuestro tem- porizador se inicie al cargar la pantalla. Pondremos el valor inicial a 5, para que el usuario tenga 5 segundos para responder.

Ahora programaremos el temporizador, para que el contador de la pantalla vaya bajando a 0 y cambie de pantalla al terminar.

B.11.4.

Pantalla terminada

B.12.

Almacenar informaci´on

Una de las principales cosas que se pueden realizar con una aplicaci´on es el uso y manejo de informaci´on. Normalmente, nos ser´a muy interesante el poder disponer de ella m´as adelante. Ya vimos al principio del curso las variables, que nos serv´ıan para almacenar un valor que podr´ıamos cambiar en el tiempo y los tipos de datos, que defin´ıan c´omo pod´ıan ser esas variables.

En este tema vamos a ver algunas de las estructuras que podemos utilizar.

B.12.1.

Listas

Una lista es una estructura formada por un conjunto ordenado de elementos. Podremos almacenar en ellas todos los elementos que queramos y, para acceder al elemento que nos interese deberemos conocer cu´al es su ´ındice o posici´on en la misma. ¡Ojo! ¡Normalmente el primer elemento se encuentra en la posici´on 0!

Un ejemplo de lista ser´ıa:

Semana: Lista = (Lunes, Martes, Mi´ercoles, Jueves, Viernes, S´abado, Domin- go)

Si pregunt´asemos a esta lista Semana por cu´al es el valor en 3: Semana(3) -> Jueves.

B.12.2.

Bases de datos

Una base de datos nos permite almacenar informaci´on, asignando varios valores a una misma clave. Las bases de datos permiten ser conectadas entre ellas y realizar operaciones de consulta.

Por ejemplo podr´ıamos tener dos bases de datos de la siguiente forma:

ClaveUsuario Nombre Correo ClaveLibro

100 David [email protected] 2,3

101 Adriana [email protected] 2

ClaveLibro T´ıtulo Autor

2 Querido Dexter Je↵ Lindsay

Si queremos conocer los datos del autor de los libros que tiene alquilado Adriana, deberemos preguntar a la primera tabla cu´ales tiene y a continuaci´on, en la segunda, qu´e autor tienen.

B.13.

Almacenar el resultado

En este ejercicio vamos a utilizar las opciones que nos permite App Inventor para almacenar informaci´on.

B.13.1.

Con listas

En este ejemplo veremos como se puede guardar informaci´on en una lista y c´omo se accede a ella para recuperarla. Estas listas nos valen para manejar informaci´on de forma r´apida dentro de una aplicaci´on, aunque hay que tener en cuenta que cualquier modificaci´on en las mismas se eliminar´a al reiniciar la aplicaci´on.

En un proyecto nuevo, crea una nueva pantalla en blanco en el Designer y abre Blocks Editor.

B.13.1.1. Crear una lista

Crea una nueva variable, ll´amala listaEjemplo e introduce unos valores ordena- dos, tal que as´ı:

La lista quedar´a de la siguiente forma: En la posici´on 0, el valor 10.

En la posici´on 1, el valor 20. En la posici´on 2, el valor 30.

Cada vez que cargue esta pantalla, esta variable se inicializar´a con estos valores.

B.13.1.2. Acceder a valores de una lista

Para acceder a estos valores usaremos el call select list item, seleccionando la lista a la que queremos acceder y la posici´on:

Esto nos devolver´ıa el valor 30.

B.13.1.3. Cambiar un valor de una lista

Ahora, imagina que, durante la ejecuci´on de nuestra aplicaci´on, queremos susti- tuir el valor de 20 por 40. Para ello, utilizaremos las otras fichas que nos permiten las listas, en este caso call replace list item. Los valores que necesita esta ficha son: el nombre de la lista que queremos modificar, la posici´on que queremos cambiar y el valor de reemplazo:

Este valor 40 podr´ıa ser cualquier otro, como por ejemplo una puntuaci´on nueva en un juego o un nuevo n´umero de tel´efono en una agenda.