5. AppInventor - Mapas y Reusar pantalla

En el final de la Sesión #3 de Navegación y Listas vimos como abrir una nueva pantalla pasándole información sobre lo que el usuario había seleccionado.
En ese caso teníamos una lista donde podíamos seleccionar un elemento (el país) y abría una nueva pantalla con ese valor inicial.

Vamos a crear esa segunda pantalla, qué contendrá por ejemplo un mapa, pero lo que muestre el mapa cambiará según el valor inicial que haya seleccionado el usuario.

1) Mismo diseño, Distinto contenido

Vamos a crear nuestra nueva pantalla, y llamarla por ejemplo "Detalle".

Para empezar le pondremos únicamente una Etiqueta donde mostraremos el valor inicial que ha recibido (para repasar el concepto de valor inicial revisar la Sesión #3).

Ponemos pues la Etiqueta en el Diseñador, y en los Bloques le ponemos el texto que recibamos como valor inicial:

Ahora podemos probar la app, seleccionar un elemento de la lista y veremos que esta pantalla nos muestra el nombre que hemos seleccionado anteriormente.

Si volvemos hacia atrás y seleccionamos otro país de la lista, de nuevo cambiará la etiqueta y nos saldrá el texto que hemos elegido.

Esto resulta muy útil para tener un único diseño y elementos en la pantalla, pero que pueden variar según qué contenido en concreto tenemos que mostrar.

Esto se puede extender aún más cargando el contenido de la base de datos según el valor inicial.

Por ejemplo: En el Whatsapp, la pantalla de conversación entre 2 personas es siempre la misma, pero según qué persona selecciones para hablar, te mostrará unos mensajes u otros, específicos de la persona seleccionada.

Por ahora vamos a hacer un ejemplo sencillo con un mapa, donde según el país que el usuario elija, mostraremos una localización u otra.

2) Mapas

Primero de todo vamos a añadir el Mapa al Diseñador. Lo encontraremos en la Paleta > Mapas

Lo arrastramos a la pantalla y veremos que nos aparece un Mapa!

Con el mapa seleccionado, en Propiedades encontraremos distintas configuraciones, la más importante siendo CenterFromString, donde le pondremos las coordenadas de la ubicación a mostrar. Os animo a revisarlas todas y probar las que más os interesen.

Para probarlo podemos poner como coordenadas la Biblioteca Can Fabra: 41.434193, 2.191403.

Ahora tenemos el mapa centrado en Barcelona, pero queremos que según el país que el usuario seleccione, mostraremos una u otra localidad.

Por ejemplo, podemos aceptar que si selecciona España > mostremos Barcelona, pero cómo hacemos que si selecciona Francia > mostremos París?

Para ello, deberemos montarnos un bloque IF / ELSE donde tengamos en cuenta todos los posibles valores iniciales y ajustemos las coordenadas del mapa acorde a la ciudad que queramos mostrar.

El resultado para solamente esos dos países sería algo así: