Buenas,
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.
También le incluiremos un "Botón" para salir de la aplicación.
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 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.
