DEFINICIÓN Y FUNCIÓN DE LOS ELEMENTOS DE APP INVENTOR.

Función de los componentes de la interfaz

Paleta de Componentes: la encontramos a la izquierda de la pantalla y

recoge todos los componentes con los que podemos trabajar a la hora de crear
nuestras aplicaciones (botones, Sprite, imágenes, sonidos,)

 Ejemplo: Los sonidos e imágenes que agregamos, para complementar

nuestras creaciones y ejecutar en nuestra futura aplicación.

Paleta de Propiedades: último gran apartado de esta ventana «diseñador».

Seleccionando cada uno de los componentes podremos modificar sus propiedades
(modificar textos, cambiar colores, añadir imágenes,)

 Ejemplo: En este apartado observamos las propiedades de lo previamente

añadido (componentes) como se puede personalizar un botón y de esta
manera se cambia la apariencia desde la fuente hasta la

Barra de herramienta principal: este apartado recoge en una lista

aquellos componentes que finalmente formarán parte de la aplicación, será a partir de
esta lista y el último apartado, propiedades, como terminaremos nuestro diseño.

 Ejemplo: En este vemos todos los componentes que hemos agregado,

y de esa manera logramos acomodar todo y posteriormente entrar a la paleta
de propiedades.

Visor: simula una pantalla de un dispositivo móvil, aquí iremos añadiendo los diferentes
componentes y dando forma al aspecto que tendrá la aplicación que
habíamos imaginado.

 Ejemplo: En este vemos una replica de como se vera todo lo que

queremos lograr y una prueba de ello es las posiciones que
fijemos aquí serán las apreciadas en la aplicación que queremos
realizar.

Editor de Diseñador/Bloques: Una vez hemos completado el diseño de nuestra aplicación,

pasaremos a la ventana «bloques», desde la cuál realizaremos la programación que tendrán los
componentes seleccionados, es decir, con esta opción conseguiremos que nuestra app se
comporte como habíamos imaginado mediante la unión de bloques que permitirán que se
ejecuten los diferentes eventos.

 Ejemplo: Cuando se desarrolla una aplicación se desarrolla físicamente en la paleta de

componentes, propiedades, etc. Es decir, la pestaña principal, posteriormente pasamos
a la pestaña que es como el
motor pues con este
logramos hacer que todo lo
físico cambie y logremos la
realización de la aplicación
es decir lograr la ejecución.

Definición de eventos y
métodos de app inventor.

Eventos: Las aplicaciones creadas con App Inventor están orientadas a eventos. No llevan a
cabo un conjunto de instrucciones en un orden predeterminado, sino que reaccionan a eventos.
Al hacer clic en un botón, arrastrar el dedo o tocar en la pantalla son eventos. Con App Inventor,
toda la actividad se produce en respuesta a un evento. Tu aplicación no debe contener bloques
fuera de una pieza "when do" de un evento.

Como se producen un evento, la aplicación reacciona llamando a una secuencia de

instrucciones como establecer el color de fondo de un botón a azul o cambiar el texto de una
etiqueta.

Los eventos pueden ser divididos en 2 tipos diferentes: automáticos e iniciados por el usuario.
Hacer clic en un botón, tocar o arrastrar en la pantalla, inclinar el teléfono son eventos iniciados
por el usuario. Una colisión entre Sprite o de estos con los bordes de un canvas son eventos
automáticos.

Tipo de evento Ejemplo

Evento iniciado por el usuario Cuando el usuario hace clic en el boton_1, hacer...
Evento de inicialización Cuando la aplicación se inicia, hacer...
Evento de temporización. Cuando han pasado 20 milisegundos, hacer.
Evento de animación Cuando dos objetos colisionan, hacer...
Evento externo Cuando el teléfono recibe un SMS, hacer…
Metodos: Un método es una función que es llamada desde el programa, a diferencia de los
procedimientos, estos no son programados por el usuario, ya que vienen pre-programados en el
lenguaje de programación, los métodos realizan tareas típicas y comunes para todas las
aplicaciones; por eso están incluidos dentro del lenguaje de programación, esto con el fin de
liberar al usuario de la tarea de programarlos. Cada tipo de componenteelemento que presta un
servicio de comunicación cuando se diseñan interfaces. tiene sus propios métodos; debemos
tener en cuenta que los métodos solo pueden ser ejecutados en tiempo de ejecución no en
tiempo de diseño.

Ejemplo Funcion
DrawCircle(number x, number y, number r) Dibuja un círculo (en blanco) en las coordenadas
indicadas en el lienzo, con un radio dado.
DrawLine(number x1, number y1, number x2, Dibuja una línea entre las coordenadas dadas en
number y2) el lienzo
DrawLine(number x1, number y1, number x2, Dibuja una línea entre las coordenadas dadas en
number y2) el lienzo.
Clear() Borra el lienzo, sin quitar la imagen de fondo, si se
ha proporcionado
DrawPoint(number x, number y) Dibuja un punto en las coordenadas indicadas en
el lienzo