Uso de Varias Pantallas - v2

CURSO
DE CREACIÓN DE APLICACIONES MÓVILES

ANDROID SIN NECESIDAD DE PROGRAMACIÓN:

USO DE VARIAS VENTANAS EN APP INVENTOR
Sergio Martín Gutiérrez

Juan Peire Arroba
Manuel A. Castro Gil

UNIVERSIDAD NACIONAL DE EDUCACIÓN A DISTANCIA

CURSO DE CREACIÓN DE APLICACIONES MÓVILES
ANDROID SIN NECESIDAD DE PROGRAMACIÓN
| Uso de varias ventanas en App Inventor

Uso de varias ventanas en AppInventor

Vamos a explicar como se crean aplicaciones con múltiples
pantallas en Android. La mayor parte de las aplicaciones en
Android se componen de varias pantallas, por esa razón 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 botón 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 botón
“Add Screen”, introducimos el nombre que queramos y
pulsamos el botón ok. Como podemos ver, en viewer, tenemos
una nueva pestaña con el nombre que introdujimos
previamente.

Fundación UNED 2
Juan Peire Arroba
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 botón en la primera pantalla...
para ello, pulsamos la pestaña Screen1 y arrastramos un botón
de la paleta a la primera pantalla.

Si pulsamos la pestaña Screen2, podemos comprobar tanto el
viewer como la sección “components” está vacía, ya que el
botón lo hemos añadido a la pantalla Screen1 y no a la pantalla
Screen2.

Fundación UNED 3
Con la pestaña Screen1 seleccionada abrimos el Editor de

Bloques, y vemos, que al pulsar la pestaña “My Blocks” el Editor
de Bloques muestra el componente del botón que hemos
añadido.

Ahora volvemos a la web de AppInventor y pulsamos la pestaña
Screen2, regresamos al Editor de Bloques y al pulsar la pestaña
“My Blocks”, vemos que el Editor de Bloques está vacío.
Fundación UNED 4
Juan Peire Arroba

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

Ahora vas a abrir el emulador y a conectarlo con AppInventor
como hemos hecho en el reto anterior... Una vez arrancado,
tienes la aplicación lanzada en el emulador, y puedes ver la
pantalla Screen1 en él.
Fundación UNED 5

Si en la web de AppInventor seleccionas la pestaña Screen2,
comprobarás que el emulador se comporta de la misma forma
que el Editor de Bloques, cambiando la pantalla que se muestra
en él a Screen2.
Fundación UNED 6
Juan Peire Arroba

La navegación entre ventanas se hace igual que en el reto
anterior.

Previamente has añadido un botón a la pantalla Screen1. Ahora
harás que al pulsar ese botón, la pantalla del emulador cambie
de Screen1 a Screen2. Para conseguirlo selecciona en el Editor
de Bloque el botón y arrastra el bloque when Button1.Click do.
A continuación rellena el hueco con el bloque adecuado. En este
caso, es alguno que permita abrir nuevas ventanas. Dirígete a la
pestaña Built-‐In y pulsa Procedure. Podrás localizar el siguiente
bloque open another screen with start value (abrir otra pantalla
con valor de inicio), éste es el que debes arrastrar.

Fundación UNED 7
Como puedes apreciar, a este bloque, hay que añadirle otro

bloque más 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”.

Con esto ya está terminada toda la lógica necesaria para hacer
que la aplicación pase de la primera pantalla a la segunda.
Para probar que su funcionamiento, dirígete a la Web de
AppInventor, (asegurate de tener seleccionada la pantalla
Screen1) y pulsa el botón del emulador.

Creación de pantalla de inicio.

La mayoría de las aplicaciones que utilizamos en móviles,
cuando las abrimos, nos muestran una pantalla de bienvenida,
de carga, o simplemente con el logotipo de la empresa, la
utilización de esas imágenes es visualmente atractiva, y le
aporta un plus de calidad a nuestra aplicación... 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 aplicación. Es decir, necesitamos tener dos pantallas igual que
en ejercicios anteriores, sólo que en lugar de hacer la transición
de una a otra a través de la pulsación de un botón se hará
cuando pase determinado tiempo.

Fundación UNED 8
Juan Peire Arroba
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
aplicación. Arrastramos un Label de la paleta de componentes, y
ponemos el texto que queramos... en este caso, “HOLA!”

Ahora creamos una pantalla nueva igual que en el reto anterior,
pulsando en el botón “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 aplicación.... pulsamos en la pestaña Screen1 y en la paleta
"Sensors", podemos ver un componente llamado “clock”, ese es
el que vamos a necesitar, ya que además de oferecernos la
posibilidad de saber la fecha, nos hace de temporizador.

Fundación UNED 9
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 sección 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 más del componente
“Clock”, en properties, vemos que la opción “TimerAlwaysFires”
está seleccionada, debemos deseleccionarla, ya que eso va a
hacer que el temporizador esté continuamente ejecutándose, y
lo que nos interesa es que el temporizador funcione sólo una
vez.

Ahora debemos abrir el editor de bloques para configurar el
cambio de una pantalla a otra.
Fundación UNED 10
Juan Peire Arroba
Pulsamos el botón “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 pestaña “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.

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
pestaña “Built-‐In” pulsamos en “Procedure” 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 pestaña “Built-‐In”, seleccionamos “Text” y arrastramos el
bloque “Text” a nuestro puzzle.
Fundación UNED 11
Cuando ya lo tenemos, debemos cambiar el texto “Text” por el

nombre de la pantalla a la que queremos ir, en este caso
“Screen2”.

De esta forma, cuando el reloj llegue a 3 segundos,
automáticamente, cambiará la pantalla de presentación o Splash
por la siguiente pantalla.

Sin embargo, esta aplicación tiene un problema, y es que cuando
estemos en la ventana de la aplicación, si pulsamos el botón
atrás del teléfono, nos volverá a la pantalla de Splash, para
evitar esto, lo que debemos hacer, es que además de abrir la
ventana nueva, cierre la ventana de Splash. Si observamos el
bloque “open another screen”, vemos que no tiene ninguna
pestaña o hueco a la que añadir 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 pestaña “Buit-‐In”,
seleccionamos “Procedure” y buscamos un bloque llamado
“close screen”.... si nos fijamos en ese bloque, vemos que no
tiene ningún hueco para anidar bloques.
Fundación UNED 12
Juan Peire Arroba
Lo que debemos hacer en ese caso es crear un “procedimiento”
que nos ejecute ese bloque. Para ello, seleccionamos la pestaña
“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 pestaña
“Procedure” y arrastrar el bloque CloseScreen (“cierraventana”)
en el bloque del reloj, de tal forma, que el bloque que abre una
nueva ventana, se anide a éste.

De esta forma, cuando pasen 3 segundos, la ventana de splash se
cerrará y se abrirá la nueva ventana (la aplicación).

Con este método conseguimos que al pulsar el botón “atras” del
telefono desde la pantalla de la aplicación, la aplicación salga, y
no se vuelva a ver la pantalla de splash.

Fundación UNED 13
Si lo preferimos, podemos sacar también el bloque “open

another screen” a otro procedimiento y hacer que éste bloque
se ejecute antes que el otro para facilitar la comprensión, es
decir... primero paso a otra ventana y luego cierro la ventana
splash... el resultado es el mismo.

Fundación UNED 14

Uso de Varias Pantallas - v2

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Uso de Varias Pantallas - v2

Cargado por

Copyright:

Formatos disponibles

CURSO

DE CREACIÓN DE APLICACIONES MÓVILES

Sergio Martín Gutiérrez

UNIVERSIDAD NACIONAL DE EDUCACIÓN A DISTANCIA

Cada pantalla es totalmente independiente de la anterior, desde

Con la pestaña Screen1 seleccionada abrimos el Editor de

Como puedes apreciar, a este bloque, hay que añadirle otro

Para entender el funcionamiento, nos vamos a crear un

Arrastramos ese componente a nuestro viewer, y vemos que se

Pulsamos el botón “open blocks editor”. En el editor de bloques,

Cuando ya lo tenemos, debemos cambiar el texto “Text” por el

Si lo preferimos, podemos sacar también el bloque “open

También podría gustarte