EJERCICIO 20- Nuestra Base de Datos

EJERCICIO 20- Nuestra Base de Datos

TinyWebDB es un almacén de datos que permite almacenar información mediante etiquetas en la aplicación, esto quiere decir que los datos estarán disponibles cada vez que se abra nuestra app. Los datos son cadenas de texto que se almacenan en etiquetas (tags). Para almacenar datos, debemos especificar la etiqueta que le corresponde a ese dato. Posteriormente, los datos pueden ser recuperados en esa misma etiqueta.

Debemos tener en cuenta que cuando usamos Companion y estamos trabajando con el componente elemento que presta un servicio de comunicación cuando se diseñan interfaces.

TinyDB, todas las aplicaciones están compartiendo la misma base de datos es un conjunto de datos relacionados a un mismo contexto y almacenados para su posterior uso. Esto no ocurre si empaquetamos la aplicación como un archivo apk, mientras estemos desarrollando la app debemos ser cuidadosos en los nombres de etiquetas que usemos en otras aplicaciones.

A continuación, realizaremos una Base de datos utilizando este componente. Se dividirá nuestra aplicación en dos pantallas con el siguiente diseño:

EJERCICIO 20- Nuestra Base de Datos

Organizaremos nuestra aplicación en dos pantallas. En la primera pantalla o Screen 1 donde el usuario ingresa su nombre y apellido y tendremos un botón donde almacenaremos esta información.

EJERCICIO 20- Nuestra Base de Datos
El botón siguiente pantalla solo aparecerá cuando el usuario almacene los datos tal y como programamos en nuestro visor de bloques:

EJERCICIO 20- Nuestra Base de Datos
Al presionar el botón almacenar realizará las siguientes instrucciones donde guardará los dos valores que añadimos en nuestros campos de texto.
EJERCICIO 20- Nuestra Base de Datos
Se nos mostrara esta pantalla donde podremos extraer los datos de la base de datos:
EJERCICIO 20- Nuestra Base de Datos
Abrimos el visor de Bloques y escribiremos la siguiente instrucción dentro de Screen2:
EJERCICIO 20- Nuestra Base de Datos

EJERCICIO 20- Nuestra Base de Datos

EJERCICIO 19 – Cámara de fotos

EJERCICIO 19 - Cámara de fotos

Vamos a realizar una App que nos permita hacer una foto desde nuestro dispositivo y cuando se ha realizado la foto, ésta aparece en tamaño 100 x 100 en la pantalla, además sale una notificación indicando que la foto ha sido realizada y además un mensaje de voz pronunciando “La foto ha sido realizada.” Necesitaremos:

→ Disposición horizontal

→ Dos botones

→ Imagen

→ Campo de texto

→ Cámara(medios)

→ Notificador (medios)

→ TextoVoz (medios)
EJERCICIO 19 - Cámara de fotos
Estas son las propiedades de cada elemento que conforman nuestra app:

EJERCICIO 19 - Cámara de fotos
Los elementos ocultos que hacen posible las funciones de tomar una foto y notificar que ya está hecha:

EJERCICIO 19 - Cámara de fotos

Dentro del visor bloques pasaremos a programar el botón de ejecutar el elemento Cámara y posteriormente programamos el comportamiento de este elemento después de realizar la acción de TomarFoto:

EJERCICIO 19 - Cámara de fotos

Ahora escribimos este código para ejecutar como sonará nuestro texto hablado:

Mediante el Tono podemos configurar el tono del sonido y mediante VelocidadDePronunciación la velocidad, estos número pueden tener un valor comprendido entre 0 y 2.

Por último, haremos que cuando cliquemos a nuestro Botón Clic este llame a la acción de hablar por lo que podremos oír el mensaje que pongamos en el CampoDeTexto1

EJERCICIO 19 - Cámara de fotos
EJERCICIO 19 - Cámara de fotos

EJERCICIO 18 – Grabadora

EJERCICIO 18 - Grabadora

Vamos a realizar una App que nos permita grabar sonidos en nuestro movil y reproducir posteriormente. Contará con tres botones para poder grabar, detener y reproducir el sonido desde nuestro teléfono.

Necesitaremos:

→ Disposición vertical
→ Disposición horizontal
→ Tres botones
→ Grabadora de audio (medios)
→ Reproductor de audio (medios)

EJERCICIO 18 - Grabadora

Abrimos el visor de Bloques y lo primero de todo inicializamos la siguiente variable que utilizaremos como variable general en los botones de grabar, reproducir y parar.

EJERCICIO 18 - Grabadora
Programamos el botón de Rec o grabar, elegimos el control cuando clicamos el Botón Rec, después seleccionamos el condicional Si entonces:

Con el elemento lógico de si la variable esta activa es verdad y por lo tanto iniciamos el componente de Grabador de Sonidos 1 y se desactiva cuando ha terminado de grabar.

EJERCICIO 18 - Grabadora

Programamos la grabadora para que cuando hayamos grabado el sonido se escuche este.

EJERCICIO 18 - Grabadora
Programamos para que cuando le demos al botón de play comience a reproducir el sonido grabado.

EJERCICIO 18 - Grabadora

De nuevo tal y como hemos hecho en el botón de Rec programamos que detenga la grabación si se inicializa la variable y no lo haga cuando aparezca esta misma.

EJERCICIO 18 - Grabadora

Ejercicio 18 – Video

Ejercicio 18 - Video

Realizaremos una app que nos mostrará un video con el que podremos interactuar desde nuestra interfaz. Para ello vamos a utilizar un componente llamado VideoPlayer que sirve para reproducir un archivo de vídeo.

Reproductor de vídeo es un componente multimedia que reproduce vídeos. Un reproductor de vídeo aparece en su aplicación como un rectángulo. Si el usuario pulsa el rectángulo, los controles de los medios de comunicación aparecen: reproducción / pausa, saltar hacia delante y saltar hacia atrás.

Su aplicación puede controlar el comportamiento de la reproducción mediante una llamada al inicio, pausa, e ir a: métodos.

Los archivos de vídeo deberán ser, Windows Media Video (. Wmv), 3GPP (.3 gp), o MPEG-4 (. Mp4). En este ejercicio subiremos a nuestra cuenta de App inventor un archivo .mp4 que se encuentra en nuestra carpeta de Material>Video

App Inventor acepta archivos de vídeo de hasta 1 MB de tamaño y limita el tamaño total de una aplicación de 5 MB. Si sus archivos de medios de comunicación son demasiado grandes, es posible que obtenga errores al empaquetar o instalar su aplicación, en cuyo caso se debe reducir el número de archivos de medios o sus tamaños. Puede utilizar Software de edición de vídeo, como Windows Movie Maker o iMovie de Apple, para reducir el tamaño de los vídeos, acortándolos o volver a codificarlos en formatos más compactos.

Ejercicio 18 - Video
La interfaz que vamos a construir es la siguiente:

Ejercicio 18 - Video

Como podemos ver los componentes de nuestra aplicación se dividen en dos disposiciones horizontales. La primera es para poner una etiqueta que sirve a modo de título de la app mientras que la segunda son los controles con los que podremos reproducir y parar nuestro video.
Además de un botón que nos permitirá parar el video en un determinado punto con el elemento campo de texto donde pondremos un valor en milisegndos para determinar los segundos de nuestro video. Por ejemplo, si ponemos en este campo 8000 nuestro video se parará en el segundo 8.
Debajo de estos controles colocamos el componente ReproductorVideo

Ejercicio 18 - Video

Ejercicio 18 - Video

Para colocar nuestro elemento reproductor de video tenemos que seleccionar de la paleta de Componentes de App inventor el llamado ReproductorVideo:

Ejercicio 18 - Video

Desde nuestra carpeta de Material buscamos el archivo Trailer20segundos la descargamos a nuestro ordenador y subimos a la aplicación a través de la opción Origen dentro de las propiedades del Reproductor.

Una vez diseñada nuestra interfaz pasaremos a programar nuestra aplicación, para ello abrimos el visor de bloques y construimos las siguientes líneas:

Ejercicio 18 - Video

Quedando así nuestras líneas

Ejercicio 18 - Video
Repetimos el procedimiento, pero ahora con el botón de Stop

Ejercicio 18 - Video
Por último, escribiremos el comportamiento del botón Buscar a:

Ejercicio 18 - Video

Ejercicio 18 - Video

Ejercicio 18 - Video

EJERCICIO 17 – MiRadio

EJERCICIO 17 – MiRadio

Vamos a realizar una App que realice la función de una pequeña radio en streaming. Utilizaremos una serie de botones con los que podremos reproducir, pausar y salir de la aplicación

Para realizar esta práctica deberemos descargar a nuestro ordenador las imagenes y sonidos de la carpeta material >Radi0. En esta carpeta encontraremos los archivos necesarios para hacer nuestra app.

EJERCICIO 17 – MiRadio
Lo primero de todo subiremos todo el material que usaremos para realizar la aplicación. Desde la pestaña medios subimos los archivos que se encuentran en nuestro dispositivo:

EJERCICIO 17 – MiRadio

La interfaz se organizará de la siguiente manera: (3 Disposiciones Horizontales)

EJERCICIO 17 – MiRadio
Y dentro de cada disposición tenemos los siguientes elementos:
EJERCICIO 17 – MiRadio

EJERCICIO 17 – MiRadio
Una vez dispuesto nuestra parte visual de la aplicación abriremos el visor de los Bloques donde programaremos las acciones para que nuestra app funcione. Para ello lo primero de todo le vamos a indicar que cuando cliquemos en el botón de play reproduzca una emisora. Elegimos el condicional siguiente:

EJERCICIO 17 – MiRadio

Dentro de nuestro condicional tenemos que meter el elemento Reproductor el cual hará que oigamos la dirección de la emisora para ello utilizamos el siguiente bloque:

EJERCICIO 17 – MiRadio

El origen tenemos que indicarle el enlace del cual oiremos nuestra emisora por lo que añadimos un bloque de texto y ahí pegaremos la emisora que queramos que reproduzca.

Inciso: La web de la cual hemos sacado esta dirección se llama; https://radiomap.eu/es/madrid, la que aquí aparece es la emisora de los 40 principales.
Podeís elegir la que más os plazca

EJERCICIO 17 – MiRadio
Programamos el botón de pausa, con este condicional que hará que cuando cliquemos nuestro botón este llame al elemento Reproductor y lo pare. Primero selecionamos el B_Pause para poder poner el condicional y seguidamente clicamos al elemento Reproductor para colocar el bloque de llamar.

EJERCICIO 17 – MiRadio
Por último, solo tenemos que añadir estas líneas para decirle que para apagar nuestra app hemos de ejecutar este bloque:

EJERCICIO 17 – MiRadio

EJERCICIO 17 – MiRadio

EJERCICIO 16 – Guía Turística

EJERCICIO 16 - Guía Turística

Vamos a crear una aplicación que muestre en diferentes ventanas las opciones de ver el pueblo de Titulcia.

Para ello crearemos un proyecto nuevo con el nombre de GuíaTuristica

Se compone de una pantalla inicial, tal y como se muestra en la imagen:

EJERCICIO 16 - Guía Turística
Estas son las especificaciones de cada elemento:
EJERCICIO 16 - Guía Turística
Nos remite a esta otra página con el siguiente diseño:

EJERCICIO 16 - Guía Turística
Una vez hemos que hemos colocado y nombrado cada elemento en la pestaña de Componentes abriremos cada pestaña de Propiedades y dejamos estas especificaciones en cada elemento:

EJERCICIO 16 - Guía Turística

Cada uno de los botones debe de acceder a una pantalla nueva. Esto se hace colocando los siguientes bloques:

EJERCICIO 16 - Guía Turística

Ayuntamiento:

Accede a una web externa, donde se encuentra almacenada la información del Ayuntamiento de Titulcia. Se enlazará el botón a esa web utilizando como elemento el ActivityStarter.

EJERCICIO 16 - Guía Turística
Historia:

Una nueva pantalla con una etiqueta donde aparece la descripción de la historia de Titulcia, así como un botón para volver a la pantalla de inicio o menú.

EJERCICIO 16 - Guía Turística
Rutas de Senderismo:

Una nueva pantalla con una etiqueta Rutas de Senderismo y una imagen con el mapa de Titulcia, así como un botón para volver a la pantalla de inicio o menú.

EJERCICIO 16 - Guía Turística

Maps:

Vamos a añadir en la pantalla MENÚ un botón con el nombre de Maps. Aparecerá la imagen de Google Maps, que previamente se habrá localizado con dicha herramienta y se habrá capturado la url de acceso a esa imagen. También, en este caso, se tienen que utilizar los bloques de ActivityStarter1.

EJERCICIO 16 - Guía Turística

Para localizar la zona que se quiere visualizar se sigue el siguiente proceso:

1. Pulsar el icono superior izquierda de Google
2. Seleccionar Maps
3. Con el zoom (rueda del ratón, + y – del teclado) localizar el lugar que nos interesa
4. Arrastrar al punto que nos interese,
5. Y nos mostrará una imagen real de la localidad.
EJERCICIO 16 - Guía Turística

EJERCICIO 15 – Pong

EJERCICIO 15 - Pong

Vamos a desarrollar el juego del pong, donde vamos a disponer de una barra que vamos a poder desplazar de forma horizontal sobre la pantalla.

Una pelota irá rebotando en los bordes y deberemos evitar que dicha pelota caiga bajo la barra que nosotros movemos.

Cada vez que la barra toque la bola se acumulará un punto en el marcador.

EJERCICIO 15 - Pong
Comenzamos un nuevo proyecto que llamamos Pong Modificamos las propiedades de “Screen1:

• Disposición horizontal: centro
• Nombre de la aplicación: Pong
• Marcar la opción Enrollable
• Título: Pong

Añadimos un Lienzo (Canvas) con las siguientes características:

• Color de Fondo: #a4eba6fd
• Alto: 350 pixels
• Ancho: Ajustar al contenedor

Posteriormente insertamos una Pelota y SpriteImage dentro del lienzo anterior:

• Color de pintura: Blanco
• Foto: Barra.gif
• Radio: 10
• X: 127 / Y: 300
• Nombre: Pelota
• Nombre: Barra

EJERCICIO 15 - Pong
Ahora colocamos una Etiqueta bajo el lienzo anterior:
• Ancho: Ajustar al contenedor
• Texto: Puntos: 0
• Marcar la opción HasMargins
• Nombre: EtiquetaPuntos
• Posición del texto: centro

Ponemos una casilla de verificación bajo le etiqueta anterior:

• Marcar la opción Verificado
• Texto: Sonido
• Nombre: CheckBoxSonido

Insertamos una disposición horizontal bajo la casilla de verificación:

• Disposición horizontal: centro
• Ancho: Ajustar al contenedor

Añadimos un botón dentro de la disposición horizontal anterior:

• Color de fondo: Verde
• Ancho: Ajustar el Contendor
• Forma: redondeado
• Texto: Comenzar
• Posición del texto: centro
• Nombre: B_Comenzar

EJERCICIO 15 - Pong

Colocamos un segundo botón junto al botón anterior, dentro de la disposición horizontal:

• Color de fondo: Naranja
• Ancho: Ajustar el contenedor
• Forma: redondeado
• Texto: Reset
• Posición del texto: centro
• Nombre: B_Reset

Insertamos una etiqueta bajo la disposición horizontal anterior:

• Marcar las opciones Negrita y Cursiva
• Tamaño de letra: 23
• Texto: dejar en blanco
• Nombre: E_GameOver

Añadimos el elemento Sonido

En la sección medios, subir los elementos que se van a utilizar en la parte de bloques:
Buzzer.mp3 ; Noink.mp3 ; note.wav ; Tada.mp3

Por último, colocamos una etiqueta de ancho 90px entre el lienzo y la etiqueta puntos.

EJERCICIO 15 - Pong
Accedemos a la sección de bloques para implementar el código.

Lo primero de todo es inicializar una variable global que llamaremos puntos a 0:

Inicializar global puntos como 0


Creamos una función llamada CambiarYMostrarPuntos, que recibirá el número de puntos (NuevosPuntos) y modificará la variable puntos creada en el punto 2 y la EtiquetaPuntos que visualiza los puntos acumulados:

EJERCICIO 15 - Pong
Ahora programaremos el B_Comenzar:

EJERCICIO 15 - Pong
El Código para el sprite Barra, que va a permitir arrastrar dicho elemento de forma horizontal:

EJERCICIO 15 - Pong

Código para B_Reset, donde se va a colocar la bola en unas coordenadas determinadas, se va a parar la bola y se van a resetear los puntos llamando a la función creada:

EJERCICIO 15 - Pong
Crearemos una función TocaSonido que enviará el sonido que se quiere tocar, y lo reproducirá siempre y cuando el ChecBoxSonido esté activo:

EJERCICIO 15 - Pong
Programamos para cuando la bola toca un borde. Si el borde que toca es el inferior (-1) la bola se para, aparece texto “Game over” y se toda el sonido Buzzer. Si toca cualquier otro borde, rebotará y tocará el sonido Note.

EJERCICIO 15 - Pong
Por último, haremos el código para cuando la bola toca la barra:

EJERCICIO 15 - Pong
Guardamos nuestro proyecto con el nombre de Pong dentro de nuestra carpeta de proyectos y exportamos el proyecto a nuestro ordenador.

EJERCICIO 15 - Pong

EJERCICIO 14 – Monumentos del mundo

EJERCICIO 14 - Monumentos del mundo

En la siguiente aplicación vamos a realizar una aplicación de cultura general, un minitrivial.

El funcionamiento será el siguiente:

Se van a ir mostrando fotos de distintos monumentos famosos de todo el mundo y se deberá seleccionar el nombre de cada uno de ellos en una lista.

Si el nombre seleccionado es correcto, se indicará mostrando un texto junto con un sonido de aplausos, por otro lado, si el nombre seleccionado no es el que corresponde con la foto, se mostrará un texto indicando que es erróneo y se reproducirá un sonido de error.

Comenzamos un nuevo proyecto que llamamos Monumentos

Modificamos las propiedades de “Screen1”:

EJERCICIO 14 - Monumentos del mundo
• AppName: Monumentos del Mundo
• Color de fondo: color azul personalizado #036aebff
• Marcar la opción Enrollable
• Título: Monumentos del Mundo

EJERCICIO 14 - Monumentos del mundo

EJERCICIO 14 - Monumentos del mundo

Insertar una imagen dentro del contenedor anterior:

• Darle el nombre ImagenMonumento
• Alto y Ancho: ajustar al contenedor

Colocar una Disposición Vertical bajo la disposición Horizontal (1)

• Disposición Horizontal: Centro
• Disposición Vertical: Arriba
• Alto y Ancho: Ajustar al contenedor

Colocamos una etiqueta dentro de la disposición vertical:

• Nombre de la etiqueta: E_Pregunta
• Marcar la opción Negrita
• Tamaño de la letra: 20
• Texto: ¿Cómo se llama este monumento?

EJERCICIO 14 - Monumentos del mundo

Insertamos un Selector de Lista bajo la etiqueta anterior:

• Marcar la opción Negrita
• Tamaño de la letra: 16
• Alto: Automático
• Ancho: 250 pixels
• Texto: Selecciona la respuesta

Colocamos un botón bajo el Selector de Lista anterior:

• Nombre del botón: B_Siguiente
• Marcar la opción Negrita
• Tamaño de la letra: 16
• Alto: Automático
• Ancho: 250 pixels

Texto: SIGUIENTE.

Colocamos otro botón bajo el anterior:

• Nombre del botón: B_Salir
• Marcar la opción Negrita
• Tamaño de la letra: 16
• Alto: Automático
• Ancho: 250 pixels
• Color del texto: Rojo

EJERCICIO 14 - Monumentos del mundo

Texto: SALIR
Insertar un elemento Sonido que se encuentra en la sección Medios de la Paleta

EJERCICIO 14 - Monumentos del mundo

Accedemos a la sección de bloques para implementar el código.
Vamos a inicializar una variable que se llame PreguntaActual y darle el valor 1:

EJERCICIO 14 - Monumentos del mundo
Inicializamos una variable que se llame RespuestasCorrectas que esté formada por una lista de cinco componentes a los que les daremos los valores correctos de las cinco preguntas que se van a realizar:

EJERCICIO 14 - Monumentos del mundo

Inicializar una variable que llamaremos TodasLasPreguntas que estará formada por una listaque a su vez contenga cinco listas, y cada una de las listas tendrá las posibles respuestas entre las que se deberá seleccionar la correcta:

EJERCICIO 14 - Monumentos del mundo
Al inicializar la aplicación se deberá poner como imagen la del primer monumento cuyo nombre se va a preguntar. Las imágenes de los distintos monumentos se han llamado monumento1, monumento2…. , de tal manera que dicha foto se pueda obtener sabiendo el número de la pregunta, concatenando “monumento” con el numero de la pregunta y con “.jpg”

EJERCICIO 14 - Monumentos del mundo

EJERCICIO 14 - Monumentos del mundo

Al pulsar sobre “Selecciona la respuesta” se nos mostrará las posibles respuestas de la pregunta en la que nos encontramos, es decir, que en la lista TodasLasPreguntas deberemos seleccionar el bloque de lista que coincida con el número de la pregunta. Dicho conjunto de elementos se cargará en el selector de la lista, mediante el proceso AntesDeSelección:

EJERCICIO 14 - Monumentos del mundo
Una vez que seleccionemos uno de los presidentes que se muestran, habrá que controlar si la respuesta es correcta o no.

Este control se llevará mediante el proceso DespuésDeSelección del Selector de lista, y para saber si la respuesta es correcta, se comprueba si el elemento que hemos seleccionado es igual al elemento de la lista RespuestasCorrectas que se encuentra en la posición correspondiente al número de la pregunta.

Si hemos acertado se reproduce el sonido aplauso.mp3 y se muestra en una etiqueta el texto CORRECTO.

Si no hemos acertado se reproduce el sonido error.mp3 y se muestra en una etiqueta el texto INCORRECTO.

EJERCICIO 14 - Monumentos del mundo
Al pulsar en el botón siguientes se deberá actualizar el valor de la pregunta actual, además se deberá poner de nuevo en la etiqueta en la que pusimos CORRECTO o ERROR de nuevo la pregunta

¿Cómo se llama este monumento?

Si la pregunta es la última, la siguiente volverá a ser la primera, para llevar a cabo este control

EJERCICIO 14 - Monumentos del mundo

se comprueba si el valor de la pregunta actual (después de haberla incrementado en 1) es mayor que la longitud de la lista de respuestas correctas, y si es así el valor de PreguntaActual pasa a ser 1

EJERCICIO 14 - Monumentos del mundo
Finalmente, al pulsar en el botón salir se saldrá de la aplicación:

Guardamos nuestro proyecto con el nombre de Monumentos del Mundo dentro de nuestra carpeta de proyectos y exportamos el proyecto a nuestro ordenador

EJERCICIO 14 - Monumentos del mundo

EJERCICIO 13 – Parlanchin

EJERCICIO 13 - Parlanchin

En este ejercicio se va a realizar una aplicación que hable y que reproduzca el mensaje de texto que previamente se haya escrito.

El resultado final va a tener un cuadro de texto donde podamos escribir el texto que queramos que diga el móvil y un botón que al pulsar nos diga lo que hemos escrito.

Comenzamos un nuevo proyecto que llamamos Parlanchin Modificar las propiedades de la ventana “Screen1” siguientes:

EJERCICIO 13 - Parlanchin
• Disposición horizontal: Centro
• Disposición vertical: Arriba
• Nombre de la aplicación: Parlanchin
• Imagen de fondo: archivo “blabla.jpg” facilitado
• Marcamos la opción Enrollable
• Título: Parlanchin

EJERCICIO 13 - Parlanchin

 

Colocamos una disposición Vertical con las siguientes propiedades:

• Disposición Horizontal: Centro
• Disposición Vertical: Arriba
• Alto: Automático
• Ancho: Ajustar al contenedor
• Color: ninguno

Insertamos un botón dentro de la disposición vertical con las siguientes características:

• Alto: Automático
• Ancho: 200 pixel
• Texto: Háblame
• Nombre: B_Hablame

EJERCICIO 13 - Parlanchin
Insertamos un segundo botón dentro de la disposición vertical que hemos creado anteriormente con las siguientes características:

• Alto: Automático
• Ancho: 200 pixels
• Texto: Borrar
• Nombre: B_Borrar

A continuación, añadimos un campo de texto con las siguientes características:

• Alto: Automático
• Ancho: Ajustar al contenedor
• Nombre: TextoHablado

Insertamos un botón debajo de la disposición vertical anterior con las siguientes características:

• Marcar la opción “Negrita” “Cursiva“
• Ancho: 80 pixels Alto: 80 pixels
• Imagen:B_Salir.jpg
• Nombre: B_Salir

Por último, añadimos el componente TextoAVoz que, dentro de la Paleta, podemos encontrar en la sección Medios

EJERCICIO 13 - Parlanchin

EJERCICIO 13 - Parlanchin
Una vez ya hecha nuestra interfaz abrimos el visor de Bloques.

Vamos a trabajar en la sección de bloques, asignando código a cada uno de los elementos, fundamentalmente botones, que se han colocado en la pantalla principal.

Accedemos a la sección de bloques de Screen1 y asignamos código a los botones.

B_Hablame:

• Seleccionar “cuando BtnHablame.Clic”
• En los bloques de control seleccionar “si entonces sino” condicional del botón B_Hablame:

• Si: TextoHablado.texto = “”

Entonces: llamar TextoAVoz1.Hablar
Mensaje “no has dicho nada”
Sino: llamar TextoAVoz1.Hablar

Mensaje TextoHablado.Texto
B_Borrar:

• Cuando B_Borrar.Clic
Ejecutar poner TextoHablado.Texto como

B_Salir

• Cuando B_Salir.Clic
Ejecutar cerrar aplicación

EJERCICIO 13 - Parlanchin

EJERCICIO 13 - Parlanchin

EJERCICIO 13 - Parlanchin

EJERCICIO 13 - Parlanchin

Guardamos nuestro proyecto con el nombre de Parlanchin dentro de nuestra carpeta de proyectos y exportamos el proyecto a nuestro ordenador
EJERCICIO 13 - Parlanchin

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