Uso de varias pantallas y pantalla Splash

Transcripción

1 Uso de varias pantallas y pantalla Splash

2 Índice 1. USO DE VARIAS PANTALLAS CREACIÓN DE PANTALLA DE INICIO O DE SPLASH

3 1. Uso de varias pantallas 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 AddScreen y junto a éste, otro llamado RemoveScreen. 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 AddScreen, 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. 3

4 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. 4

5 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. 5

6 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. 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. 6

7 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. 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. 7

8 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 Control. Podrás localizar el siguiente bloque open anotherscreen(abrir otra pantalla), éste es el que debes arrastrar. 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. Como ves en el emulador, aparece un mensaje informando de que el cambio entre pantallas no está permitido actualmente en AppInventor. Para poder probar que funciona, debes instalar la aplicación en un teléfono real y probarlo mediante el método que elijas de los explicados en el Reto2. De todas formas te lo mostramos en el vídeo. 8

9 9

10 2. Creación de pantalla de inicio o de Splash 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 SplashScreen. 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. 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! 10

11 Ahora nos creamos una pantalla nueva igual que en el reto anterior, pulsando en el botón addscreen 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 de componentes, 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. 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 de seleccionarla, ya que eso lo que va a hacer es que el temporizador esté continuamente ejecutándose, y lo que nos interesa es que el temporizador funcione sólo una vez. 11

12 Ahora debemos abrir el editor de bloques para configurar el cambio de una pantalla a otra. 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 My 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 Control y buscamos el bloque Open anotherscreen... 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. Cuando ya lo tenemos, debemos cambiar el texto Text por el nombre de la pantalla a la que queremos ir, en este caso Screen2. 12

13 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 anotherscreen, 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 Control y buscamos un bloque llamado closescreen... si nos fijamos en ese bloque, vemos que tenemos el mismo problema que con el bloque open anotherscreen, no tiene ningún hueco para anidar bloques. 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 Definition, el bloque que necesitamos es el que pone procedure. Lo arrastramos a nuestro lienzo. Y dentro de ese bloque, vamos a poner el bloque closescreen. 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 My Blocks, seleccionar MyDefinitions 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. 13

14 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. Si lo preferimos, podemos sacar también el bloque open anotherscreen 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. 14