APLICACIÓN PARA TOMAR NOTAS Y DIBUJAR

Transcripción

1 PRÁCTICA 2 APLICACIÓN PARA TOMAR NOTAS Y DIBUJAR Una vez que hemos visto el manejo más básico de las pantallas, el Diseñador, y el Editor de Bloques de App Inventor, ya estamos listos para hacer algo más avanzado. Comenzaremos haciendo clic en el desplegable Proyectos, y eligiendo la opción Comenzar un proyecto nuevo Una vez dentro,cambiaremos el nombre de la pantalla Screen1 por Dibujar (en la propiedad Título del componente Screen1). Ahora crearemos por nuestra cuenta un botón, y cambiaremos su propiedad Texto por Rojo, y finalmente pondremos en rojo su propiedad ColorDeFondo. Adelante, solamente hay que jugar con las propiedades del botón. Cambiaremos el nombre del botón Botón1 por boton_rojo en el cuadro de componentes del Diseñador.

2 Crearemos después otro botón verde, y finalmente otro azul, y haremos lo mismo que hemos hecho con el rojo, cambiaremos su nombre, el color de fondo, y el texto que aparece en el botón. Como queremos que los botones queden en una misma línea horizontal, vamos a recolocarlos en la pantalla añadiendo un componente DisposiciónHorizontal. Lo arrastramos desde el cajón Disposición hasta el Visor. Este objeto aparecerá en el Visor como un cuadro vacío.

3 Para que se ajuste al ancho de la pantalla del visor qué haremos? En su propiedad Ancho elegiremos la opción Ajustar al contenedor... Ahora, en el Visor, arrastraremos los tres botones dentro de DisposiciónHorizontal1. Si no nos gusta este nombre podemos cambiarlo por MarcoHorizontal, por ejemplo. Para que la altura del marco se ajuste al tamaño de los botones podemos decir que su Altura sea automática. Así siempre se adaptará al tamaño del componente más alto de todos los que contiene. Ahora añadimos el lienzo, arrastrando al Visor el componente Lienzo, que se encuentra dentro del cajón Dibujo y animación de la Paleta. Lo colocamos justo debajo, fuera del MarcoHorizontal. Lo más cómodo es definir que su anchura (propiedad Ancho) sea automática, para que se extienda hasta los bordes izquierdo y derecho del Visor. En cuanto a su altura, mejor experimentar con diferentes tamaños hasta que ocupe el espacio que queremos. Vamos entonces al editor de bloques. Arrastraremos el bloque cuando.lienzo1.tocar desde el cajón del objeto Lienzo1 hasta el editor. Esto indica que cada vez que toquemos el lienzo con el dedo tendrá que ocurrir lo que digamos dentro de este bloque mostaza.

4 Ahora arrastraremos el bloque morado (de acción) llamar.lienzo1.dibujarcírculo hasta encajarlo dentro del bloque mostaza. Veremos que para funcionar necesita que le asociemos a la derecha tres bloques de información adicional (x, y, r). Al dejar quieto el puntero del ratón sobre el icono de la x del bloque mostaza nos saldrá una ventanita en la que aparecerá un pequeño bloque tomarx de color naranja. Tenemos que arrastrarlo hasta encajarlo con el hueco superior del bloque morado llamar.lienzo1.dibujarcírculo. Haremos lo mismo con la y. Esto hará que el círculo se dibuje sobre la x y la y que estamos tocando, y no en cualquier otro punto de la pantalla. Queremos que los círculos se vean bien, así que le asignaremos a r el valor 10. El radio del círculo será 10. Utilizaremos el bloque cuando.boton_rojo.clic. Lo arrastramos hasta el editor de bloques. Qué tiene que ocurrir cuando hagamos clic sobre el botón rojo? Tiene que cambiarse a rojo el color del pincel que usamos en el lienzo. Dónde tendremos que definir eso? Una pista: el color del pincel es una característica del Lienzo1, así que tendremos que buscar la manera de hacerlo usando algún bloque del cajón del objeto Lienzo. Otra pista: es un bloque de color verde oscuro.

5 Es el bloque poner.lienzo1.colordepintura.como. Lo arrastraremos hasta encajarlo dentro del bloque mostaza cuando.boton_rojo.clic. Falta indicar que queremos que sea el color rojo. Para ello escogeremos el pequeño bloque que identifica a este color de entre los colores que hay en el cajón Colores de la Paleta de App Inventor. Haremos lo mismo con los botones para color verde y color azul. Lo mejor es hacerlo duplicando el bloque mostaza que hemos creado para el color rojo. Una vez hecho, en el nuevo bloque mostaza, podemos desplegar la lista del nombre de los botones y elegir el del color verde. Entonces sólo tendremos que cambiar el bloque rojo por el verde, y listo. Lo mismo con el botón para el azul. Cuando probemos el resultado se nos ensuciará el lienzo enseguida, así que hay que poner un botón para dejar el lienzo en blanco de nuevo. Cómo se hará? Varias pistas: Crear DisposiciónHorizontal1 debajo del lienzo Meter dentro un nuevo botón y llamarlo Limpiar Cambiar el texto del botón por Limpiar Poner los bloques para que al hacer clic sobre Limpiar se limpie el lienzo

6