Vamos a ver como usar los elementos básicos de App Inventor exactamente cajas de texto, botones, listados y paneles, para ello vamos a proponer un ejercicio:
- El primero es un botón
- El siguiente es un Sceen Arrangement que sirve para poder meter cosas dentro. Nosotros vamos a introducir:
- Un texBox con un ListPicker
- Y un botón
- El siguiente es otro Sceen Arrangement . Vamos a introducir:
- Un label con un botón
- Otro label con un botón
- Los cuatros siguientes son botones
- Y el último es un label
- Quedaría algo como esto:
Ahora procederemos a la parte de AppInventor (Blocks Editor)
Empezaremos por preparar el inicio de la pantalla "Screen", vamos a "my blocks", seleccionamos el nombre
de nuestra Screen, y arrastramos al área de trabajo la opción "Initialize", que se encargará de hacer las tareas que le encarguemos cuando se inicie la aplicación
Las tareas de las que se encargará son: hacer invisibles los dos paneles, en caso de que no lo sean ya, y de crear los elementos de el listado de usuarios.Para hacer invisibles los paneles necesitaremos la opción "Set nombredeelpanel.Visible", y a ella le pondremos la opción logica "false", con esto volveremos su visibilidad "falsa" osea invisible.
Para crear los elementos del listado necesitamos de la pestaña "Built-in", en el apartado "Lists" la opción "make a list", que colocaremos en "Set nombrelistado.elements" de nuestro listado, y en los campos "item" colocaremos texto, pondremos "Admin" y "Usuario"
Con la seleccion de usuarios de la lista, la condicion es: cuando el usuario seleccionado sea "Admin" se nos abrira el panel de añadir usuario, cuando el seleccionado sea otro se nos abrira el panel de la "calculadora", para ello vamos a ir a las opciones de nuestra lista, y vamos a seleccionar "When nombrelista.Afterpicking Do" esta opcion hara lo que le digamos despues de seleccionar un usuario de la lista, dentro de este objeto colocaremos un "If Else", tiene dos ranuras para mas eventos, en "then-do" pondremos los que se deben ejecutar en caso de que la condición expuesta en "Test" se cumpla, si esta no se cumpliese se ejecutarían los que están en "else-do".
Como condición pondremos "nombrelista.Selection = Admin", si se cumple, debemos hacer que el panel de administrador sea visible, y el panel de otros no, usaremos las mismas funciones que en el paso anterior, pero pondremos "True" en la opcion de visibilidad del panel de Admin, esto lo colocamos en "then-do", en "else-do" copiaremos lo que acabamos de colocar pero cambiaremos los valores "True" y "False".
En caso de que el usuario elegido sea "Admin" el panel de creación de nuevo usuario será visible.Vamos a empeza a hacerlo.
Cuando el pulse el botón "Añadir Usuario" debemos añadir el texto que haya en la caja de texto a los elementos del listado, para ello traeremos al area de trabajo la opción "When nombredebotón.Click Do" a esta opción le adjuntamos un campo de "Built-in" del tipo "List" llamado "add items to list" en el apartado "List" colocaremos "nombredelistado.Elements" y en el campo "item" colocaremos "nombrecajatexto.Text" así al pulsar el botón el nombre de usuario escrito se añadirá a el listado, bastaría con eso pero para hacerlo mas cómodo en caso de introducir otro usuario haremos que el campo se quede vacío despues de pulsar el botón, colocaremos la opción "Set nombrecajatexto.Text" y en el hueco pondremos una pieza de "Text" vacía, así se quedará vacio, también podemos hacer que el Hint (lo que aparece en color grisáceo cuando el campo de texto está vacío) informe al usuario de que el nombre introducido ha sido añadido, para ello añadiremos debajo de la opción anterior una nueva llamada "Set nombrecajatexto.Hint" y a ella acoplaremos una pieza de "Text" en la que ponga por ejemplo "Usuario Añadido".
- En caso de que el usuario elegido no sea "Admin" se mostrará la calculadora, tiene dos cajas de texto de valor solo numérico con tres botones que ofrecen tres operaciones matemáticas a realizar con dichos números, "Mayor", "Sumar" y "Media":
- "Mayor": Para ello usaremos la opción "nombrebotónmayor.Click" a la que le adjuntaremos la opción del "Label" "Set nombrelabel.Text" a ella le acoplaremos la funcion "Math" "Call max" que nos calculara cual de los dos números es el mayor y nos lo mostrará en el "Label", como opcional podemos hacer que nos llame por nuestro nombre de usuario usando la opción concatenar "make text" que nos une en orden los textos que le vamos acoplando, ejemplo en la siguiente imagen.
"Sumar": Usaremos el mismo método que el anterior excepto que la función "Click" hará referencia al botón "Sumar" y en vez de "call max" usaremos una función de suma, como opcional podemos hacer que nos llame por nuestro nombre de usuario usando la opción concatenar "make text" que nos une en orden los textos que le vamos acoplando.
"Media": Seguimos el método de los dos anteriores, incluyendo el apartado opcional, con la excepcion de que no existe función media, sino que la crearemos colocando la función anterior de suma, dentro de una división entre dos.
Finalmente podemos añadir un cuarto botón para restablecer las cajas de texto de la "calculadora" y el "Label" del resultado, solo debemos colocar la función "Click" de el botón "Limpiar" o como lo llamemos, y que este haga "Set nombrecajasdetexto.Text" a una pieza de texto vacía, y el "Label" a una pieza de texto en la que ponga "Resultado" para que no quede vacío.
