App Inventor, mi primera aplicación. Explicación Ifelse

Vamos a crear una aplicación simple para empezar.

Muestro el screen de como tiene que quedar, y vemos los pasos seguidos y como se ha ido desarrollando la aplicación.

Las instrucciones del screen son...

• Un Label con el mensaje "Hola ciclo"
• Un Boton que al pulsarlo:

Si al texto de abajo se le introduce la palabra "admin"

   Entonces mostrará el "Label" visto antes de color rojo.

     Si no el "Label" lo mostrará en azul.

• Textbox (cajetin para introducir texto).

    

Como hemos hecho el diseño?

Para empezar vamos utilizar de la "palette", "Basic".

1. Vamos a pinchar "Label" y lo arrastramos al "screen"
2. Pinchamos y arrastramos "Button" para insertar el botón.
3. Pinchamos de nuevo un "Label" y lo arrastramos al screen.
4. Por último pinchamos y arrastramos "Textbox".

• Lo siguiente que haremos es cambiarle el nombre a los componentes de "components", es el panel que tenemos a la derecha, lo haremos haciendo click derecho en cada uno de ellos y dandole un rename.

El motivo de cambiarle el nombre es simplemente para no confundirnos cuando estemos dentro del editor de bloques.

Los nombres que pondremos son:

1. Para "Label" pondremos "lbl" como prefijo para identificarlo, seguidamente "holaciclo" que es el texto que aparece en el diseño.
2. Para "Button" pondremos "btn", como prefijo para identificarlo, seguidamente "mensajeciclo" para identificar el botón en caso de que tuvieramos varios.
3. Para el siguiente "Label" el prefijo "lbl"(esto nunca cambiará ya..), seguidamente "mensajeciclo", para identificarlo.
4. Por último, para el "Textbox" el prefijo asignado será "txt", seguidamente pondremos por ejemplo, texto.

Como hemos conseguido centrar el diseño? como hemos puesto texto a los componente del screen?

Esta es la barra que esta a la derecha del taller, la barra de formato por así decirlo.

Podemos ir marcando las cajas introducidas en el screen en "components", por ejmplo. Una vez seleccionado un Label por ejemplo podemos entre otras cosas:

• Cambiar la fuente
• Cambiar el tamaño a la fuente
• Centrar la caja
• Ponerle color de fondo predeterminado
• En "text" va el texto que será visible en el screen.

Una vez terminado el diseño básico vamos a proceder al editor de bloques.

Recordamos como se entra en el editor de bloques.

Y descargamos para que se abra el editor.

Una vez abierto el editor, vamos a proceder a "encajar las piezas"

En "My blocks" controlamos los elementos que insertamos en la palette.

Como veis nos aparecen los lbl creados, el boton y el text.

• Veis como hemos clicado en "btnmensajeciclo" y nos aparecen los bloques que nos permiten configurar el botón.

Nosotros arrastraremos "btnmensajeciclo.Click"
Con esto conseguiremos que haga "algo" cuando le demos al botón


Recordamos que al darle al botón queremos que:

Si al texto de abajo se le introduce la palabra "admin"

   Entonces mostrará el "Label" visto antes de color rojo.

     Si no el "Label" lo mostrará en azul.

¿Como conseguimos que.. Si cumple una condición haga algo y Si no que haga otra cosa..?

Esto lo haremos con IF ELSE   

IF ELSE lo podemos encontrar en:

Control/ If else..













Así iría quedando nuestro editor de bloques..

Vamos a proceder a ponerle la condición al "if else" y lo que hará tanto si se cumple como si no..

En la condición decimos que:
Ifelse Si el texto introducido ("upcase" para pasar a mayúsculas) es igual a "admin"("upcase" para pasar a mayúsculas)
Entonces:
Then-do el "lblmensajeholaciclo.BackgroundColor" será rojo.



Si no cumple:
Else-do el "lblmensajeholaciclo.BackgroundColor" será azul.

Asi quedaria la actividad:

Abramos el Emulador para comprobar resultados.

Vemos como al pulsar el botón, como nuestro texto no es "admin", el fondo del color de hola ciclo es azul.





















Aquí comprobamos como tenemos en el texto "admin" y efectivamente el fondo del color hola ciclo es rojo.