Leider Marino Caicedo Obando

Ing. Sistemas
Aplicacin con app inventor: Dibujar Crculos Lemaco0357@hotmail.es

APLICACIN CON APP INVENTOR:

Dibujar Crculos

Nombre del Aprendiz:

1
 Leider Marino Caicedo Obando
Ing. Sistemas
Aplicacin con app inventor: Dibujar Crculos Lemaco0357@hotmail.es

Objetivo:

Crearemos una aplicacin que nos permita dibujar crculos en la pantalla, seleccionando el color
del fondo y del mismo dibujo.

Paso 1:
1) Al acceder a la aplicacin nos encontraremos con la siguiente pantalla, ya que
tenemos el proyecto de la aplicacin:

2) Creamos un nuevo proyecto.

1. Pulsamos en New. Nos aparecer el siguiente dilogo:

2. Escribimos Circulos y pulsamos OK. Nos aparecer el panel de diseo

2
 Leider Marino Caicedo Obando
Ing. Sistemas
Aplicacin con app inventor: Dibujar Crculos Lemaco0357@hotmail.es

Paso 2:
1) En primer lugar vamos a aadir el icono que veremos en nuetra aplicacin, para
ello vamos Icon add, y seleccionamos el archivo (En este caso
circulo.png).
2) A continuacin cambiamos el nombre, en el campo title colocamos el
nombre, en este caso Circulos
3) Para poner los botones para elegir las opciones de color:

1. Arrastramos desde Palette Screen Arrangement, el componente

HorizontalArrangement.
2. Arrastramos desde Palette Basic, dos componentes de ListPicker
3. Cambiamos el nombre de ListPicker1 y de ListPicker2 por defecto, por
otra ms fcil de recordar (Ej. OpcionFondo y OpcionFigura), desde
Components Rename.
4. Primero vamos a modificar OpcionFondo
a. En Propiertes, vamos a cambiar el tamao del botn, su texto y
sus opciones:

1. Pondremos en Text, lo que queramos que aparezca en

el botn, en este caso, Fondo.
2. En Width pondremos el valor Fill parent, y en
Height el valor de 50 pixels.
3. En ElementsFromString colocamos las opciones de
colores que queremos, separadas por comas, en este caso
Rojo, Azul, Verde.

5. A continuacin vamos a modificar OpcionFigura

a. En Propiertes, vamos a cambiar el tamao del botn, su texto y
sus opciones:

1. Pondremos en Text, lo que queramos que aparezca en

el botn, en este caso, Circulo.
2. En Width pondremos el valor Fill parent, y en
Height el valor de 50 pixels.
3. En ElementsFromString colocamos las opciones de
colores que queremos, separadas por comas, en este caso
Negro, Amarillo, Blanco,

5) Ahora asignaremos el editor donde se dibujaran los crculos.

1. Arrastramos desde Palette Basic, el componente Canvas, y lo
colocamos debajo de los botones.
2. Cambiamos el nombre de Canvas1 por defecto, por otra ms fcil de
recordar (Ej. Editor).

3
 Leider Marino Caicedo Obando
Ing. Sistemas
Aplicacin con app inventor: Dibujar Crculos Lemaco0357@hotmail.es

3. Le cambiamos el tamao, 5. En Width pondremos el valor 300 pixels,

y en Height el valor de 300 pixels

6) Para poner el botn de salir haremos lo siguiente:

1. Arrastramos desde Palette Basic, el componente Button.

2. Cambiamos el nombre del componente a BotonSalir y su texto a
Salir.

7) El aspecto debe ser parecido a este:

8) Ahora guardamos, pulsando Save.

Paso 3:
Ahora modificaremos el comportamiento de los distintos componentes con el
Editor de bloques, para ello lo abrimos pulsando Open the Blocks Editor.

1) Abrimos el archivo .JNLP que se ha descargado.

2) Para cambiar el color del fondo cuando elegimos una opcion:

1. Arrastramos My Blocks OpcionFondo la opcin when

OpcionFondo.AfterPicking do
2. Arrastramos Built--In Control la opcin if test then--do y la
encajamos dentro de when OpcionFondo.AfterPicking do

4
 Leider Marino Caicedo Obando
Ing. Sistemas
Aplicacin con app inventor: Dibujar Crculos Lemaco0357@hotmail.es

3. Arrastramos desde Built in Logic la opcin = y la encajamos

detrs de test.

4. Ahora tenemos que tener en cuenta los colores que hemos puesto en las
opciones de fondo (En nuestro caso: Rojo, Azul y Verde), ya que estos
sern los campos a rellenar en color.

a. Arrastramos desde My Blocks OpcionFondo.Selection,

y la encajamos en el primer lado del =.

b. Al otro lado del = vamos a poner el texto que se va a

seleccionar en la opcin, en este caso vamos a empezar por el
Rojo. Para ello pinchamos sobre un espacio libre y
seleccionamos text y lo cambiamos por Rojo, esta pieza la
encajamos detrs del =.

c. Arrastramos de My Blocks Editor, el elemento

Editor.BackgroundColor to, y lo encajamos en then--do

d. Como en este caso el color con el que estamos trabajando es el

rojo, seleccionaremos en un espacio en blanco color y red, y
esa pieza la encajaremos detrs de Editor.BackgroundColor
to.

5
 Leider Marino Caicedo Obando
Ing. Sistemas
Aplicacin con app inventor: Dibujar Crculos Lemaco0357@hotmail.es

e. Para las otras opciones de color (Azul y verde),realizamos el

mismo proceso anterior, pero con sus respectivos cambio de
texto y de color.

Seguimos encajando dentro del mismo paquete, hasta que nos

quede un aspecto parecido a este:

3) Para cambiar el color del circulo cuando seleccionamos su opcin correspondiente:

1. Arrastramos My Blocks OpcionFigura la opcin when

OpcionFigura.AfterPicking do.
2. Arrastramos Built--In Control la opcin if test then--do y la encajamos
dentro de when OpcionFigura.AfterPicking do.

3. Arrastramos desde Built in Logic la opcin = y la encajamos detrs

de test.

6
 Leider Marino Caicedo Obando
Ing. Sistemas
Aplicacin con app inventor: Dibujar Crculos Lemaco0357@hotmail.es

4. Ahora tenemos que tener en cuenta los colores que hemos puesto en las
opciones de figura (En nuestro caso: Negro, Amarillo y Blanco), ya que
estos sern los campos a rellenar en color.
a. Arrastramos desde My Blocks OpcionFigura.Selection, y la
encajamos en el primer lado del =.
b. Al otro lado del = vamos a poner el texto que se va a seleccionar
en la opcin, en este caso vamos a empezar por el Negro. Para ello
pinchamos sobre un espacio libre y seleccionamos text y lo
cambiamos por Negro, esta pieza la encajamos detrs del =.

c. Arrastramos de My Blocks Editor, el elemento

Editor.PaintColor to, y lo encajamos en then--do.
d. Como en este caso el color con el que estamos trabajando es el
negro, seleccionaremos en un espacio en blanco color y black, y
esa pieza la encajaremos detrs de Editor.PaintColor to

e. Para las otras opciones de color (Amarillo y Blanco),realizamos el

mismo proceso anterior, pero con sus respectivos cambio de texto y
de color.
f. Seguimos encajando dentro del mismo paquete, hasta que nos
quede un aspecto parecido a este:

7
 Leider Marino Caicedo Obando
Ing. Sistemas
Aplicacin con app inventor: Dibujar Crculos Lemaco0357@hotmail.es

4) Para ordenar que al pinchar se dibuje un circulo:

1. Arrastramos My Blocks Editor la opcin when Editor.touched do.

2. Arrastramos My Blocks Editor la opcin call Editor.DrawCircle .
3. Arrastramos My Blocks My Definitions la opcin value x para la x
y value y para la y. En el caso del r vamos a asignarle el numero 30,
pulsando en un lugar en blanco, Math, 123 y cambiando el nmero por 30;
El resultado tendra que ser parecido al siguiente:

5) Reiniciar la aplicacin cuando se pulse BotonSalir:

1. Arrastramos My Blocks BotonSalir la opcin when

BotonSalir.Click do.
2. Arrastramos Built--In Control la opcin close application y la
encajamos dentro de when BotonSalir.Click do.

8
 Leider Marino Caicedo Obando
Ing. Sistemas
Aplicacin con app inventor: Dibujar Crculos Lemaco0357@hotmail.es

6) El aspecto Final sera:

Pas 4
Guardas pulsando Save desde la pantalla design.

La aplicacin ya est terminada, podemos probarla en el emulador o en el dispositivo.

9
 Leider Marino Caicedo Obando
Ing. Sistemas
Aplicacin con app inventor: Dibujar Crculos Lemaco0357@hotmail.es

Conclusiones

App Inventor es una manera excelente de iniciarse en el entorno Android y en el desarrollo de

aplicaciones mviles.

A pesar de sus limitaciones, App Inventor permite hacer con relativa facilidad aplicaciones que
requeriran un elevado esfuerzo de programacin en Android.

La posibilidad de testear las aplicaciones en tiempo real en el dispositivo mvil es una gran
ventaja para el desarrollador.

10