USO

DE VARIAS
PANTALLAS EN

APPINVENTOR

ndice
1. USO DE VARIAS PANTALLAS EN APP INVENTOR .................................................................................................. 3

Edicin: 1

Pgina 2

Uso de varias pantallas en AppInventor

1. Uso de varias pantallas en App Inventor

Vamos a explicar como se crean aplicaciones con mltiples pantallas en Android. La mayor parte de las
aplicaciones en Android se componen de varias pantallas, por esa razn vamos a ver cual es el proceso a
seguir en AppInventor.
Para ello, vamos a crear un proyecto nuevo, al que llamaremos por ejemplo, pantallas.
Como vimos en el reto anterior, en el men principal de AppInventor, justo encima de viewer tenemos un
botn llamado Add Screen y junto a ste, otro llamado Remove Screen. Estos dos botones son los
necesarios para crear y eliminar pantallas en AppInventor.
Vamos a crear una pantalla nueva, para ello, pulsamos el botn Add Screen, introducimos el nombre que
queramos y pulsamos el botn ok. Como podemos ver, en viewer, tenemos una nueva pestaa con el
nombre que introdujimos previamente.

Cada pantalla es totalmente independiente de la anterior, desde la Web para crear la interfaz hasta el
Editor de Bloques. Para comprobarlo, vamos a poner un botn en la primera pantalla... para ello, pulsamos
la pestaa Screen1 y arrastramos un botn de la paleta a la primera pantalla.

Edicin: 1

Pgina 3

Uso de varias pantallas en AppInventor

Si pulsamos la pestaa Screen2, podemos comprobar tanto el viewer como la seccin components est
vaca, ya que el botn lo hemos aadido a la pantalla Screen1 y no a la pantalla Screen2.

Con la pestaa Screen1 seleccionada abrimos el Editor de Bloques, y vemos, que al pulsar la pestaa My
Blocks el Editor de Bloques muestra el componente del botn que hemos aadido.

Edicin: 1

Pgina 4

Uso de varias pantallas en AppInventor

Ahora volvemos a la web de AppInventor y pulsamos la pestaa Screen2, regresamos al Editor de Bloques y
al pulsar la pestaa My Blocks, vemos que el Editor de Bloques est vaco.

Con esto, puedes comprobar que tanto la interfaz, como los bloques del Editor de Bloques, son totalmente
independientes, dependen de cada pantalla.

Edicin: 1

Pgina 5

Uso de varias pantallas en AppInventor


Ahora vas a abrir el emulador y a conectarlo con AppInventor como hemos hecho en el reto anterior... Una
vez arrancado, tienes la aplicacin lanzada en el emulador, y puedes ver la pantalla Screen1 en l.

Si en la web de AppInventor seleccionas la pestaa Screen2, comprobars que el emulador se comporta de
la misma forma que el Editor de Bloques, cambiando la pantalla que se muestra en l a Screen2.

Edicin: 1

Pgina 6

Uso de varias pantallas en AppInventor

La navegacin entre ventanas se hace igual que en el reto anterior.
Previamente has aadido un botn a la pantalla Screen1. Ahora hars que al pulsar ese botn, la pantalla
del emulador cambie de Screen1 a Screen2. Para conseguirlo selecciona en el Editor de Bloque el botn y
arrastra el bloque when Button1.Click do.
A continuacin rellena el hueco con el bloque adecuado. En este caso, es alguno que permita abrir nuevas
ventanas. Dirgete a la pestaa Built-In y pulsa Control. Podrs localizar el siguiente bloque open another
screen with start value (abrir otra pantalla con valor de inicio), ste es el que debes arrastrar.
Como puedes apreciar, a este bloque, hay que aadirle otro bloque ms que contenga el nombre de la
pantalla que queremos abrir. Para conseguirlo, pulsa Text, y arrastra el bloque llamado text. Por ltimo,
cambia el nombre text por el nombre de la pantalla que quieres abrir, en este caso Screen2.

Edicin: 1

Pgina 7

Uso de varias pantallas en AppInventor

Con esto ya est terminada toda la lgica necesaria para hacer que la aplicacin pase de la primera pantalla
a la segunda.
Para probar que su funcionamiento, dirgete a la Web de AppInventor, (asegurate de tener seleccionada la
pantalla Screen1) y pulsa el botn del emulador.

2. Creacin de pantalla de inicio.

La mayora de las aplicaciones que utilizamos en mviles, cuando las abrimos, nos muestran una
pantalla de bienvenida, de carga, o simplemente con el logotipo de la empresa, la utilizacin de esas
imgenes es visualmente atractiva, y le aporta un plus de calidad a nuestra aplicacin... esta pantalla se
llama Splash Screen. AppInventor sin embargo, no ofrece esta posibilidad como tal.
Para crear una pantalla Splash en AppInventor, lo que debemos hacer en AppInventor, es crear una
pantalla normal, que pasado un tiempo que nosotros definamos, cambie a otra pantalla, la de la aplicacin.
Es decir, necesitamos tener dos pantallas igual que en ejercicios anteriores, slo que en lugar de hacer la
transicin de una a otra a travs de la pulsacin de un botn se har cuando pase determinado tiempo.
Para entender el funcionamiento, nos vamos a crear un proyecto nuevo en AppInventor, y lo llamamos por
ejemplo Splash.
Lo que vamos a hacer ahora es poner en la pantalla, algo que diferencie a nuestro Splash de la pantalla
principal de la aplicacin. Arrastramos un Label de la paleta de componentes, y ponemos el texto que
queramos... en este caso, HOLA!

Edicin: 1

Pgina 8

Uso de varias pantallas en AppInventor

Ahora creamos una pantalla nueva igual que en el reto anterior, pulsando en el botn add screen del
men principal de la web de AppInventor.
Para hacer que la pantalla Splash, en este caso Screen1 sea una Splash, lo que debemos hacer es arrastrar
un componente que nos va a servir de temporizador para cambiar a la ventana de la aplicacin.... pulsamos
en la pestaa Screen1 y en la paleta "Sensors", podemos ver un componente llamado clock, ese es el que
vamos a necesitar, ya que adems de oferecernos la posibilidad de saber la fecha, nos hace de
temporizador.
Arrastramos ese componente a nuestro viewer, y vemos que se nos coloca debajo de la pantalla del
Viewer, porque como otros componentes que ya hemos visto, es no-visible.
Seleccionamos el componente, y en la seccin properties, vemos un apartado llamado Time Interval... en
ese apartado es donde deberemos decir, cuanto tiempo vamos a querer estar viendo la pantalla splash,
introducimos 3000, las unidades son milisegundos, por tanto, esa cantidad se corresponde con 3 segundos.
Por ltimo, debemos cambiar una cosa ms del componente Clock, en properties, vemos que la opcin
TimerAlwaysFires est seleccionada, debemos deseleccionarla, ya que eso va a hacer que el temporizador
est continuamente ejecutndose, y lo que nos interesa es que el temporizador funcione slo una vez.

Edicin: 1

Pgina 9

Uso de varias pantallas en AppInventor

Ahora debemos abrir el editor de bloques para configurar el cambio de una pantalla a otra.
Pulsamos el botn open blocks editor. En el editor de bloques, lo que debemos hacer es configurar lo que
pasa cuando el reloj llega a 3 segundos, en este caso pasar a otra ventana.
Para ello, pulsamos en la pestaa Blocks y seleccionamos Clock1 nuestro reloj... si miramos los bloques
que tenemos disponibles, vemos uno que pone Clock1.Timer, es decir temporizador, ese bloque es el que
nos interesa, ya que es el que se ejecutar cuando el temporizador llegue a los 3000 milisegundos que
hemos definido.
Arrastramos ese bloque a nuestro lienzo.

Edicin: 1

Uso de varias pantallas en AppInventor

Pgina 10

Lo que debemos hacer ahora es rellenar ese bloque con un bloque que nos permita abrir una nueva
ventana, para ello, igual que hicimos en retos anteriores, lo que debemos hacer es, en la pestaa Built-In
pulsamos en Control y buscamos el bloque Open another Screen... arrastramos ese bloque al hueco del
bloque del reloj... a este bloque le debemos meter un bloque de texto con el nombre de la pantalla a la que
queremos ir, exactamente igual que en el reto 2, pulsamos nuevamente en la pestaa Built-In,
seleccionamos Text y arrastramos el bloque Text a nuestro puzzle.
Cuando ya lo tenemos, debemos cambiar el texto Text por el nombre de la pantalla a la que queremos ir,
en este caso Screen2.

Edicin: 1

Uso de varias pantallas en AppInventor

Pgina 11


De esta forma, cuando el reloj llegue a 3 segundos, automticamente, cambiar la pantalla de presentacin
o Splash por la siguiente pantalla.
Sin embargo, esta aplicacin tiene un problema, y es que cuando estemos en la ventana de la aplicacin, si
pulsamos el botn atrs del telfono, nos volver a la pantalla de Splash, para evitar esto, lo que debemos
hacer, es que adems de abrir la ventana nueva, cierre la ventana de Splash. Si observamos el bloque open
another screen, vemos que no tiene ninguna pestaa o hueco a la que aadir otro bloque para cerrar la
ventana.
De todas formas, vamos a buscar el bloque que nos hace falta para cerrar la ventana de Splash. Igual que
hemos hecho para abrir una ventana nueva, pulsamos en la pestaa Buit-In, seleccionamos Control y
buscamos un bloque llamado close screen.... si nos fijamos en ese bloque, vemos que no tiene ningn
hueco para anidar bloques.
Lo que debemos hacer en ese caso es crear un procedimiento que nos ejecute ese bloque. Para ello,
seleccionamos la pestaa Built-In y pulsamos sobre procedure. Lo arrastramos a nuestro lienzo.

Y dentro de ese bloque, vamos a poner el bloque close screen. Por comodidad, vamos a cambiarle el
nombre al procedimiento, pulsando en el texto procedure del bloque, introducimos un nombre mas
familiar, como cierraventana.

Ahora lo que debemos hacer es pulsar en la pestaa My Blocks, seleccionar My Definitions y arrastrar
el bloque cierraventana en el bloque del reloj, de tal forma, que el bloque que abre una nueva ventana,
se anide a ste.

Edicin: 1

Uso de varias pantallas en AppInventor

Pgina 12


De esta forma, cuando pasen 3 segundos, la ventana de splash se cerrar y se abrir la nueva ventana (la
aplicacin).
Con este mtodo conseguimos que al pulsar el botn atras del telefono desde la pantalla de la aplicacin,
la aplicacin salga, y no se vuelva a ver la pantalla de splash.
Si lo preferimos, podemos sacar tambin el bloque open another screen a otro procedimiento y hacer
que ste bloque se ejecute antes que el otro para facilitar la comprensin, es decir... primero paso a otra
ventana y luego cierro la ventana splash... el resultado es el mismo.

Edicin: 1

Uso de varias pantallas en AppInventor

Pgina 13