APP INVENTOR ENTORNO DE TRABAJO.

[toc]

LAYOUT DE TRABAJO.

Si seleccionamos un proyecto o creamos uno nuevo, se cargará una nueva ventana que podremos dividir en cinco partes. Lo primero a destacar es que la barra verde a cambiado y ahora donde antes podíamos abrir un proyecto tenemos el nombre del proyecto y más a la derecha una serie de botones que pasamos a describir.

BARRA DE OPCIONES.

SCREEN1: Este es el nombre que recibe por defecto la primera pantalla de nuestro proyecto, si pulsamos nos aparecerá una lista de todas las pantallas creadas, en nuestro caso solo tendremos la primera pantalla, que se crea automáticamente al crear el nuevo proyecto. Resaltar que la primera pantalla no se puede borrar ya que va ligada a la creación del proyecto y será la pantalla que una vez que esté terminada nuestra aplicación, inicie siempre en primer lugar. Añadir que tampoco se le puede cambiar el nombre a esta primera pantalla, pero si a las sucesivas pantallas que creemos.

AÑADIR VENTANA: Si pulsamos este botón, se nos abrirá una ventana donde se nos pedirá el nombre que queremos darle a la nueva pantalla, este nombre podrá ser modificado después, y no debería de contener caracteres extraños como espacios y símbolos como el # o @

ELIMINAR VENTANA: Al pulsar se eliminará la ventana que esté seleccionada en ese momento, también se eliminará todos sus componentes y bloques que pudiera contener esa pantalla.

PANTALLA DE DISEÑADOR.

DISEÑADOR: Al pulsar este botón nos mostrará un conjunto de secciones en donde podremos diseñar el aspecto de nuestra aplicación. Se trata de la sección paleta el visor componentes, de la que haremos una breve descripción.

La sección de Paleta, donde habrá una serie de componentes que se dividen en:componentes visibles, que son todos los que el usuario pueda interactuar, como botones, selectores de fecha o campos de texto, y los componentes no visibles, como relojes temporizadores, sonidos o bases de datos.

EL VISOR, este se asemeja a la pantalla de nuestro dispositivo y será donde tendremos que arrastrar y soltar los componentes de la sección paleta para ir creando el aspecto visual de nuestra aplicación. Justo por encima del visor tendremos dos opciones: Mostrar en el visor los componentes ocultos, que hará que se muestran los componentes no visibles de la sección paleta, y Marcar para previsualizar el tamaño de una tablet: está opción viene por defecto desactivada y no se puede utilizar a menos que en las propiedades de la SCREEN1 cambiemos la opción fixed a responsive. Una vez activada, podremos previsualizar en el visor nuestra aplicación a tamaño de pantalla de una tablet.

COMPONENTES: Aquí a medida que vayamos arrastrando los componentes visibles al visor, aparecerá una especie de árbol jerárquico en el que podremos ver ordenados todos los componentes arrastrado. A si por ejemplo si arrastramos un componente de alineación vertical y dentro le colocamos un componente botón, en el árbol aparecerá el botón como hijo de la alineación vertical. esto es así ya que el botón se adaptará y adoptará la forma en relación a las medidas dadas por el componente alineación vertical, es decir, todo lo que suceda al componentes alineación vertical, repercutirá en cierta medida al componente que metamos dentro.

PROPIEDADES: aquí podremos modificar las propiedades de cada componente que metamos en nuestra aplicación por ejemplo en un botón podremos cambiar el texto la fuente de la letra e incluso el color. Estas propiedades se verán con más detalle en siguientes tutoriales.

PANTALLA DE BLOQUES.

BLOQUES: si pulsamos el botón de bloques que está situado a la derecha del botón diseñador, se nos cargará una pantalla en la que estará dividida en tres partes, bloques, medios y visor, y que pasamos a describir a continuación.

Bloques: dentro de los bloques, ordenados por funciones y colores, encontramos distintos componentes para la lógica de nuestro programa, desde funciones matemáticas, variables, funciones para crear bucles o incluso para crear colores. Más abajo en la misma sección de bloques, encontraremos un árbol jerárquico que corresponderá con los componentes de la pantalla que tengamos en ese momento cargada o seleccionada. Si pulsamos con el ratón en uno de los componentes, podremos sacar el bloque correspondiente para la programación. Así por ejemplo para un botón, tendremos un bloque que controla cuando pulsamos o mantenemos pulsado dicho botón.
Un poco más abajo del árbol jerárquico, encontramos dos botones, Cambiar nombre y borrar el primero cambiara el nombre de cualquier componente situado en el árbol jerárquico y el segundo borrara cualquiera de los componentes del mismo árbol jerárquico.
Algo a destacar, es que al cambiar el nombre a cualquiera de los componentes del árbol jerárquico, si ya teníamos algún bloque que hacía uso de ese nombre, automáticamente se cambiará por sí solo.

Medios. La columna de medios, está situada más abajo de la columna de bloques, nos mostrará todos los archivos multimedia que tengamos cargados en nuestra pantalla actual se podrá borrar o subir nuevos archivos, pulsando en el botón de más abajo.

Visor. El visor es el que ocupa gran parte de la pantalla, es como un lienzo en blanco, aquí es dónde iremos arrastrando los componentes o bloques de programación a modo de un puzzle para hacer la lógica de nuestro programa.

tenemos en la esquina superior derecha una mochila, esta mochila sirve para copiar dentro grupos de bloques que hacen una función, y poder trasladarlos a distintas pantallas de la aplicación, o incluso a distintas aplicaciones, a modo de copiar y pegar. Abajo en la esquina inferior derecha, y de un color más atenuado, tenemos tres botones y una papelera, la papelera sirve para arrastrar los bloques y eliminarlos del lienzo, el botón más y menos será hacer zoom para ver más grandes los bloques, y el botón que parece un punto de mira será para centrar la pantalla con el centro de los bloques. En la esquina inferior izquierda tenemos unas signos de advertencia que serán para mostrarnos los avisos o errores estos avisos son correspondientes a zonas del programa que entran en conflicto los bloques. Ya sean bloques que aunque encajen uno dentro de otro, no es posible utilizar.
Si pulsamos en el centro de la pantalla con el botón derecho del ratón, aparecerá una serie de opciones que se pasarán a describir ahora:

1.- Deshacer. Eliminarás los últimos cambios en el en el Editor de bloques. ya sea borrar el último bloque insertado o eliminar el último movimiento de bloques

2.- Rehacer. Volverás a colocar en el Editor de bloques los últimos cambios realizados.

3.- Limpiar los bloques. En ocasiones cuando carguemos un proyecto,los bloques pueden aparecer descolocados y superpuestos, si pulsamos esta opción, nos facilitara la tarea tediosa de ordenarlos, ya que se ordenarán automáticamente.

4.- Exportar como imagen. Guardar a una imagen en formato PNG de todos los bloques de nuestro programa, de esta manera podremos compartir nuestro trabajo.

5.- Ocultar bloques. Minimizará todos los bloques de nuestro programa. Si solo queremos un grupo de bloques, tendremos que pulsar con el botón derecho del ratón encima del grupo de bloques correspondiente.

6.- Mostrar bloques. Mostrar a los bloques anteriormente ocultados.

7.- Borrar bloques. Borrará todos los bloques. Si solo queremos un grupo de bloques, tendremos que pulsar con el botón derecho del ratón encima del grupo de bloques correspondiente.

8.- Ordenar bloques horizontalmente. Ordenada de una forma horizontal en los bloques de nuestro programa

9.- Ordenar bloques verticalmente. Coordenada de una forma vertical los bloques de nuestro programa.

10.- Ordenar bloques por categoría. Esto no es ordenar a todos los bloques por categoría así podemos tener en un grupo todos los condicionales y en otro todas las variables.

11.-Paste all blocks from backpack. Se pegara en el lienzo todos los bloques que contenga la mochila.

12.-Copy all blocks from backpack. Copiar a a la mochila todos los bloques que contengan lienzo.

13.-Empty the backpack. Dejará vacía nuestra mochila de componentes.

14.-Disable workspace grid Rejilla en la pantalla: Pulsando con el botón derecho del ratón sobre la pantalla de bloques y luego «Enable Workspace Grid» («Habilitar rejilla de área de trabajo»). Pondrás una rejilla a modo de guía para situar los bloques y dejar el mismo espacio entre ellos.

15.- «Enable Snap to Grid» («Activar ajuste a cuadrícula»). Al habilitar esta opción, la esquina superior izquierda de los bloques se ajustará al punto de cuadrícula más cercano.

16.- “Disable snap to grid” (“Desactivar ajuste a cuadrícula”). Al deshabilitar esta opción, la esquina superior izquierda de los bloques no se ajustara al punto de cuadrícula más cercano.

17.-Ayuda. Si pulsamos con el botón derecho del ratón encima de un bloque y luego seleccionamos la opción ayuda del desplegable se nos abrirá una nueva ventana en el navegador con información del bloque en el que hayamos pulsado.

Con esto, este capítulo queda concluido, en el próximo capítulo construiremos nuestra primera aplicación, en la que podremos introducir un texto de dos maneras posibles, tanto hablando a nuestro dispositivo utilizando el componente ReconocimientodeVoz, que convierte nuestra voz a texto, como pulsando en el Campo de texto y utilizando la entrada del teclado. Después pulsando en el botón leer, hará que nuestro dispositivo lea el texto en voz alta. De momento y para ir viendo como sera nuestra aplicación podremos ver un adelanto pulsando en esta dirección  en la que nos direccionara a la página de Google play para descargarnos la aplicación, es totalmente gratis.