Una sola Pantalla



Hola. Buenas tardes. Esta vez haremos que nuestra App vuelva a tener una sola pantalla para hacer que gane algo de tiempo



Explicación paso a paso:

APPINVENTOR 305 UNA PANTALLA Y FUNCION

 

 

Hola. Buenas tardes.

Hoy diseñaremos una App a partir de la App anterior.

En esta ocasión, realizaremos cambios en la aplicación para no tener que utilizar una segunda Screen. Modificaremos todo para que el código se ejecute en una sola Screen. De esta forma hacemos que la aplicación vaya un poco más rápida.

Para hacer esto aprenderemos a utilizar las funciones...

Vamos de nuevo a: http://appinventor.mit.edu

Abrimos nuestro anterior proyecto. Lo guardamos como copia:

 

También debemos cambiar el nombre de la aplicación:

En primer lugar, hacemos invisibles las dos tablas:

 

 

Después, añadimos un objeto imagen y le ponemos las siguientes propiedades:

 

También añadimos un objeto Sound:

 

Y un objeto Clock con estas propiedades:

 

Vamos a la programación:

Así estaba la última vez:

 

Ahora, para hacer la prueba, modificaremos el botón A. le cambiaremos todo el código por esto:

 

También añadiremos este código en el Clock:

Fijaros que, en este caso, el "if" que controla si la pantalla está vertical u horizontal está correctamente, no como en el objeto "Screen1.screenOrientationChanged" que está al revés, como ya explicamos.

Probaremos el nuevo código para ver si el botón A funciona, y en lugar de ir a una pantalla nueva, abre la imagen en el mismo Screen1

 

Comprobamos que funciona...

Ahora tenemos que REPETIR ESTE CÓDIGO PARA CADA UNO DE LOS 27 BOTONES TIPO "A" Y LOS 27 BOTONES TIPO "A_"

O...

Utilizar un objeto nuevo "Función"

Que es una función? Es un objeto, como (podría ser un botón) que se ejecuta cuando se la llama desde otro objeto.

Nos dirigimos a "Procedures" y seleccionamos la primera sentencia:

 

 

Le cambiaremos el nombre por: "funcionHazLoQueDigo"

Ahora movemos todo el código que hay dentro del botón "A"

 

Y llamamos a la función desde el botón:

 

Compilaremos para probar que funciona:

 

Solucionado el problema para el Botón "A" y el "A_" pero, cómo lo solucionamos para el resto?

Necesitamos pasarle un parámetro que indique que botón el es que llama a la función y, por tanto, que imagen y sonido debemos utilizar.

Para habilitar un parámetro, presionamos el punto azulque encontramos en el objeto "Procedure" y arrastramos el "Input X" que aparece al interior de "Imputs"
 

 

Quedará de la siguiente manera:

En la función, aparecerá un parámetro "x" que tendremos que pasarle y que utilizará el código que contiene.

En el botón "A" cuando llamemos a la función, le podremos pasar un parámetro en forma de texto.

El parámetro que pasaremos desde el botón será la letra que queremos mostrar "A"

Ahora nos dirigimos al grupo de sentencias "Variables" para indicar como recoger el parámetro a la función:

 

Arrastramos el "get Variable" hasta el interior de la función. Sustituyendo allá donde antes había el texto "A"

Le indicaremos a la variable que, en realidad debe tomar el valor del parámetro "x" pasado al llamar a la función:

Quedará así:

Eliminamos los textos "A" y compilamos para probar:

 

Una vez comprobado deberemos hacer lo mismo con todos los botones. Es importante ir cambiando el parámetro según la letra que queramos:

 

Igual con todos los demás:

 

Después vamos al Screen2 y lo eliminamos con el botón "Remove Screen":

Compilamos...
 

Instalamos en el móvil y ya lo tenemos...

...Y esto es todo por hoy. Espero que os haya gustado.

Un saludo y, hasta la próxima...