Hoy vamos a aprender a utilizar "Textos, Operaciones de Listas y el Control Image".
Para ello vamos a crear una aplicación que tendrá estas características:
La aplicación consistirá en introducir:
- Nombre Completo (Nombre y 2 Apellidos)
- Edad (campo de texto que sólo admite números), y tiene que controlarse que sea entre 0 y 200.
- Equipo (seleccionar uno de la lista del ListPicker, entre Malaga, Barcelona, Madrid y Sevilla)
La aplicación nos devolverá:
- Nombre, Apellido 1 y Apellido 2: que será el resultado de dividir (split) el Nombre Completo. En estas cajas de texto no se podrá escribir nada.
- Escudo: que será una imagen que se cargará según el Equipo seleccionado. Hay que hacerlo de forma que al seleccionar el equipo, con el nombre que nos aparece en la lista, forme el nombre del fichero, acabado en .png. Por ejemplo, si seleccionamos Malaga, nos mostrará la imagen Malaga.png; si Barcelona, Barcelona.png, … (habrá que concatenar al nombre de la selección de ListPicker la terminación .png)
- Resultado: Cuando pulsemos sobre el botón “Mostrar y Escuchar Mensaje”, nos debe mostrar un mensaje como el siguiente:
Don/a "Apellido1" "Apellido2" "Nombre" le faltan "X" años para cumplir los 50, y usted es del equipo del "Equipo"
En el caso de que la edad sea superior a 50 años nos saldrá:
Don/a "Apellido1" "Apellido2" "Nombre" se a pasado "X" años más de los 50, y usted es del equipo del "Equipo"
Comenzamos por crear la parte gráfica de la aplicación, la cual quedará algo así:
Importante: Recordar subir las imágenes a la aplicación, y con el nombre adecuado, como se muestra a continuación. También recordar integrar un "Other Stuff", "TextToSpeech", el cual nos cantará el resultado una vez pulsado el botón "Mostrar y Escuchar Mensaje".
Una vez acabado la parte gráfica de la aplicación, pasamos a configurar el comportamiento de la misma.- Para empezar vamos a indicarle a la aplicación que debe hacer cuando se inicie.
- Para ello vamos a "My Blocks", "Screen1" y sacamos "Screen1.Initialize", donde indicaremos que debe hacer cuando inicie.
- Luego añadiremos los elementos que contendrá nuestra lista de equipos. Nos vamos a "My Blocks", "lst_equipo" y sacamos "lst_equipo.Elements" y le añadiremos el listado que incluirá. Para ello nos vamos a "Built-In", "lists" y sacamos "make a list" luego nos vamos a Built-In", "Text" y sacamos 4 "text", los renombraremos con "Madrid", "Barcelona", "Malaga" y "Sevilla".
Continuamos con el apartado del nombre, donde dividiremos el nombre completo por espacios y los colocaremos en sus respectivos recuadros.
- Para ello nos vamos a "My Blocks", "txt_nombre_completo" y sacamos "txt_nombre_completo.LostFocus", dentro indicaremos las funciones que hará al soltar el foco.
- Ahora vamos a indicarle que debe hacer si el campo "nombre" no contiene datos. Nos vamos a "Built-In", "Control" y sacamos "ifelse". A continuación nos vamos a "Built-In", "Text" y sacamos "is text empty?", y por último nos vamos a "My Blocks", "txt_nombre_completo" y sacamos "txt_nombre_completo.Text", con esto ya tendremos la condición a cumplir.
- Vamos a indicarle que hacer si cumple la condición, nos vamos a "My Blocks", "txt_nombre_completo" y sacamos "txt_nombre_complero.Hint", nos vamos a "Built-In", "Text" y sacamos "text", le añadimos como texto "Introduce tu nombre".
- Ahora vamos a añadirle el valor falso. En este caso vamos a añadir una variable la cual recogerá nuestro nombre, el cual se dividirá en líneas separadas por los espacios, de donde luego iremos sacando los nombres para añadirlos a su correspondiente campo.
- Para crear la variable nos vamos a "Built-In", "Definition" y sacamos "Variable", y la renombraremos con "lst_nombre", luego nos vamos a "Built-In", "List" y sacamos "Make a list", con esto ya tendremos nuestra variable lista.
- Pasamos a agregar la condición false, para que nuestra variable contenga los datos ya divididos nos vamos a "My Blocks", "Definitions" y sacamos "set global lst_nombre", seguidamente nos vamos a "Built-In", "Text" y sacamos "split at spaces", y por último a "My Blocks", "txt_nombre_completo" y sacamos "txt_nombre_completo.Text".
- Ahora vamos a asignarle parte del nombre a cada campo, empezaremos por el campo "nombre", nos vamos a "My Blocks", "txt_nombre" y sacamos "txt_nombre.Text", seguido nos vamos a "Built-In", "List" y sacamos "select list ítem" dentro de "list" introducimos la lista donde buscar, para ello vamos a "My Blocks", "Definitions" y sacamos "lst_nombre", y en index introducimos que parte de la lista queremos coger, en nuestro caso el "1" que sería la primera fila, nos vamos a "Built-In", "Math" y sacamos "number", le introducimos el número "1".
- Repetimos estos pasos tanto con "apellido 1" como con "apellido 2" cambiando donde se recogen los datos y que parte de la lista coger.
Pasamos a configurar el apartado de edad, donde indicaremos como debe comportarse al perder el foco.
- Para ello nos vamos a "My Blocks", "txt_edad" y sacamos "txt_edad.LostFocus", dentro indicaremos las funciones que hará al soltar el foco.
- Vamos a agregarle un "ifelse" que controlará que pasa si soltamos el foco sin escribir nada. Nos vamos a "Built-In", "Control" y sacamos "ifelse". Ahora nos vamos a "Built-In", "Text" y sacamos "is text empty?", y por último nos vamos a "My Blocks", "txt_edad" y sacamos "txt_edad.Text", con esto ya tendremos la condición a cumplir.
- Pasamos a indicarle que hacer si cumple la condición verdadera, nos vamos a "My Blocks", "txt_edad" y sacamos "txt_edad.Hint", nos vamos a "Built-In", "Text" y sacamos "text", le añadimos como texto "Introduce edad".
- Pasamos a indicarle que hacer en el caso de que no cumpla la condición. Vamos a introducirle un "if", para ello nos vamos a "Built-In", "Control" y sacamos "if", seguido nos vamos a "Built-In", "Logic" y sacamos "or". Dentro vamos a indicar si debe cumplir una u otra condición, nos vamos a "Built-In", "Math" y sacamos ">", en el espacio izquierdo agregamos la edad, para ello nos vamos a "My Blocks", "txt_edad" y sacamos "txt_edad.Text", y en el espacio derecho agregamos el número "200", nos vamos a "Built-In", "Math" y sacamos "number", le introducimos el número "200". Para la siguiente condición nos vamos a "Built-In", "Math" y sacamos "<", en el espacio izquierdo agregamos la edad, para ello nos vamos a "My Blocks", "txt_edad" y sacamos "txt_edad.Text", y en el espacio derecho agregamos el número "0", nos vamos a "Built-In", "Math" y sacamos "number", le introducimos el número "0".
- Si cumple alguna de las dos condiciones nos pondrá el campo de edad "vacío" y nos dirá "Número no válido", para ello nos vamos a "My Blocks", "txt_edad" y sacamos "txt_edad.Text", luego nos vamos a "Built-In", "Text" y sacamos "text", y le borramos el texto, lo cual nos quedará un espacio vacío " ".
- Luego nos vamos a "My Blocks", "txt_edad" y sacamos "txt_edad.Hint", nos vamos a "Built-In", "Text" y sacamos "text", le añadimos como texto "Número no válido".
El resultado final será el siguiente:
Ahora vamos a configurar el listado de equipos para indicarle que hacer cuando seleccionemos el equipo.
- Nos vamos a "My Blocks", "lst_equipo" y sacamos "lst_equipo.AfterPincking", dentro indicaremos las funciones.
- Para ello nos vamos a "My Blocks", "lst_equipo" y sacamos "lst_equipo.txt" al cual le agregaremos que nos ponga como texto lo que seleccionemos en el listado, nos vamos a "My Blocks", "lst_equipo" y sacamos "lst_equipo.Selection".
- Hecho todo esto, vamos a indicarle que cuando seleccionemos un equipo nos muestre su escudo, nos vamos a "My Blocks", "img_imagen_escudo" y sacamos "img_imagen_escudo.Picture", en ella cargaremos las imágenes correspondientes, nos vamos a "Built-In", "Text" y sacamos "make text", dentro uniremos el nombre seleccionado con la extensión ".png", para así cargar nuestra imagen, nos vamos a "My Blocks", "lst_equipo" y sacamos "lst_equipo.Text", y luego nos vamos a "Built-In", "Text" y sacamos "text", le añadimos como texto ".png".
Continuamos con el botón que nos mostrará y cantará el resultado.
- A este botón le vamos a agregar una condición de edad, si tiene menos de "50" años nos mostrará un mensaje y si tiene más nos mostrará otro.
- Para comenzar nos vamos a "My Blocks", "btn_mostrar" y sacamos "btn_mostrar.Click", dentro indicaremos las funciones que hará al presionar click en el botón.
- Luego nos vamos a "Built-In", "Control" y sacamos "ifelse".
- Pasamos a agregar la condición a cumplir, nos vamos a "Built-In", "Math" y sacamos "<", en el espacio izquierdo agregamos la edad, para ello nos vamos a "My Blocks", "txt_edad" y sacamos "txt_edad.Text", y en el espacio derecho agregamos el número "50", nos vamos a "Built-In", "Math" y sacamos "number", le introducimos el número "50".
- Pasamos a agregar que hará si cumple la condición, 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 (Se dejará a elección, en la foto final se verá un modelo de referencia).
- Pasamos a configurar que hará la aplicación en el caso de que no cumpla la condición, 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 (Se dejará a elección, en la foto final se verá un modelo de referencia).
- Ahora vamos a configurar el apartado del audio, donde nos cantará el resultado, nos vamos a "My Blocks", "TextToSpeech1" y sacamos "TextToSpeech1.Language", luego nos vamos a "Built-In", "Text" y sacamos "text", y le ponemos de texto "Español", con esto le hemos indicado que nuestro lenguaje es "español".
- Seguido nos vamos a "My Blocks", "TextToSpeech1" y sacamos "TextToSpeech1.Country", luego nos vamos a "Built-In", "Text" y sacamos "text", y le ponemos de texto "ESP", con esto le hemos indicado que somos de "España".
- Pasamos a indicarle que debe cantar, nos vamos a "My Blocks", "TextToSpeech1" y sacamos "TextToSpeech1.Speak", y luego nos vamos a "My Blocks", "lbl_resultado" y sacamos "lbl_resultado.Text".
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í:
Espero que os sea de utilidad, comenten cualquier duda y opinión.
Saludos.
0 comentarios:
Publicar un comentario