Saltar la navegación

3.2. ¡Da la cara!... de tu app, claro

Diccionario

Disposición

La imagen muestra la parte de la paleta de componentes de App Inventor correspondiente a la categoría de disposición

Definición:

Es un componente de App Inventor 2 que sirve para situar en una posición precisa los elementos que formarán parte de una pantalla.

Ejemplo:

Para colocar dos botones a la misma altura en la pantalla he tenido que utilizar una disposición horizontal.

Rétor dice

A estas alturas ya tienes una idea clara de cómo es la imagen de tu app, pero todavía está sobre un papel y eso no sirve para manejarla desde un dispositivo móvil. Es el momento de recurrir a App Inventor para convertirla en realidad.

En el entorno de desarrollo de App Inventor tienes que empezar por trasladar los elementos que forman la interfaz de usuario arrastrando desde la paleta al visor del diseñador los componentes que necesites para posteriormente configurar sus propiedades antes de pasar a programarlos.

Por tanto, la siguiente fase consistirá en hacer el diseño digital de la app utilizando para ello el diseñador de App Inventor.

Ponte de nuevo con tu pareja y ¡manos a la obra!

1. Más pantallas por favor

Hay que trabajar en pareja.

Como es lógico, una vez que accedéis a App Inventor, lo primero que hay que hacer es crear un nuevo proyecto donde poder trabajar. Dadle el nombre de "Agenda escolar previa".

A continuación, dad de alta las dos pantallas que vais a necesitar, dónde, más adelante, trasladaréis los bocetos que habéis creado anteriormente.

Lumen dice ¿Una ayudita con las pantallas?

Puede que al entrar en App Inventor y crear vuestro proyecto hayáis visto en la parte superior izquierda un botón desplegable con el nombre de "Screen1" y hayáis pensado que tenía algo que ver con la creación de pantallas. Siento deciros que no es así, pero no os preocupéis por que la opción correcta está justo al lado, y se llama "añadir ventana", tal como podéis ver en la siguiente imagen.

La imagen muestra la parte superior izquierda de la interfaz de App Inventor donde se localiza la opción de nueva ventana rodeada por una elipse de color rojo para destacarla

App Inventor llama "ventanas" a cada pantalla, de ahí que sea la opción "añadir ventana" que se localiza justo al lado del botón que pone "Screen1", la que debéis emplear para crear una pantalla adicional.

2. Gestión de pantallas

Continuamos trabajando en pareja.

Dado que las pantallas son fundamentales en una aplicación móvil, sería interesante que les dedicarais un momento para centraros en algunos detalles de su gestión.

Borrar una pantalla

Tratad de ver si podéis borrar la pantalla que habéis añadido a la app.

Describid los pasos que sigáis a lo largo del intento. Podéis escoger la forma de hacerlo entre las múltiples opciones disponibles:

  • Escrito en vuestro cuaderno.
  • Mediante capturas de pantalla que podáis enseñar.
  • Comentándolo con vuestros colegas.
  • Grabando un audio con el móvil.
  • E incluso de alguna manera soprendente que se os ocurra. 

A continuación probad a borrar la Screen1 a ver qué pasa. Describidlo también.

Cambiar el nombre de una pantalla

Si habéis conseguido borrar la pantalla en el apartado anterior, volved a crear otra y una vez que lo hayáis hecho, tratad de cambiarle el nombre que le hayáis dado.

Sacad conclusiones de lo que habéis logrado. Podéis expresarlo la forma que queráis, hay múltiples opciones disponibles:

  • Escrito en vuestro cuaderno.
  • Comentándolo con vuestros colegas.
  • Grabando un audio con el móvil.
  • E incluso de alguna manera soprendente que se os ocurra. 

Propiedades de las pantallas

Comparad las propiedades de la "Screen1" con las de la segunda pantalla que habéis creado y expresad las diferencias que encontréis. Para ello, disponéis de varias alternativas:

  • Escrito en vuestro cuaderno.
  • Comentándolo con vuestros colegas.
  • Grabando un audio con el móvil.
  • E incluso de alguna manera soprendente que se os ocurra.

Kardia dice Seguid, ¡No os cortéis!

Para saber más sobre las propiedades de las pantallas podéis dedicar un rato a cambiar el valor de las distintas propiedades a ver qué pasa.

Si queréis, podéis registrar vuestros logros para tenerlos a mano en caso de que fuera necesario.

3. Venga valientes ¡Atreveos con App Inventor!

Seguimos trabajando en pareja.

Ahora que habéis creado las dos pantallas que necesitáis, es el momento de llenarlas de componentes.

Para ello, por cada pantalla, no tenéis más que arrastrar desde la paleta hasta soltar en el visor aquellos componentes que creáis necesarios para que vuestra interfaz quede tal y como la dibujasteis anteriormente en el boceto y cumpla con la función que estaba prevista.

Lumen dice Os aconsejo que...

Por si no os habéis dado cuenta todavía, vais a necesitar algunos componentes con los que aún no habéis trabajado y que podéis empezar a utilizar ya.

Veréis que sin ellos os será imposible conseguir lo que buscáis, por lo que os voy a aconsejar sobre cuáles podéis emplear, luego me contáis qué tal os ha ido con ellos.

Para introducir datos

Cuando tengáis que ofrecer la opción al usuario de escribir algo, os aconsejo que empleéis el componente "CampoDeTexto" que podéis encontrar en el apartado "interfaz de usuario" de la paleta del diseñador.

La imagen muestra la apariencia del componente campo de texto en la la paleta del diseñador de App Inventor

Para seleccionar una fecha

Cuando tengáis que ofrecer la opción al usuario de elegir una fecha, os aconsejo que empleéis el componente "SelectorDeFecha" que podéis encontrar en el apartado "interfaz de usuario" de la paleta del diseñador.

La imagen muestra la apariencia del componente selector de fecha de la paleta del diseñador de App Inventor

Para almacenar datos

Cuando tengáis que almacenar algún dato de forma permanente en el dispositivo móvil, os aconsejo que utilicéis el componente "tinyBD" que encontraréis en el apartado "almacenamiento" de la paleta del diseñador.

La imagen muestra la apariencia del componente tinyBD en la la paleta del diseñador de App Inventor

4. Es el turno de las propiedades

Avanzamos nuevamente en pareja.

Una vez arrastrados los componentes, ahora es el momento de que modifiquéis su apariencia hasta que quede como habíais pensado.

Para ello, en cada una de las dos pantallas que habéis creado, introducid las "disposiciones" que necesitéis para colocar cada elemento en su sitio y después modificad las propiedades de cada componente hasta que obtengáis la apariencia que buscáis.

Tratad de ser creativos y marcad vuestro estilo.

La imagen muestra la parte de la paleta de componentes de App Inventor correspondiente a la categoría de disposición

Definición:

Es un componente de App Inventor 2 que sirve para situar en una posición precisa los elementos que formarán parte de una pantalla.

Ejemplo:

Para colocar dos botones a la misma altura en la pantalla he tenido que utilizar una disposición horizontal.

Lumen dice ¿Lo explico algo más?

Una vez que hayáis trasladado los componentes a cada pantalla habréis comprobado que quizás no quedan como esperabais.

La imagen muestra el aspecto inicial, previo a la configuración, de los componentes arrastrados a una pantalla

Eso es debido, por un lado, a que cada elemento tiene unas propiedades que os permiten configurar su apariencia, y por otro, a que, a veces, hay que introducir una determinada "disposición", desde el apartado del mismo nombre de la paleta del diseñador, para crear los espacios necesarios en la pantalla, tanto en horizontal como en vertical o formando una cuadrícula en forma de tabla.

La imagen muestra una pantalla de un móvil que contiene varios componentes que han sido configurados para que muestren el aspecto adecuado

Supongo que ya sabéis que los componentes necesarios se arrastran desde el apartado de la paleta que corresponda hasta soltarlos en el visor.

Una vez que se acaba de configurar el espacio visible del visor, debéis situaros en el apartado “componentes” para que vayáis pinchando sobre cada uno de los elementos que habéis dispuesto en vuestra interfaz y os dediquéis a modificar sus propiedades hasta que obtengáis la apariencia que buscáis.

La imagen muestra la parte de la interfaz de usuario de App Inventor donde se ubica la opción de configuración de las propiedades de los componentes

5. Intimando con vuestros nuevos componentes

La imagen muestra las propiedades de los componentes de App Inventor campo de texto, disposición vertical, selector de fecha y tinyDB

Seguimos en pareja.

Ya os habréis dado cuenta de que hay algunas propiedades que necesariamente habéis tenido que modificar porque estaban directamente relacionadas con la apariencia de vuestros componentes en la interfaz, mientras que hay otras que quizás no hayáis tenido que utilizar, pero no por ello dejan de ser igual de útiles.

Es precisamente el segundo caso el que vais a trabajar ahora. Centraros en los nuevos componentes que hayáis utilizado y dedicaros a explorar sus propiedades cambiándolas para ver qué pasa.

  1. Escribid en vuestro cuaderno los cambios que observáis cuando modificáis esas propiedades
  2. Destacad en lo que habéis escrito las propiedades que creáis que serán más útiles a la hora de definir vuestra app, explicando el porqué.