jueves, 11 de abril de 2013
Hoy vamos a ver como usar los elementos básicos de AppInventor, exactamente cajas de texto, botones, listados y paneles, para ello vamos a proponer un ejercicio:
- Para empezar crearemos un listado en el que por defecto vendrán dos valores, en este caso usaremos nombres de usuario, por ejemplo "Admin" y "Usuario".
- Vamos a crear dos "Paneles" (Screen Arragement) los dos en estado invisible (Hidden) haremos que uno de las dos (Primer panel) se haga visible al seleccionar el usuario "Admin" de el listado, el otro (Segundo panel) se hara visible con cualquier otro usuario.
- Primer panel: En este panel incluiremos como mínimo dos elementos, una caja de texto (TextBox) y un botón (Button), cuando tengamos la aplicación, en la caja de texto introduciremos un nombre de usuario y pulsaremos el botón para añadirlo a la lista.
- Segundo panel: En este panel incluiremos 6 elementos: dos cajas de texto en las que insertaremos números, un campo no modificable por el usuario (Label) para mostrar el resultado de la operación seleccionada y tres botones desde los cuales seleccionaremos una de las tres operaciones siguientes: Mayor (cual de los números es mayor), Sumar (la suma de los números) y Media (la media de los números).
A continuación mostraré la forma en la que lo he estructurado, he añadido varios objetos adicionales bien para añadir alguna función que he considerado necesaria o bién para lograr una mejor presentación ante un posible usuario final.
También en el panel de la "calculadora" he añadido varios paneles internos para lograr una mejor estructura.
También he añadido varias label al lado de las cajas de texto para aclarar que hay que introducir en ellas.
Por último he añadido un botón a la "calculadora" que se encargará de reestablecer las cajas de texto y el label del resultado, botón "Limpiar".
Los elementos que he añadido son opcionales pero mejoran la funcionalidad y la presentación
Ahora procederemos a la parte de programación de AppInventor (Blocks Editor)
- Empezaremos por preparar el inicio de la pantalla "Screen", vamos a "my blocks", seleccionamos el nombre de nuestra Screen, en mi caso "Screen1" 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 (When Screen1.Initialize Do "Tareas")
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 adjuntaremos 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, como dije antes ibamos a crear una lista de usuarios, como mínimo dos, "Admin" y "Usuario" son los que he creado yo:
- Vamos a proceder 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 justo 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 intercambiaremos los valores "True" y "False".
Como extra, antes de el "If Else" podemos poner una función con la cual el nombre del usuario seleccionado aparezca como texto en el listado, para ello cogeremos la opción "Set nombrelista.Text to" y a ella le conectaremos la opción "nombrelista.Selection".
- En caso de que el usuario elegido sea "Admin" el panel de creación de nuevo usuario será visible, vamos a proceder a programarlo.
Cuando el usuario 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".
Como extra podemos añadir un "If Else" que compruebe que la caja de texto tiene texto, ya que si está vacía el programa dará error, para ello todo lo anterior lo colocaremos en la parte "Else-do" y en "Then-do" adjuntaremos la opción "Set nombrecajatexto.Hint" con una pieza de texto en la que ponga por ejemplo "Introduce un nombre", como condición del "If Else" adjuntaremos una opción del apartado "Text" de la pestaña "Built-in" llamada "is text empty?" a ella adjuntaremos la pieza "nombrecajatexto.Text" esto hará la comprobación de si está la caja de texto vacía, si así fuese daría "True" y se ejecutaría el "Then-do" que avisaría al usuario de que no ha introducido nada, si tiene datos, los añadiría al listado.
- 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.
Espero que sea de ayuda, nos vemos en la próxima entrada.
Buena explicación, me a resultado muy útil en la realización de mi entrada.
Tienes mi recomendación ;)
Me alegro que te haya servido de ayuda .
Gracias Jose :)