Uso de Varias Pantallas AppInventor
Uso de Varias Pantallas AppInventor
Uso de Varias Pantallas AppInventor
DE
VARIAS
PANTALLAS
EN
APPINVENTOR
ndice
1.
USO
DE
VARIAS
PANTALLAS
EN
APP
INVENTOR
..................................................................................................
3
Edicin: 1
Pgina 2
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
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
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
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
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
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.
Edicin: 1
Pgina 8
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
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
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
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
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
Pgina 13