LISTAS EN APP INVENTOR 2. PARTE 2

Hola, bienvenido lector, el artículo que nos ocupa hoy es la continuación del anterior post en el que vimos cómo crear y manejar listas en App Inventor 2, si recordamos, nos ayudamos de una etiqueta que nos mostraba los distintos índices, ayudados por un botón, ahora lo que haremos es dar al usuario la posibilidad de añadir elementos a la lista ayudados de un botón, y mostrarlos de la misma manera. Para ello necesitaremos una serie de objetos nuevos como una caja de texto y un nuevo botón, el primero lo utilizaremos para que nuestro usuario meta la información necesaria en forma de texto y el segundo será para confirmar que la información quede insertada en la lista. Bien pues sin más comenzaremos abriendo el proyecto anterior ejemplo listas y pulsaremos el botón de diseñador situado arriba a la izquierda de nuestra pantalla, una vez situados en la pantalla de diseño, iremos a paleta –> interfaz de usuario y arrastrarnos el componente CampodeTexto dentro de nuestro diseño y lo colocaremos justo debajo de nuestro botón el que ya utilizamos en el anterior tutorial, y en sus propiedades Pista añadiremos el siguiente texto, “Añade una fruta a la lista”. Seguido nos dirigimos nuevamente paleta –> interfaz de usuario y esta vez arrastramos a nuestro diseño un botón que colocaremos justo debajo del CampoDeTexto, y que en su propiedades pondremos el texto Añadir. Hasta aquí ya tenemos nuestro diseño, y que a tenido que quedar algo parecido a lo siguiente.

Ahora comenzaremos con la lógica, para ello pulsamos como siempre en el botón Bloques que se encuentra situado en la esquina superior derecha y que nos abrirá nuestro editor de bloques.
Lo primero que tenemos que hacer es hacer que cuando el usuario pulse el nuevo botón nuestro programa introduzca el contenido de nuestro CampoDeTexto al final de nuestra lista, pero antes tenemos que asegurarnos que el contenido de nuestro CampoDeTexto no está vacío. Vamos a ver cómo hacer esto en unos sencillos pasos, nos dirigimos como siempre a bloques → Screen1 → Boton2 y arrastramos a nuestro lienzo el bloque cuando Boton2 clic ejecutar seguido nos iremos a bloques → integrado → control y arrastramos el bloque si entonces justo debajo del bloque anterior, ahora en bloques → integrado → texto arrastraremos seguido del bloque  si entonces el bloque comparar texto y lo configuraremos de la siguiente manera en el primer hueco meteremos el que nos devuelve el texto contenido en el CampoDeTexto para ello iremos a bloques → integrado → Screen1 → TextBox1 y arrastraremos a ese hueco el bloque CampoDeTexto.Texto. Seguido pulsaremos en la flecha situada en el centro del bloque de comparación de texto, y seleccionaremos el signo, mayor que.

Por último en el hueco que queda meteremos un texto vacío, y para ello iremos a bloques → integrado → texto y arrastraremos el bloque entrecomillado. Esto lo que hará es comprobar que el contenido de la CajaDeTexto no esté vacío. Una vez hecho la siguiente comprobación vamos a introducir el elemento al final de la lista, siempre que la condición anterior sea cierta, para ello vamos a bloques → integrado → listas y arrastramos el bloque añadir el elemento a la lista lista item y lo situamos a continuación del entonces del si, y lo configuramos de la siguiente manera, a continuación de lista colocaremos nuestra variable global frutas y a continuación de item colocaremos el bloque CajaDeTexto.Texto. Ahora seguido borraremos el contenido del TextBox1, para evitar que se introduzca elementos repetidos, para ello como siempre iremos a bloques → integrado → Screen1 → CajaDeTexto y arrastraremos el bloque poner CajaDeTexto.texto como y lo situaremos justo debajo del conjunto de bloques anterior, ahora seguido de este bloque colocaremos un bloque de texto vacío, al final tiene que quedar algo igual a esto.

Ahora nuestro usuario ya puede introducir elementos al final de nuestra lista, pero nos surge un problema, desconocemos qué cantidad de elementos meterá, y por consiguiente desconocemos el valor máximo de la variable que controla la posición de los índices de la lista, pero no nos preocupemos App Inventor nos da un bloque con el que sabremos la longitud total de la lista en todo momento, y por consiguiente lo utilizaremos para saber el cual sera el ultimo indice de la lista, primero lo que haremos es eliminar el cuatro que utilizábamos para saber cuando llegábamos al final de nuestra lista.

y lo sustituiremos por el bloque que nos devuelva la longitud de la lista, para ello iremos a bloques → integrado → listas y arrastraremos al hueco el siguiente bloque, longitud de la lista lista, y que le pasaremos como parámetro una lista, y para ello utilizaremos la variable donde guardamos nuestra lista, nos quedará de la siguiente manera.

Ahora si ejecutamos nuestra aplicación con nuestro método favorito, veremos que en primer lugar, si pulsamos el botón “Índice + 1” para pasar de índice, seguirá funcionando igual, pero si en el cuadro de texto metemos una nueva fruta por ejemplo “Melón”, y pulsamos al botón de añadir, al pasar por la lista de nuevo, la lista contendrá la nueva fruta.

Bueno con esto creo dar por terminado el tema de listas, creo que con lo aprendido podreis por vosotros mismos intentar investigar y utilizar todos los bloques de las listas, para mejorar la app que ya hemos realizado. Para el próximo post estoy preparando el tema de operadores y expresiones en App Inventor 2, que sin duda llegados a este punto es de vital importancia.

Bueno sin mas, como siempre desearos que sea de utilidad lo aprendido, y hasta la próxima.
Un saludo.