La pantalla Visor de Datos nos permite construir aplicaciones más complejas, tales como: Guías Turísticas, Guías de Hotel / Restaurantes y cada App que contenga muchos datos e imágenes para enseòar y organizar en categorías.
Este tipo de pantalla nos permite crear e importat bases de datos a nuestra app y que muestran estos datos de diferentes maneras, en forma de ‘vistas’.
Las vistas pueden ser: The views can be :
Vista Lista
Vista Detalle
Vista Mapa
Vista Realidad Aumentada
Vista Web
Vista Galería
Vista Calendario
Si hacemos clic en el botón verde, un aumento en la vista, podemos Renombrar, Clonar, Eliminar o hacer la vista como primera vista de la vista de datos.
Si pulsamos el botón verde, arriba en la vista, podemos Renombrar, Duplicar, Eliminar o poner la vista como primera vista del Visor de Datos.
Como primer paso, tenemos que utilizar una pantalla de Visor de Datos y crear una BASE DE DATOS.
La creación de la Base de Datos está explicada en la sección Base de datos aquí.
NOTA: Una vez creada la base de datos, las diferentes vistas estarán disponibles en función del tipo de datos utilizados en la base de datos.
Si no tenemos un tipo de campo Localización o tipo Fecha, no será posible elegir una Vista Mapa, Realidad Aumentada o una vista Calendario.
Vamos a explicar cómo mostrar los datos de la bases de datos a través de los distintos tipos de vistas.
Podemos crear este tipo de base de datos con 4 campos:
Cities--> tipo Texto
Images--> tipo Imagen Local
Info--> tipo Texto
Location--> tipo Localización
Una vez rellenado todas las celdas de la base de datos con los recursos (Textos, Imágenes, Coordenadas) estamos listos para enseñar los datos en algunas vistas. En este caso tenemos que añadir una vista como en la siguiente imagen:
VISTA LISTA
En este ejemplo queremos crear una lista de Ciudades de forma que, cuando el usuario pulse el botón de una ciudad específica, será redirigido a los detalles de esa ciudad, donde vamos a insertar la siguiente información:
Nombre Ciudad
Imagen Ciudad
Descripción Ciudad
Ubicación Ciudad
Vamos a añadir las siguientes vistas, basadas en el tipo de datos que queremos mostrar para cada ciudad.
Como podemos ver en la imagen anterior, la vista muestra nuevos elementos a la derecha (iconos rosa) que representan los campos de la base de datos que ya habíamos insertado (Ciudades, Imágenes, Información, Localización).
Todo lo que tienes que hacer es crear el diseño arrastrando los elementos de la base de datos en la pantalla y la vista de lista generará repeticiones de los elementos insertadolos tantas veces cuanto son los registros, para mostrar desde la base de datos:
En el ejemplo anterior hemos arrastrado en la pantalla los siguientes elementos en el orden mencionado:
- Tabla con 1 celda. Mostrada en verde.
- Elemento Dinámico Texto de la base de datos (Cities). Mostrado en amarillo.
El resultado será algo parecido a lo siguiente.
Con más registros (ciudades) en nuestra base de datos la lista sería más larga.
VISTA DETALLE
Una vez creada la Lista Vista, incluiremos un enlace en cada registro que redirige a la Vista Detalle para ese registro.
Esta es la razón por la que vamos a asignar al texto Ciudades la acción: Abrir Vista: Detail_2 de manera que, cuando un usuario pulse el nombre de la ciudad, se abrirán los detalles de esta ciudad para mostrar toda la información específica.
La Vista Detalle, a diferencia de la vista lista, no muestra muchas filas de una base de datos. Sólo muestra un registro/fila.
Puedes arrastrar en la pantalla los siguientes elementos para crear el aspecto de la vista deseado:
• Los elementos Estáticos (siempre grises):
• Los elementos Dinámicos de la base de datos (siempre rosa):
Todo lo que tenemos que hacer es crear el diseño de la pantalla arrastrando los elementos en la pantalla al igual que en la Vista Lista:
En el ejemplo anterior hemos arrastrado en la pantalla los siguientes elementos en el orden mencionado:
- Elementos Dinámico Texto de la base de datos (Cities). Mostrado en color azul claro.
- Elementos Dinámico Imagen de la base de datos (Images). Mostrado en color rosa.
- Elementos Dinámico Texto de la base de datos (Info). Se muestra en amarillo.
- Una Tabla con 2 celdas. Mostrada en verde.
- Un Elemento Estático Imagen que tiene asignada una acción que permite enlazarla con la vista mapa (rectángulo rojo). Mostrado en rojo.
El resultado será algo como esto:
Así que cuando vas a abrir una Vista Detalle en una pantalla, esta siempre va a mostrar el contenido de un registro exclusivo. Si llamas la Vista Detalle desde el botón "Madrid", la Vista Detalle sólo mostrará los datos del registro/fila de la base de datos “Madrid”.
VISTA MAPA
Los elementos de la VISTA MAPA, tanto estáticos como los de la base de datos, se arrastran en la etiqueta blanca en el mapa como en la siguiente imagen.
En este caso, el mapa nos enseña la Capital de un País. El País que se enseña dependerá de que Vista Detalle llamamos la Vista Mapa.
En este ejemplo, si llamamos el mapa desde la Vista Detalle “Madrid City”, visualizaremos el Mapa de Madrid.
En la etiqueta blanca insertaremos algunos elementos:
- Elemento Dinámico Imagen de la base de datos (Imágenes). Mostrado en color rosa.
- Una Tabla con 2 celdas. Mostrada en verde.
- Un Elemento Estático Imagen, insertado en la tabla, que tiene una acción asignada que permite vincularla a la Vista Web. Mostrado en rojo.
- Elemento Estático Imagen, insertado en la tabla, que tiene una acción asignada, que permite vincularla a la Vista Realidad Aumentada. Mostrado en amarillo.
El resultado será algo como esto:
Para aprender a crear un App basada en GPS, vease el artículo relacionado: "Como crear una App basada en GPS"
VISTA REALIDAD AUMENTADA
Como visto anteriormente, hemos asignado al icono a la derecha de la tabla en la vista mapa la acción: Abrir Vista: ar_1.
Así que, cuando el usuario pulse el botón, será redirigido a una Vista Realidad Aumentada.
La realidad aumentada buscará informaciones sobre los lugares donde estemos, a través del GPS y activará la cámara del móvil para enseñarnos lo que vemos delante.
NOTA: La realidad aumentada no está soportada por HTML5
El resultado será algo como esto:
VISTA WEB
Anteriormente hemos asignado a un icono en la Vista Mapa la acción: Abrir Vista: Web_1.
De esta forma, cuando el usuario pulse el icono, será redirigido a una nueva vista, la Vista Web, para ver una página web relacionada con el registro (City) por el que queremos tener la información.
Primero vamos a añadir otra columna a la base de datos.
Será una columna tipo texto que vamos a enseñar en la aplicación.
En este ejemplo vamos a añadir una URL de una página Web con informaciones turísticas, relacionada con cada ciudad que tenemos en la base de datos.
Cuando abrimos la Vista Web, veremos en el Campo Clave todos los campos tipo texto que tenemos en la base de datos.
Optamos por mostrar el campo WEB, para enseñar las páginas web insertadas en la base de datos.
El resultado será algo como esto:
VISTA GALERÍA
Para crear una Vista Galería crearemos una pantalla tipo Lista de opciones con 5 botones. Cada botón nos va a llevar a una Vista Galería distinta de una pantalla Visor de Datos distinta.
Por esto vamos a crear 5 pantallas tipo Visor de Datos ("Rome", "Madrid", "Paris", "Berlin", "Dublin"). Cada página tendrá una Vista Galería que enseña imágenes de una base de datos compartida (en nuestro ejemplo " Gallery ").
Añadiremos unas imágenes a la base de datos. Ya que tenemos 5 ciudades para mostrar, vamos a crear 5 nuevos registros (columnas) tipo Imagen Local, para enseñar en nuestra Vista Galería.
Cada columna tendrá las imágenes de una ciudad específica:
Crearemos entonces 5 Vistas Galería en cada Visor de Datos, uno para cada ciudad.
En cada Vista Galería se te pregunta qué campo deseas mostrar.
Así que para el Visor de Datos "Madrid", vamos a crear una Vista Galería que enseña la columna Madrid:
Una vez que tengamos los 5 Visor de Datos creados y en cada pantalla una Vista Galería, enlazada a la columna “Rome”, “Madrid”, “Paris”, “Berlin” y “Dublin” respectivamente, todo lo que debemos hacer es crear la pantalla de la Lista de Opciones y enlazar los botones a cada una de las pantallas con Galería creadas:
El resultado será algo como esto:
Puedes deslizar las imágenes para ir pasando de una a otra. Presionando cada imagen se permite su ampliación.
NOTA: La vista galería sólo puede utilizarse con Imágenes Locales. Esta Vista no es compatible con las imágenes almacenadas remotamente (CMS / Cloud).
VISTA CALENDARIO
Imagina que deseas tener una calendario que marque enlaces para fechas concretas, tal como cumpleaños o eventos. Ésta vista permite ésta acción. Puedes vincular cada fecha a una nueva página o vista que describa los datos relevantes a dicha fecha.
Vamos a seguir el ejemplo con las Ciudades y vamos a crear un calendario que mostrará todas las Routas Turisticas disponibles para cada Ciudad en el calendario.
Empezamos creando una pantalla tipo Visor de Datos, llamada " Events " y definimos su base de datos con 4 campos:
- City (tipo Texto)
- Info Event (tipo Texto)
- Image (tipo Local Imagen)
- Events (tipo Fecha)
La base de datos podría ser algo como esto:
Ahora vamos a crear una nueva Vista, tipo Vista Calendario:
En la Vista Calendario tendremos que elegir el campo de la fecha de nuestra base de datos como en la siguiente imagen.
Si tenemos un único campo tipo Fecha, entonces tendremos ya seleccionado ese campo en la "vista Calendario" creada.
Pero ten en cuenta que podrías tener una base de datos con muchas columnas de eventos, citas, etc .. y crear tantas pantallas o vistas cuantas son las colecciones de fechas que tienes.
El siguiente paso es utilizar los elementos arrastrables para diseñar la vista detalle por cada fecha.
Tenemos 4 elementos (columnas) para mostrar.
Por esto vamos a crear el siguiente:
En el ejemplo anterior hemos arrastrado en la pantalla los siguientes elementos en el orden indicado:
- Un Elemento Dinámico Texto que corresponde a nuestro campo “City” en la base de datos. Mostrado en color rojo.
- Un Elemento Dinámico Imagen que corresponde a nuestro campo “Image” en la base de datos. Mostrado en color rosa.
- Una Tabla con 2 celdas. Mostrada en verde.
- Un Elemento Dinámico Texto que corresponde a nuestro campo “Events”, tipo fecha, en la base de datos. Mostrado en color amarillo.
- Un Elemento Dinámico Texto que corresponde a nuestro campo “Info Event” en la base de datos. Mostrado en color verde.
Así que a la hora de abrir nuestra pantalla “Events” Visor de Datos, la vista calendario se mostrará como en la imagen siguiente.
Si pulsamos cualquiera de las fechas subrayadas, seremos llevados a la pantalla diseñada anteriormente, que debería tener este aspecto.
Recuerda que si en nuestra base de datos tenemos una determinada fecha repetida por, en este caso, diferentes rutas en el mismo día / fecha, cuando vamos a pulsarla desde una vista calendario nos enseñará dos registros en la vista detalle de la vista calendario, como en la siguiente imagen:
