EJERCICIO 12 – Multiventana

EJERCICIO 12 - Multiventana

Vamos a aprender a crear una App con más de una ventana. Para ello deberás agregar más ventanas de navegación y botones para ir abriendo y cerrándolas.

EJERCICIO 12 - MultiventanaLo primero que debemos hacer, como en todas las App, es dirigirnos a la pestaña Proyectos, y crear uno nuevo.

Seguidamente le damos un nombre a la App tal y como ves en las imágenes.

 

EJERCICIO 12 - Multiventana
Ahora, como en la gran mayoría de aplicaciones, vamos a agregar una capa de distribución para los objetos que se añadirán a continuación. En este caso se va a seleccionar una capa DisposiciónHorizontal tal y como vemos en las imágenes.

EJERCICIO 12 - Multiventana
Modificamos las propiedades de la capa agregada, de manera que el contenido quede centrado y el ancho de la capa se ajuste al tamaño máximo de la pantalla.

A continuación, vamos a agregar tres botones que encargarán de llevarnos a la ventana deseada cuando haces clic encima.

EJERCICIO 12 - Multiventana
Seguidamente vamos a modificar el nombre de los botones dentro de la lista de componentes.

EJERCICIO 12 - Multiventana
Recuerda que estos nombres son los que después identificarán a los objetos a la hora de ser programados

Ahora vamos a modificar el texto que muestran los botones por pantalla mediante las propiedades de los componentes tal y como se muestra en la imagen.

EJERCICIO 12 - Multiventana
Añadimos más ventanas para navegar por nuestra App.

Tal y como se ve en la imagen, hacemos clic en el botón y añadimos dos ventanas más, aparte de la que se crea al iniciar un proyecto.

EJERCICIO 12 - Multiventana
Una vez tienes todas las ventanas creadas, vamos a agregar un botón para ir hacia atrás en la App.

EJERCICIO 12 - MultiventanaEste botón lo pondremos en las ventanas 2 y 3, ya que la primera tendrá los tres botones agregados antes siendo el menú principal de la App.

Tal y como ves en la imagen deberás renombrar el botón de cada ventana y ya estará preparada la App para ser programada

Ahora nos vamos al visor de bloques y comenzamos con la programación de los objetos. En primer lugar, nos situamos en la primera ventana Screen1 y le decimos a los botones que reaccionen cuando hagamos clic encima de ellos.

Recuerda que los nombres que ves en las imágenes son los nombres que le hemos dado a los botones que van a abrir la ventana escogida

EJERCICIO 12 - Multiventana
Ahora al hacer clic en cualquiera de estos tres botones, vamos a indicar que debe abrir la ventana deseada, y para ello vamos a seleccionar el conjunto de bloques Control y vamos a arrastrar dentro de los tres bloques anteriores, el bloque llamado “abrir otra pantalla Nombre de la pantalla”.

Añade un bloque de texto, con el nombre de la ventana que se desea abrir con cada botón.


Por último, vamos a repetir este mismo proceso en las ventanas 2 y 3 con el botón que hace retroceder hacia la ventana1 (botón de retroceso).

Después guardaremos nuestro proyecto y lo exportaremos a nuestro ordenador.

EJERCICIO 12 - Multiventana