interfaz de MIT App Inventor

PANTALLA DE DISEÑADOR

1. La palette contiene todos los elementos que podemos insertar en nuestra aplicación. Hay elementos gráficos como cuadros de texto, botones, lienzo de dibujo (Canvas) y elementos que no se ven en la pantalla del móvil, como base de datos (TinyDB), acelerómetro, cámara de vídeo, etc.
2. Viewer: El visor de la pantalla, simula la apariencia visual que tendrá la aplicación en el móvil. Para añadir un elemento a la pantalla hay que arrastrarlo desde la paleta y soltarlo en el visor. Los elementos que no tengan visibilidad hay que arrastrarlos también al viewer y automáticamente se desplazarán debajo de él bajo el epígrafe “Non-visible components”
3. Components  muestra la lista de los componentes que se han colocado en el proyecto. Cualquier componente que haya sido arrastrado y soltado desde la paleta al visor aparecerá ahí. Si se quiere borrar alguno es en la lista de componentes donde está el botón que permite borrarlo.
4. Media muestra las distintas imágenes y sonidos que estarán disponibles para el proyecto. Cualquier archivo de imagen o audio que se quiera usar en la aplicación hay que insertarlo usando este apartado para que esté disponible.
5. Properties: cada vez que en el Viewer se seleccione un componente, en Properties aparecerán todos los detalles que se puedan cambiar de ese componente. Por ejemplo, al hacer clic sobre un componente TextBox se podrá cambiar en Properties su color, texto, fuente, etc. Para aquellos que hayan usado antes entornos de desarrollo del tipo de Visual Studio en Windows o Gambas en Linux le será muy familiar esta forma de trabajar.

PANTALLA EDITOR DE BLOQUES DE PROGRMACIÓN

Esta es la pantalla que usaremos para hacer los programas que interaccionan con el interfaz gráfico. Se puede apreciar como está dividida en dos partes muy claras: un enorme lienzo en “blanco” a la derecha donde se irán arrastrando los bloques de programación y a la izquierda los menús que dan acceso a esos bloques.

El menú está formado por tres pestañas: Built-In, My  Blocks y Advanced, y bajo cada una de ellas aparecen a su vez distintos menús que permitirán seleccionar los bloques disponibles en cada caso.

1. Built-In contiene los bloques que componen el lenguaje de programación propiamente dicho, distribuidos en las secciones Definition, Text, Lists, Math, Logic, Control y Colors.
2. My Blocks ya se ha nombrado anteriormente y contendrá una lista de los elementos que hayan sido colocados en la pantalla Viewer del diseñador para poder acceder mediante el programa a sus propiedades y eventos
3. Advanced es una pestaña que permite acceder de forma global a algunas propiedades comunes a todos los elementos que hemos colocado en el Viewer y que sean de un mismo tipo. Por ejemplo, al colocar un par de botones aparecerá “Any Button” y se podrán cambiar ahí algunas propiedades que afecten simultáneamente a los todos los botones.

En la parte superior derecha del editor de bloques de programación se pueden ver también los botones que dan acceso a conectar con un teléfono Android que estuviera enchufado al ordenador o lanzar el emulador.