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.

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.

VARIABLES LOCALES EN APP INVENTOR 2

Variables locales en App Inventor 2.

Las variables locales a diferencia de las variables globales en App Inventor 2, sólo son accesibles en la parte a ejecutar del bloque, es decir no se podrán consultar o darles valor fuera del mismo bloque o función. Vamos a ver un ejemplo, para ello abriremos en nuestro navegador App Inventor, después en mis proyectos seleccionaremos el proyecto que creamos para tratar el tema de las variables globales, en mi caso “leccion1”, seguido pulsaremos en bloques y una vez situados en esta pantalla nos iremos a bloques → integrados → variables y seleccionaremos el bloque “inicializar local como en”

que arrastraremos y encajaremos a continuación del bloque “cuando screen1 inicializar ejecutar”,

en el cuadro donde ahora nos pone nombre, le pondremos el nombre que queramos que tenga nuestra variable local, en mi caso yo le pondré el nombre de “MiVariableLocal”.

Ahora toca inicializarla con un valor tal como hicimos en el anterior artículo, en el que hablamos de las variables globales, y que podíamos inicializarlas con números enteros (INT), cadenas de texto (String) o con valores booleanos (True o false). En mi caso y a modo de ejemplo, lo iniciare con un valor entero, para ello iremos a bloques → integrados → matemáticas y escogeremos el cuadro que contiene en su interior un cero,

lo arrastramos y colocamos en el bloque “inicializar variable local”, justo a continuación del como, y le daré el valor de 242, vosotros podéis darle el valor que queráis.

Una vez inicializada la variable local, solamente nos falta utilizarla, y para ello utilizaremos el bloque “poner etiqueta1.Texto como”
que ya teníamos del anterior ejemplo y que arrastraremos al interior del bloque de la variable local, pues bien, si pulsamos dentro del cuadro de la variable que acompaña dicha etiqueta para seleccionar una variable, veremos que entre las variables globales ya declaradas se encuentra nuestra variable local y que podremos utilizar solamente dentro de este bloque.

Si quisiéramos utilizarlo fuera del mismo nos sería imposible y para ello podemos hacer la prueba, arrastra el bloque de la etiqueta fuera del bloque de la variable local y veras que es imposible seleccionarla porque entre el listado de variables que nos muestra el desplegable no se encuentra nuestra variable local.

También decir que una variable local se puede declarar con el mismo nombre de una variable global y ejecutar nuestra aplicación sin ningún problema.

Si nos fijamos en el bloque que declara variables locales en su esquina superior izquierda podremos observar que nos encontramos con una rueda dentada de color azul si pulsamos nos dará la opción de declarar más de una variable local arrastrando el bloque nombre dentro del bloque nombres locales.

Bueno con esto queda explicado el tratamiento de variable s locales en App Inventor 2. Cómo siempre esperando que sea de vuestra ayuda este artículo.
Un saludo.