1

MATERIAL NIVEL II AI2

 CONTENIDO

CREANDO LA INTERFAZ DE USUARIO............................................................................3

DISPOSICIÓN .....................................................................................................................3
CONTROL DESLIZANTE ....................................................................................................4
BOTEDEPINTURA – PAINTPOT ........................................................................................5
Paso1. Título de la pantalla....................................................................................................... 5
2
Paso2. Configuración de los componentes ............................................................................... 5
Paso3. Añadir comportamientos a los componentes................................................................. 8
Paso4. Agregar evento táctil, controladores. ........................................................................... 10
RESUMIENDO .................................................................................................................. 14
Screen1 Diseño del Navegador .............................................................................................. 14
Screen1 Diseño de Bloques.................................................................................................... 14
 CREANDO LA INTERFAZ DE USUARIO.

Como hemos visto hasta ahora, para crear la interfaz de usuario, se puede hacer uso de
distintos elementos, desde botones y cuadros de texto, a elementos que modifican la manera
en que los elementos visuales se colocan en pantalla.
Para incluir elementos en App Inventor solo tendremos que buscar el que queremos incluir en
la aplicación y arrastrarlo en la pantalla Visor, pero hay ciertos elementos que nos facilitarán
crear una interfaz mejor, como los elementos Disposición.
3
DISPOSICIÓN

Los elementos de Disposición, o Layout en inglés, permiten modificar la forma en que se

colocan los elementos. Existen varios tipos:
 Tabular: Ordena los elementos en forma de tabla.

 Vertical: Ordena los elementos colocándolos uno después de otro en orientación

vertical.

 Horizontal: Ordena los elementos colocándolos uno después de otro en orientación

horizontal.

Pueden incluirse disposiciones dentro de disposiciones, por lo que combinando varias

podemos conseguir un buen diseño de interfaz.
 CONTROL DESLIZANTE

Un control deslizante es una barra de progreso que agrega un pulgar que se puede
arrastrar. Puede tocar el dedo pulgar y arrastrar hacia la izquierda o hacia la derecha para
establecer la posición del control deslizante del dedo pulgar. A medida que se arrastra el control
deslizante del control deslizante, desencadenará el evento PositionChanged (Posición cambiada) e
informará la posición del control deslizante. La posición informada del control deslizante puede
utilizarse para actualizar dinámicamente otro atributo de componente, como el tamaño de fuente de
4 un cuadro de texto o el radio de una bola.

ColorIzquierda: El color del control deslizante a la izquierda del pulgar.

ColorDerecha: El color del control deslizante a la izquierda del pulgar.

Ancho: Automático, Ajustar al contenedor, pixeles o porcentaje.

ValorMáximo: Establece el valor máximo del control deslizante. Al

cambiar el valor máximo también se restablece. Si el nuevo máximo es
menor que el mínimo actual, entonces el mínimo y el máximo se
establecerán en este valor.
ValorMínimo: Establece el valor mínimo del control deslizante. Al
cambiar el valor mínimo también se restablece. Si el nuevo mínimo es
mayor que el máximo actual, el mínimo y el máximo se establecerán
en este valor.
ThumbEnabled: Establece si se muestra o no el control deslizante.

Visible: Especifica si el componente debe ser visible en la pantalla. El

valor es verdadero si el componente se muestra y falso si está oculto.
.
.
 BOTEDEPINTURA – PAINTPOT

Vamos a crear un nuevo proyecto y lo llamaremos BoteDePintura. En esta aplicación

vamos a utilizar de la categoría Dibujo y animación el componente Lienzo, Canvas útil para la
creación de sencillos gráficos de dos dimensiones, nos permitirá dibujar en la pantalla del
teléfono en diferentes colores.
PaintPot fue uno de los primeros programas desarrollados para demostrar el potencial de los
ordenadores personales, ya en la década de 1970.
5
Con la aplicación BoteDePintura, se puede:
 Sumergir el dedo en un bote de pintura virtual para dibujar en ese color.
 Arrastrar el dedo por la pantalla para dibujar una línea.
 Tocar la pantalla para hacer puntos.
 Usar el botón en la parte inferior para limpiar la pantalla.
 Incluir una imagen como fondo del dibujo.

Paso1. Título de la pantalla

En el panel de la derecha, en Propiedades cambiar el título a la screen1 por Bote De Pintura.
Hay tres nombres en App Inventor que se pueden confundir:
 El nombre que elijas para el proyecto, a medida que se trabaja en él. Este será
también el nombre de la aplicación del paquete para el teléfono.
 El nombre de "Screen1", que verá en el panel que muestra los componentes de la
aplicación. No se puede cambiar este nombre en la versión actual de App
Inventor.
 El título de la pantalla, que es lo que verás en la barra de título del teléfono. Esto
empieza siendo "Screen1", y ahora es Bote De Pintura.

Paso2. Configuración de los componentes

Vamos a crear el Diseño del Navegador.

1. Botones de colores: Arrastra un componente Botón al Visor y cambia el atributo texto

(text) del botón, que verás como Button1, a "Rojo" y modifica su color de fondo a rojo.
2. Sobre el botón pulsa cambiar su nombre de Button1 a Rojo.
3. Del mismo modo, hacer dos botones más para el azul y el verde, con el
nombre Azul y Verde, que quedarán colocándolos verticalmente respecto al botón rojo.

Nota: se puede borrar el título y solo colocarle el fondo, deberás darle un porcentaje de Alto
y ancho, Ej: Alto 5% y ancho 10%

Así se verá en el diseñador, con los nombres de los botones que aparecen en la lista de los
componentes del proyecto. El uso de nombres significativos hace más legibles para uno
mismo y para los demás.
6

4. Desde el panel Paleta arrastra un DesposiciónHorizontal y

colocarlo debajo de los botones. Cambia el nombre de este
componente de DesposiciónHorizontal1 a TresBotones.
5. En el panel Propiedades cambia el ancho
de TresBotones a ajustar al contenedor.
6. Mueve los tres botones al interior del DesposiciónHorizontal1
hora llamado TresBotones.

7. Desde Paleta en la categoría Dibujo y animación, arrastra un lienzo al Visor. Cambia

su nombre por el Lienzo. Establece su ancho a Ajustar al contenedor y alto a 300
píxeles.
8. Agregar una Imagen de fondo al Lienzo.

Nota: Utilizar cualquier imagen que quieras, pero obtendrá los mejores resultados si el
tamaño de la imagen (en píxeles) está cerca del tamaño en el que se le dé muestra en el
teléfono. Además, las imágenes grandes se tardan mucho en cargar, y podría superar la
capacidad de memoria que los teléfonos asignan para las aplicaciones. Les dejamos la
imagen colibrí.
 9. Desde Paleta, arrastra otra
DesposiciónHorizontal para armar los botones
inferiores: Se llamará BotonesInferiores.

10. Todos se encuentran en la Interfaz del usuario: Una Etiqueta, un Deslizador y dos
botones. Cambiar los nombres para su mejor identificación. En Propiedades, recuerden
tamaño de los botones y la Etiqueta, Automático o Ajustar al contenedor. Pueden
aumentar el tamaño del deslizador para que no cueste al utilizar la aplicación.
11. Propiedades del Deslizador:

12. Por último, agregar de la Paleta Categoría Medios, Camara1

 Diseño del Navegador

Paso3. Añadir comportamientos a los componentes

1. Vamos al Editor de Bloques

2. Sobre BotonRojo arrastrar el bloque BotonRojo.Clic al área de trabajo.
3. Sobre Lienzo, arrastrar el bloque poner Lienzo.ColorDePintura como (desplazarse por la
lista de bloques para encontrarlo) y encajarlo al BotonRojo.Clic.
4. Luego sobre bloque colores, arrastrar el bloque del color Rojo y ponerlo en el poner
Lienzo.ColorDePintura.
 Se verá así:

5. Repetir los pasos 1-4 para los botones de color azul y verde.

Nota: Se puede copiar y pegar los bloques ya unidos y encajarlos y posteriormente modificar el
color del bloque Rojo. Para copiar y pegar utilizar método abreviado Crtl-C Ctrl-V.

6. El botón Borrar, sobre dicho botón. Encajar la instrucción llamar Lienzo Limpiar.

Por ahora nos quedará así:

10

Nota: Posteriormente podremos agregar más colores, como Actividad Adicional

Paso4. Agregar evento táctil, controladores.

Vamos a dibujar en el Lienzo: Al tocar el Lienzo, se obtiene un punto en el lugar donde se toca,
si se arrastra el dedo lentamente por el Lienzo, se dibuja una línea.

7. Crear una variable con nombre tamaño, que guardará el grosor del deslizador:

8. Nos posicionamos sobre Deslizador para arrastrar cuando… ejecutar, dentro poner la
variable tamaño. Luego clic sobre posiciónDelPulgar para tomar posicióndelPulgar y
11

Así quedará:

9. El Botón Tomar_Foto tendrá las siguientes instrucciones: a la sentencia

Cuando…Ejecutar le encajamos llamar Camara1 TomarFoto (recordar estar sobre
Camara1) para llamar…
 10. A la Cámara1 debemos agregarle:

12

11. Tocar el Lienzo: Al tocar la imagen se dibujará un circulo, Al utilizar Cuando Lienzo Tocar
se ejecutará llamar Lienzo Dibujar Circulo y completaremos los parámetros: Tomando
el valor de X e Y, para el radio, tomamos el valor de la variable tamaño.

Nota: En
Actividades
Adicionales, les daré otras variantes de valores a tener en cuenta para el radio.
 Quedará de esta manera:

13

12. Arrastrar el Lienzo: Al arrastrar el dedo sobre la imagen: se dibujarán líneas: Poner
Lienzo AnchoDeLinea, le asignamos la variable tamaño y luego llamar dibujarLinea,
completaremos con los parámetros.

Nota: En este caso el grosor de la línea está asociado a la variable tamaño. Puede tomar el valor
como defecto, en este caso se quita el poner o también darlo Uds. en valor fijo, 5 por ejemplo: Se
puede tomar como Actividad Adicional.

13. Generar el Código QR y a probar.

 RESUMIENDO

Screen1 Diseño del

Navegador

14

Screen1 Diseño de Bloques