LISTAS EN APP INVENTOR 2. PARTE 1

¿QUE ES UNA LISTA?

Hoy nos toca hablar de las listas en App Inventor 2, es una herramienta muy potente que nos puede ayudar a  almacenar datos, como números de teléfono, nombres, puntuaciones, etc.

Con las listas podemos manejar estructuras de datos dentro de elementos, y se suelen utilizar en muchos lenguajes de programación, pero por contra tengo que decir que es un elemento complejo de entender y de utilizar, pero que una vez comprendido y asimilado podremos dotar a nuestra aplicación de una estructura de datos, que nos será de gran ayuda.

Vamos a ver un ejemplo de cómo se crea una lista en App Inventor 2, para ello crearemos un nuevo proyecto al que llamaremos EjemploListas,  una vez creado y con el proyecto abierto nos dirigimos a la pantalla de bloques, seguido arrastraremos un bloque para inicializar una variable global, a la que pondremos el nombre de Frutas, para ello iremos a bloques → integrados → variables y arrastramos al lienzo el bloque Inicializar global como

esta vez como dato le asignaremos una lista vacía, a la que más tarde rellenaremos los campos para ello nos dirigimos a bloques → integrados → listas y encajaremos en el bloque anterior el bloque crear una lista vacía.

Bien, ya tenemos creada nuestra lista ahora solo tendremos que introducir los datos en ella, para ello pulsaremos con el botón izquierdo del ratón en la rueda dentada de color azul situada en la esquina superior izquierda de nuestro bloque, y arrastraremos al interior tres elementos más,

con lo que hará un total de cuatro y a cada uno de ellos le asignaremos un bloque de texto con los siguientes nombres en orden Fresa, Manzana, Pera y Melocotón. Cada uno ocupará un índice.

¿QUE ES UN ÍNDICE?

Cada elemento en una lista tiene un índice. En App Inventor 2 a diferencia de otros lenguajes de programación, el primer elemento de una lista tiene el índice 1. En nuestra lista, Fresa tiene el índice 1, Manzana tiene el índice 2, Pera tiene el índice 3 y Melocotón tiene el índice 4.

Esto quiere decir que se puede hacer referencia a un elemento específico dentro de nuestra lista si sabemos qué índice tiene y el nombre de la lista que lo contiene. En nuestro caso el nombre de nuestra lista sería el nombre de la variable que lo contiene, Frutas, y el índice sería cada elemento de la lista.

UN EJEMPLO SENCILLO

Bien, ahora que ya hemos creado nuestra lista y tenemos alguna noción de que es un índice dentro de nuestra lista, vamos hacer una pequeña aplicación que recorra todo los elementos de nuestra lista. Lo primero antes de todo será crear nuestro layout para nuestro proyecto, donde tendremos una etiqueta que utilizaremos para mostrar cada uno de los nombres de nuestra lista,  para ello pulsaremos en el botón DISEÑADOR y en paleta → Interfaz de usuario arrastraremos el componente etiqueta dentro de nuestro layout, en sus propiedades cambiaremos el texto por “Lista de frutas”, seguido arrastraremos el botón que situaremos justo debajo de la etiqueta y que en sus propiedades cambiaremos el nombre por el de Índice +1, nos debe de quedar algo parecido a esto.

El aspecto estético de momento lo dejamos en este tutorial a un lado, pero siéntete libre de mejorarlo, como ejemplo, podrias poner tanto el texto como el botón centrados en la pantalla.

Dicho esto, sigamos, pulsaremos el botón de bloques y daremos comienzo a la programación de la lógica de la app, lo que trataremos de hacer es que al pulsar el botón, incrementaremos una variable que servirá para recorrer todos los elementos de la lista, y llegados al final de la lista volveremos al principio. La etiqueta mostrará en todo momento el valor del índice indicado con el valor de la variable, bien manos a la obra.

Utilizaremos una nueva variable global que utilizaremos como contador, para ello iremos a bloques → integrados → variables y arrastramos al lienzo el bloque Inicializar global como, esta vez como dato le asignaremos el valor numérico de 1 y como nombre le pondremos IndiceFrutas,

Bien, ahora crearemos un evento al pulsar el botón, para ello iremos a bloques → Screen1 → Boton1 y arrastraremos el bloque cuando boton 1 clic ejecutar. Ahora dentro de este bloque pondremos todo cuanto queremos que suceda al pulsar el botón, en primer lugar necesitamos actualizar el texto de nuestra etiqueta con el valor actual del índice de nuestra lista, para ello iremos a bloques → Screen1 → Etiqueta1 y la encajaremos justo debajo del bloque anterior, seguido iremos a bloques → integrados → Listas y arrastraremos el bloque seleccionar elemento de la lista índice y lo colocaremos a continuación del anterior. Ahora como elemento de la lista necesitamos el nombre de la misma, que en este caso es la variable frutas, para ello iremos a bloques → integrados → variables y arrastrará al bloque anterior tomar, y pulsando en el desplegable seleccionaremos global frutas. Ahora como índice necesitamos el valor de la variable creada para tal fin, para ello arrastraremos el mismo bloque que anteriormente utilizamos, pero esta vez en el desplegable seleccionaremos global IndiceFrutas,   nos tiene que quedar como la imagen.

Bien ahora necesitamos incrementar la variable que utilizamos de contador para que al pulsar esta incremente su valor en 1, para ello iremos a bloques → integrados → variables y encajaremos justo debajo de los anteriores bloques el bloque poner a, y seguido en bloques → integrados → matemáticas el bloque de sumas, en este mismo bloque, en su primer hueco introduciremos la misma variable y en el segundo meteremos un 1.

Bien ya casi lo tenemos si ejecutamos nuestra aplicación veremos que funciona, hasta llegar al último índice, que al pulsar de nuevo nos mostrará un mensaje de error ya que intenta mostrar un índice que no existe (el número 5), para evitar esto necesitamos decirle que si nuestra variable índice frutas es mayor de 4, que la vuelva a poner a 1, para ello utilizaremos un bloque condicional “si” que trataremos en siguientes tutoriales, y que por ahora solo debes saber que controlara que nuestra variable nunca valga más de 4.

Para ello iremos a bloques → integrados → control y arrastramos el bloque Si entonces justo debajo de los anteriores, ahora iremos a bloques → integrados → matemáticas arrastraremos el bloque en el que tiene un signo “=” y pulsando en la flechita seleccionaremos el comparador de mayor que “>”, en su primer hueco pondremos la variable IndiceFrutas y en el segundo el valor de 4, más abajo en el hueco donde dice “entonces” que es la parte que ejecutara si es cierta la condición de más arriba, daremos el valor de uno a nuestra variable.

Bien ahora solo nos queda ejecutar nuestra aplicación con nuestro método favorito y ver que a la hora de pulsar el botón, recorrera la lista de frutas, volviendo al principio una vez llegado al final.

Bien esto es todo, en siguientes entregas veremos más ejemplos del uso de listas, ir practicando y no olvides comentar cualquier duda al respecto, espero que sea de gran ayuda.

Hasta la próxima.