Hoy vamos a aprender a utilizar Label, TextBox, Botones, Listas, Paneles y sentencias IF.
Nos basaremos en una aplicación donde según nuestro usuario, haremos una determinada tarea.
La aplicación se divide en 2 Paneles (Arrangment), uno para añadir usuarios (ph_admin) y otro para realizar operaciones (pv_otros), que se cargará (visualizará) uno u otro dependiendo del usuario seleccionado en Lista de Usuarios (que inicialmente estará compuesta por "Admin" y "Usuario").
- Si el usuario seleccionado es "Admin", nos mostrará el panel "ph_admin" (el otro quedará invisible) que nos permitirá añadir un nuevo usuario a la Lista de Usuarios. Dicha lista tendrá que aparecer actualizada la próxima vez que se clickee en ella.
- Si el usuario seleccionado es distinto a "Admin", nos mostrará el panel "pv_otros" (el "ph_admin" quedará invisible) que nos pedirá 2 números y nos devolverá el mayor o la suma o la media, según se seleccione. Concretamente, nos debe mostrar una frase, en el control "lbl_resultado", como la siguiente:
"NombreUsuario", el/la "FuncionSeleccionada" es "Resultado".
Donde:
- NombreUsuario: Es el nombre que hemos seleccionado en el "ListPicker".
- FuncionSeleccionada: Será mayor, suma o media según el botón seleccionado.
- Resultado: Será el número resultante de la operación seleccionada.
Comenzamos por crear la parte gráfica de la aplicación.
Seleccionamos "Screen1" y marcamos "AlignHorizontal", "Right", para mantener todo alineado a la derecha, con ello lograremos que el "botón final" para salir quede perfectamente alineado a la derecha.
Todos los "ScreenArrangement" que vayamos introduciendo le iremos indicando que centre el contenido, "AlignHorizontal", "Center", y que ocupe todo el espacio de pantalla, "Width", "Fill parent".
Pasamos a utilizar los siguientes componentes y en el siguiente orden:
El componente "pv_espacio" es un "ScreenArrangement Vertical" con un "Height" de "20 pixels", con ello lograremos separar el botón final en una cantidad de "20 pixels".
El resultado final será el siguiente:
Una vez hecho todo esto, pasamos a crear la estructura de la aplicación, donde explicaremos como funcionan todos los componentes introducidos y como interactúan entre ellos.
- Para empezar vamos a indicarle a la aplicación que debe hacer cuando se inicie.
- Para ello vamos a "My Blocks", "Screen1" y sacamos "Screen2.Initialize", donde indicaremos que debe hacer cuando inicie.
- Para ello vamos a "My Blocks", "ph_admin" y sacamos "ph_admin.Visible" al cual le introduciremos el valor "False". Ahora nos vamos a "My Blocks", "pv_otros" y sacamos "pv_otros.Visible" también le introduciremos el valor "False". con esto indicaremos que los dos "ScreenArrangement" inicien ocultos.
- Por último añadiremos los elementos que contendrá nuestra lista de usuarios. Nos vamos a "My Blocks", "lst_usuarios" y sacamos "lst_usuarios.Elements" y le añadiremos el listado que incluirá, nos vamos a "Built-In", "lists" y sacamos "make a list" luego nos vamos a Built-In", "Text" y sacamos 2 "text", en uno pondremos "Admin" y en el otro "Usuario".
Ahora vamos a agregar la función al listado, qué hará cuando pulsemos y después de seleccionar el usuario de la lista.
- Nos vamos a "My Blocks", "lst_usuarios" y sacamos "lst_usuarios.AfterPincking", dentro indicaremos las funciones.
- Para ello nos vamos a "My Blocks", "lst_usuarios" y sacamos "lst_usuarios.txt" al cual le agregaremos que nos ponga como texto lo que seleccionemos en el listado, nos vamos a "My Blocks", "lst_usuarios" y sacamos "lst_usuarios.Selection".
- Ahora pasamos a indicarle la condición a seguir, nos vamos a "My Blocks", "Control" y sacamos "ifelse" donde introduciremos las condiciones.
- Vamos a indicarle que condición mirar. Nos vamos a "Built-In", "Math" y sacamos "=", lo introducimos en "test", ahora nos vamos a "Built-In", "lists" y sacamos "lst_usuarios.Selection" y lo introducimos en el primer espacio, luego nos vamos a "Built-In", "Text" y sacamos "text", al cual le añadiremos como nombre "Admin" y lo introduciremos en el segundo espacio, con esto le indicaremos que si seleccionamos "Admin" nos haga una función, que será:
- Nos mostrará el apartado para introducir usuarios.
- Nos ocultará la calculadora.
- Nos vamos a "My Blocks", "ph_admin" y sacamos "ph_admin.Visible" al cual le introduciremos el valor "True", ahora nos vamos a "My Blocks", "pv_otros" y sacamos "pv_otros.Visible" al cual le introduciremos el valor "False", los introducimos en "then-do".
- Pasamos a introducir que hará si no cumple la condición, nos vamos a "My Blocks", "ph_admin" y sacamos "ph_admin.Visible" al cual le introduciremos el valor "False", ahora nos vamos a "My Blocks", "pv_otros" y sacamos "pv_otros.Visible" al cual le introduciremos el valor "True", los introducimos en "else-do".
El resultado final será el siguiente:
Pasamos a configurar el botón para añadir usuarios, y las condiciones que debe cumplir.
- Para ello nos vamos a "My Blocks", "btn_añadir" y sacamos "btn_añadir.Click", dentro indicaremos las funciones que hará al presionar click en el botón.
- Pasamos a introducir un control "ifelse" que tendrá unas condiciones en su interior. Para ello nos vamos a "My Blocks", "Control" y sacamos "ifelse"
- Ahora vamos a introducirle la condición que llevará, nos vamos a "Built-In", "Text" y sacamos "is text empty?", que mirará si no tiene texto, vamos a indicarle donde buscar, para ellos nos vamos a "My Blocks", "txt_introduce_usuario" y sacamos "txt_introduce_usuario.Text".
- Ahora vamos a indicarle que hacer si cumple la condición, nos vamos a "My Blocks", "txt_introduce_usuario" y sacamos "txt_introduce_usuario.Hint" y le añadimos el texto a mostrar, nos vamos a Built-In", "Text" y sacamos 2 "text", y le ponemos como texto "Introduce Usuario". Con esto indicaremos que si cumple la condición nos muestre el mensaje indicado.
- Ahora pasamos a ponerle que hacer en el caso de que no cumpla la condición. Para ello nos vamos a "Built-In", "lists" y sacamos "add ítems to list".
- Le añadimos en list: "My Blocks", "lst_usuarios y sacamos "lst_usuarios.Elements"
- Y en ítem: "My Blocks", "txt_introduce_usuario" y sacamos "txt_introduce_usuario.Text". Con esto nos añadirá el usuario a nuestra lista.
- Ahora le añadiremos un texto que nos indicará que se ha añadido el usuario y limpiaremos el cuadro de texto para continuar añadiendo usuarios.
- Nos vamos a "My Blocks", "txt_introduce_usuario" y sacamos "txt_introduce_usuario.Hint", nos vamos a "Built-In", "Text" y sacamos "text", le añadimos como texto "Usuario Añadido".
- Ahora nos vamos a "My Blocks", "txt_introduce_usuario" y sacamos "txt_introduce_usuario.Text", nos vamos a "Built-In", "Text" y sacamos "text", le añadimos como texto un espacio vacío " ".
El resultado final será el siguiente:
Pasamos a configurar los botones "mayor, suma, media y limpiar" que nos realizará el cálculo indicado, o en su caso nos limpiará todo para empezar de cero.
Mayor:
- Nos vamos a "My Blocks", "btn_mayor" y sacamos "btn_mayor.Click", dentro indicaremos las funciones que hará al presionar click en el botón.
- Al hacer click sobre el botón nos mostrará el resultado del cálculo con un mensaje, donde indicará el "nombre del usuario, la función realizada y el resultado de dicho cálculo".
- Nos vamos a "My Blocks", "lbl_resultado" y sacamos "lbl_resultado.Text", luego nos vamos a "Built-In", "Text" y sacamos "make text", y por último le vamos añadiendo las partes del texto.
- Nos vamos a "Built-In", "lists" y sacamos "lst_usuarios.Selection" y lo añadimos en el primer espacio, luego nos vamos a "Built-In", "Text" y sacamos "text", le añadimos como texto ", el mayor es ", y lo introducimos en el segundo espacio, por último añadimos el resultado, para ello nos vamos a "Built-In", "Math" y sacamos "max", dentro introducimos los dos "txt" que contienen los números, nos vamos a "My Blocks", "txt_n1" y sacamos "txt_n1.Text", luego nos vamos a "My Blocks", "txt_n2" y sacamos "txt_n2.Text"
El resultado final será el siguiente:
Suma:
- Nos vamos a "My Blocks", "btn_suma" y sacamos "btn_suma.Click", dentro indicaremos las funciones que hará al presionar click en el botón.
- Al hacer click sobre el botón nos mostrará el resultado del cálculo con un mensaje, donde indicará el "nombre del usuario, la función realizada y el resultado de dicho cálculo".
- Nos vamos a "My Blocks", "lbl_resultado" y sacamos "lbl_resultado.Text", luego nos vamos a "Built-In", "Text" y sacamos "make text", y por último le vamos añadiendo las partes del texto.
- Nos vamos a "Built-In", "lists" y sacamos "lst_usuarios.Selection" y lo añadimos en el primer espacio, luego nos vamos a "Built-In", "Text" y sacamos "text", le añadimos como texto ", la suma es ", y lo introducimos en el segundo espacio, por último añadimos el resultado, para ello nos vamos a "Built-In", "Math" y sacamos "+", dentro introducimos los dos "txt" que contienen los números, nos vamos a "My Blocks", "txt_n1" y sacamos "txt_n1.Text", luego nos vamos a "My Blocks", "txt_n2" y sacamos "txt_n2.Text"
El resultado final será el siguiente:
Media:
- Nos vamos a "My Blocks", "btn_media" y sacamos "btn_media.Click", dentro indicaremos las funciones que hará al presionar click en el botón.
- Al hacer click sobre el botón nos mostrará el resultado del cálculo con un mensaje, donde indicará el "nombre del usuario, la función realizada y el resultado de dicho cálculo".
- Nos vamos a "My Blocks", "lbl_resultado" y sacamos "lbl_resultado.Text", luego nos vamos a "Built-In", "Text" y sacamos "make text", y por último le vamos añadiendo las partes del texto.
- Nos vamos a "Built-In", "lists" y sacamos "lst_usuarios.Selection" y lo añadimos en el primer espacio, luego nos vamos a "Built-In", "Text" y sacamos "text", le añadimos como texto ", la media es ", y lo introducimos en el segundo espacio, por último añadimos el resultado, para ello nos vamos a "Built-In", "Math" y sacamos "/", dentro del primer espacio introducimos, "Built-In", "Math" y sacamos "+", dentro introducimos los dos "txt" que contienen los números, nos vamos a "My Blocks", "txt_n1" y sacamos "txt_n1.Text", luego nos vamos a "My Blocks", "txt_n2" y sacamos "txt_n2.Text". En el segundo espacio del signo "/" introducimos, "Built-In", "Math" y sacamos "number", le introducimos el número "2".
El resultado final será el siguiente:
Limpiar:
- Nos vamos a "My Blocks", "btn_limpiar" y sacamos "btn_limpiar.Click", dentro indicaremos las funciones que hará al presionar click en el botón.
- Al hacer click sobre el botón nos limpiará los cuadros de texto "txt_n1.Text" y "txt_n2.Text", también el "lbl_resultado.Text".
- Nos vamos a "My Blocks", "txt_n1" y sacamos "set txt_n1.Text", luego nos vamos a "Built-In", "Text" y sacamos "text", le añadimos como texto un espacio vacío " ".
- Después nos vamos a "My Blocks", "txt_n2" y sacamos "set txt_n2.Text", luego nos vamos a "Built-In", "Text" y sacamos "text", le añadimos como texto un espacio vacío " ".
- Por último nos vamos a "My Blocks", "lbl_resultado" y sacamos "lbl_resultado.Text", luego nos vamos a "Built-In", "Text" y sacamos "text", le añadimos como texto "Resultado".
El resultado final será el siguiente:
Por último en la aplicación, le vamos a añadir un "botón" para salir de la aplicación.
- Nos vamos a "My Blocks", "btn_salir" y sacamos "btn_salir.Click", dentro indicaremos la función para salir de la aplicación.
- Nos vamos a "My Blocks", "Control" y sacamos "close application".
El resultado final será el siguiente:
El resultado final de nuestra aplicación debería quedar algo así:
Otro Usuario Admin
Espero que os sea de utilidad, comenten cualquier duda y opinión.
Saludos.
Muy buena entrada, perfectamente estructurada y esplicada.
ResponderEliminarMe apunto el botón de Cerrar Aplicación que nunca lo pongo.
Gracias Sebastián, me alegro que te guste.
ResponderEliminarSaludos ;)
hola jose angel, muy buenas app has realizado felicitaciones, mira tengo una pregunta e estado usando el tinyDB y quisiera saber como puedo dejar guardada una lista de elementos en el listpicker para que cuando me salga de la app y entre siga ahi, porque siempre que la cierro se borran los datos agregados a la lista. gracias
ResponderEliminarBuenas Totovzla,
ResponderEliminarAntes de nada muchas gracias por tu comentario, me alegra que te haya gustado.
Si te he entendido bien, ya sabes usar el “TinyDB” y tu problema viene a la hora de querer recoger los datos en el “ListPicker” una vez iniciada la aplicación. En ese caso debes sacar el control “Screen1.Initialize”, y dentro introducirle la pieza “ListPicker1.Elements” y le encajas la pieza “TiniDB1.GetValue”. Con ello conseguirás que al iniciar la aplicación recoja los datos que tienes guardado en el “TinyDB”.
Espero haberte ayudado, si tienes algún problema no dudes en comentármelo.
Saludos
gracias jose angel, si resulto, ahora estoy trabajando un poco con el tinywebdb si surgen dudas te contacto.
ResponderEliminarBuenas jose angel yo de nuevo ! tengo otra duda e estado trabajando con el TinyWebDB y tengo el mismo problema que con el tinydb, al salir de la aplicacion y volver a entrar se borran los datos del ListPicker y e estado intentando hacer lo mismo con el Screen1.Initialize pero nada no doy! si sabes como hacerlo te lo agradeceria!
ResponderEliminarBuenas totovla, me gustaria saber si aún tienes ese problema para ver si te puedo ayudar.
ResponderEliminarsi sebastian todavia lo tengo agradeceria toda la ayuda posible gracias
ResponderEliminarDe acuerdo, necesito que me des mas detalles para saber cual es el error, aqui te dejo unas posibles causas:
ResponderEliminar-Tienes que usar una web para almacenar los datos, se establece con el componente "ServiceURL" comprueba que tienes la siguiente dirección "http://appinvtinywebdb.appspot.com/"
-Si la dirección es esa debes saber que solo admite "/storevalue" y "/getvalue"
-Esta dirección parece que tiene posibilidades de no estar disponible en cualquier momento sin aviso previo, te recomiendo que lo pruebes a diferentes horas o días
-Por último si siguiese sin funcionar buscare otras direcciones que permitan "/storevalue" y "/getvalue"
excelente explicacion jose y disuclpa quisiera saber como hago para que las lista no se borren al volver a iniciar la app
ResponderEliminarHola buenas tardes quisiera saber como hacer si en un textbox quiero que lo que salga escrito se ajuste al ancho definido
ResponderEliminaren el text box, puesto que al escribir en el mismo me sale todo en una misma linea.
Hola amigos me echan una manito como le hago para sumar los valores de una ListView1 en app inventor 2
ResponderEliminarejemplo:
200
300
100
en una etiqueta ese resultado.
LaListView1 toma los datos de una Tiny BD
Hola amigos me echan una manito como le hago para sumar los valores de una ListView1 en app inventor 2
ResponderEliminarejemplo:
200
300
100
en una etiqueta ese resultado.
LaListView1 toma los datos de una Tiny BD
Buenas noches disculpa, ¿como muevo el botón de salir a esquina?
ResponderEliminarCASINO CROSS BAYS - WINDOWS - MapyRO
ResponderEliminarCASINO 강릉 출장샵 CROSS BAYS. 광양 출장안마 Mapyro: 안성 출장안마 Search for casinos in WINDOWS. Find addresses, 청주 출장마사지 see restaurants, see similar restaurants, and find contact 안산 출장마사지 information.