Taller 3

 Taller 3:


Antes de comenzar te invito nuevamente a revisar mi entrada anterior de como usar app inventor para que tengas los conocimientos básicos para ir a esa entrada haz AQUÍ.


Ahora a continuación realizaremos una app que tiene como función principal enlistar.

Para empezar al igual que en los talleres anteriores deberemos crear un nuevo proyecto y asignarle el nombre que nos parezca mejor:


Una vez estamos en la pantalla que se logra ver en la imagen anterior debemos desde la sección de disposición 2 disposiciones horizontales una abajo de la otra y al final una disposición vertical, esto porque aquí alojaremos los botones y cuadrados de texto para poder en listar.

Como se logra ver en la imagen anterior una vez insertadas las disposiciones una bajo de la otra no se pueden diferenciar a simple vista por ende debemos estar atentos al agregarlas ahora agregamos un botón el cual a futuro nos servirá para ver el largo de nuestra lista, además otro botón para ingresar los datos a la lista y finalmente otro para mostrar la lista, también 4 campos de textos para poner el largo de la lista, el numero en la lista del dato, el dato y finalmente la lista.

A continuación el primer botón:

Ahora el 2do botón, como dato este se le agrega una disposición tabular al lado del botón para agregar las 2 etiquetas y además el campo de texto:

y ahora el 3ro:

Ahora renombramos:


Y también renombramos los elementos en la siguiente parte de forma que sea mas fácil trabajar con bloques:

Apretamos el botón o campo de texto a renombrar y apretamos cambiar nombre:

Ponemos aceptar y listo.

Una vez terminado esto avanzamos hacia los bloques haciendo click en la esquina superior izquierda de la pantalla:


Una vez en esta seccion desde variables agregamos una de iniciar global:

Editamos el nombre y ponemos tamaño ya que esto sera el tamaño de la lista por eso mismo la lista inicialmente tendra un valor de 0 ya que no tiene posiciones.

Ahora desde la seccion Listas, agregamos un crear una lista vacia.

Ahora agregamos otro iniciar global y ponemos arreglo y a este le encajamos un bloque llamado crear lista vacia como explicamos antes.

Arreglo viene siendo una lista sin elementos tal como dice el nombre una lista vacía, antes de corregir esto debemos crear 2 procedimientos uno para obtener un dato del arreglo y otro para agregar un dato en el arreglo, el procedimiento entrega un resultado para una lista seleccionada  y obtener el elemento que está en una posición,


Para eso necesitamos el siguiente bloque:

Sin embargo debemos editar este bloque antes, en el engranaje al lado del cómo hacemos click y nos salen las siguientes opciones:

Arrastramos la entrada como se ve en la imagen y la agregamos a la derecha, cambiamos el nombre de defecto por posición:

y se ve de la manera anterior, ahora a esto debemos agregar el bloque siguiente, a este a su vez se le debe agregar el bloque 

A este debemos agregar el 

y

luego los agregamos al bloque anterior y este a su vez al anterior:

Una vez terminado lo anterior debemos agregar el siguiente bloque que se ejecutara al agregar el elemento:

agregamos dos entradas como antes


Una vez agregado esto agregamos el siguiente bloque y tomamos el global arreglo junto a posición y valor:


Ahora debemos darle funcionalidad a los botones, comenzaremos con el botón tamaño el cual designará el tamaño de la lista según el dato que ingresemos nosotrxs:

ahora agregamos el siguiente bloque:

al hacer lo anterior hacemos que el texto que pongamos en la casilla de texto vaya al global tamaño, luego conectamos el siguiente bloque para que se genere una lista:

agregamos el bloque anterior y 2 bloques con valor 1 y uno con tomar global tamaño

para que la lista aumente de 1 en 1 al agregar el tamaño es decir si ponemos 4 sea 1,2,3,4 el tamaño. Ahora agregamos desde lista el bloque de agregar elementos a la lista:

ahora lo unimos con lo anterior y posteriormente lo agregamos al bloque del botón del inicio

Ahora agregamos el llamar texto listado y la notificación para que nos aparezca el mensaje de que se creó el arreglo y el botón para aceptar esto, además de que nos aparezca el texto luego agregamos el bloque abajo del bloque anterior.

Ahora le damos funcionalidad al botón aceptar ingreso porque este nos permitirá aceptar el ingreso de los datos de la lista.

Agregamos el siguiente bloque con la posición y el dato esto para determinar la posición del dato ingresado y el dato en cuestión

agregamos los dos bloques anteriores para que se oculte el teclado y podamos seguir usando sin problemas la app además de los dos bloques siguientes para poder escribir.





Ahora unimos todo y nos deberia quedar de la siguiente forma:

Una vez terminado los bloques anteriores le daremos funcionalidad al botón de listar, para este usaremos el mismo bloque que para los botones anteriores:

Ponemos el siguiente bloque para que se oculte el teclado en esa casilla:

Ponemos el siguiente bloque para que se pueda escribir la lista generada en el campo de texto

al igual que con el botón de tamaño agregamos los siguientes bloques sin embargo ten en cuenta que el bloque amarillo en este caso cambia, sigue aumentando de 1 en 1 sin embargo ejecuta mas cosas:

ahora en en el ejecutar ponemos el siguiente bloque para que aparezca el texto del listado en la casilla de texto:

A este a su vez le anclamos el siguiente bloque 

Para poder unir los elementos necesarios aunque debemos agregar un total de 6 entradas como vimos anteriormente:


Primero agregamos el texto listado para que se ponga en esa casilla la respuesta:

Luego [  ] para que las posiciones de la lista aparezcan diferenciadas de la respuesta de la lista tomando los valores ingresados en tamaño:


Ahora agregamos los últimos dos bloques para que los datos ingresados lleguen a la casilla:

los unimos y agregamos al bloque de txt listado:

Ahora este bloque lo agregamos al boton:

y nos quedaría algo como esto, una vez terminado este bloque estará la aplicación lista, te invito a hacer click AQUÍ para descargar el archivo fuente de la app y revisarlo en caso de que la aplicación no te funcione, que tengas un buen día.


Comentarios

Entradas populares de este blog

Como crear tu primer juego usando app inventor

Aplicacion para dibujar a mano alzada

Como usar app inventor