L'écran Vue de données (Data View) nous permet de créer des applications plus complexes telles que: Guides touristiques, Guides d'hôtels / restaurants et toutes les applications qui contiennent de nombreuses données et images à afficher et à organiser en catégories.
Ce type d'écran nous permet de créer et d'importer des bases de données sur notre application et d'afficher ces données de différentes manières sous la forme de «vues».
Si nous cliquons sur le bouton vert, sur la vue, nous pouvons renommer, cloner, supprimer ou faire la vue en 1ère vue de la vue des données.
Pour la première étape, nous devons utiliser un écran de vue de données et créer une BASE DE DONNÉES.
La création de la base de données est expliquée dans la section Base de données ici.
REMARQUE: Une fois que la base de données est créée, les différentes vues seront disponibles en fonction du type de données utilisées dans la base de données.
Si nous n'avons pas de type de champ Emplacement (Location) ou type Date, nous ne serons pas en mesure de choisir une Carte, une Réalité Augmentée ou une vue Calendrier.
Expliquons comment afficher les données de la base de données dans les différents types de vues.
Nous pouvons créer ce type de base de données avec 4 champs:
Villes -> type Texte
Images -> type Image locale
Info -> type Texte
Emplacement -> type Emplacement
Une fois que nous avons rempli toutes les cellules de la base de données avec les ressources (Textes, Images, Coordonnées), nous sommes prêts à afficher ces données dans certaines vues. Dans ce cas, nous devons ajouter une vue, telle que celle de l'image suivante:
LISTE DE VUE
Dans cet exemple, nous voulons créer une liste de villes afin que, lorsque l'utilisateur clique sur le bouton d'une ville spécifique, il sera redirigé vers les détails de cette Ville où nous insérerons les informations suivantes:
Nom de Ville
Image de la ville
Ville Description
Emplacement de la ville
Nous ajouterons les vues suivantes, en fonction du type de données que nous voulons montrer pour chaque ville.
Comme on peut le voir dans l'image ci-dessus, la vue affiche de nouveaux éléments à droite (icônes roses) qui représentent les champs de base de données que nous avions déjà insérés (villes, images, informations, emplacement).
Tout ce que vous devez à faire est de concevoir la mise en page en faisant glisser les éléments de la base de données vers l'écran et la liste affiche les répétitions des éléments insérés autant de fois que les registres, à partir de votre base de données:
Dans l'exemple ci-dessus, nous avons traîné à l'écran les éléments suivants dans l'ordre mentionné:
- Tableau avec 1 cellule. Montré en vert
- Eléments de texte de base de données dynamiques (Villes). Montré en jaune. Le résultat sera comme suit:
Avec plus de registres (villes) dans notre base de données, la liste serait plus longue.
VUE DÉTAIL
Une fois que nous avons créé la liste précédente, nous allons inclure un lien sur chaque registre qui redirige vers la vue Détail pour ce registre.
C'est la raison pour laquelle nous allons assigner l'action: Go to View -> Détail_2 au texte de la Ville afin que, lorsqu'un utilisateur clique sur le nom de la ville, le détail de cette ville sera ouvert pour montrer tout les informations spécifiques.
La vue Détail, contrairement à la vue Liste, n'apparaît pas plusieurs lignes dans une base de données. Il affiche seulement un registre / rangée.
Vous pouvez faire glisser vers l'écran les éléments suivants pour créer l'apparence souhaitée de la vue:
- Eléments statiques (toujours gris):
- Eléments de base de données dynamiques (toujours rose):
Tout ce que nous devons faire est de concevoir la disposition de l'écran en faisant glisser les éléments vers l'écran juste comme dans la vue Liste.
Dans l'exemple ci-dessus, nous avons traîné à l'écran les éléments suivants dans l'ordre mentionné:
- Eléments de texte de base de données dynamiques (Villes). Affiché en bleu clair.
- Eléments d'image de base de données dynamiques (Images). Montré en rose.
- Eléments de texte de base de données dynamiques (Info). Montré en jaune.
- Une table avec 2 cellules. Montré en vert.
- Un élément d'image statique qui a une action qui lui est attachée, lui permettant de lier la vue de Carte (rectangle rouge), affichée en rouge.
Le résultat sera quelque chose comme ceci:
Donc, lorsque vous avez ouvert une vue Détail, il affichera toujours le contenu d'un registre exclusif. Si vous avez appelé la vue détaillée depuis le bouton «Madrid» de la vue Liste, la vue Détail affiche uniquement les données du registre / rangée de Madrid de la base de données.
VUE DE CARTE
Les éléments VUE DE CARTE, à la fois statiques ou à partir de la base de données, sont traînés dans la balise blanche sur la carte, comme indiqué ci-dessous.
Dans ce cas, la vue de carte nous montre la capitale d'un pays. Le pays affiché dépend de la vue Détail que nous avons appelée la Vue de Carte.
Dans cet exemple, si nous appelons la carte de la Vue Détail «Madrid City», nous verrons la carte de Madrid.
Dans la balise blanche, nous insérerons certains éléments:
- Eléments d'image de base de données dynamiques (Images). Montré en rose.
- Une table avec 2 cellules, présentée en vert.
- Un élément d'image statique, inséré dans le tableau, qui a une action qui lui est associée, permettant de lier la vue Web. Montré en rouge.
Un élément d'image statique, inséré dans la table, qui a une action qui lui est attachée, permettant de lier la vue de réalité augmentée, montré en jaune.
Le résultat sera quelque chose comme ceci:
Pour savoir comment créer une application GPS, consultez l'article connexe: “Comment créer une application GPS”
VUE DE RÉALITÉ AUGMENTÉE
Comme nous l'avons vu ci-dessus, nous avons attribué à l'icône droite du tableau dans la vue Carte l'action: Go to View ar_1.
Ainsi, lorsque l'utilisateur clique sur ce bouton, il sera redirigé vers une vue de réalité augmentée.
La Réalité Augmentée recherchera des informations sur l'endroit où nous traversons le GPS et allumera la caméra du téléphone pour montrer ce que nous voyons à l'avance.
REMARQUE: la réalité augmentée n'est pas compatible avec HTML5
Le résultat sera quelque chose comme ceci:
VUE DE WEB
Nous avons déjà assigné l'action: Go to View: Web_1 à une icône dans la vue de Carte.
De cette façon, lorsque l'utilisateur cliquera sur cette icône, il sera redirigé vers une nouvelle vue, la vue Web, pour voir une page Web liée au registre (Ville) pour laquelle nous voulons avoir les informations.
D'abord, nous ajouterons une autre colonne à la base de données.
Ce sera une colonne de type Texte que nous afficherons dans l'application.
Dans cet exemple, nous ajouterons un site Web avec des informations touristiques, liées à chaque ville que nous avons dans la base de données.
Lorsque nous ouvrons la vue Web, nous verrons dans le champ clé tous les champs de type Texte de la base de données.
Nous allons choisir d'afficher le WEB, de montrer les sites Web insérés dans la base de données.
Le résultat sera quelque chose comme ceci:
VUE DE GALERIE
Pour créer une Vue de Galerie, nous créerons un simple Écran de liste d'options avec 5 boutons. Chaque bouton va nous conduire à une vue spécifique de la galerie de son propre écran de vue des données.
Nous allons donc créer 5 pages de données («Rome», «Madrid», «Paris», «Berlin», «Dublin»). Chaque page aura une vue de galerie qui affichera des images à partir d'une base de données partagée (dans notre exemple «Galerie»).
Nous ajouterons des images à la base de données. Comme nous avons 5 villes à afficher, nous allons créer 5 nouveaux registres (colonnes) de type Image locale, à afficher dans notre vue de galerie. Chaque colonne contiendra les images d'une ville spécifique:
Nous créerons alors 5 vues de galerie dans chaque vue de données, une pour chaque ville.
Sur chaque vue de la galerie, on vous demande quel domaine vous souhaitez afficher. Donc, pour l'écran de visualisation de données "Madrid", nous créerons une vue de la galerie qui montre la colonne Madrid:
Une fois que nous avons créé les 5 écrans de visualisation de données et, sur chaque écran, une vue de galerie a relié les colonnes de Rome, de Madrid, de Paris, de Berlin et de Dublin, tout ce que nous devons maintenant faire est de créer l'écran de la liste des options et de lier les boutons à chaque image de Photo créée:
Le résultat sera quelque chose comme ceci:
Chaque image peut être agrandie en la tapant. Vous pouvez glisser dans la galerie à la fois à gauche et à droite.
REMARQUE: la vue de la galerie ne peut être utilisée qu'avec des images locales. Cette vue n'est pas compatible avec les images stockées à distance (CMS / Cloud).
VUE DE CALENDRIER
Imaginez que vous voulez un écran qui affiche toutes vos dates importantes sur un calendrier, comme des anniversaires ou des événements, et que lorsque vous cliquez sur une certaine date, tous les détails sont affichés pour cette date. Bien, la vue Calendrier est parfaite pour cette fonctionnalité.
Nous suivrons l'exemple avec les villes et nous créerons un calendrier qui montrera tous les circuits disponibles pour chaque ville dans le calendrier.
Commençons à créer un écran de vue des données, appelés «Événements/Events» et définissons sa base de données avec 4 champs:
Ville/City (type Texte)
Information de l'Événement/Info of Event (type Texte)
Image/Image (type Image Locale)
Événements/Events (type Date)
La base de données peut ressembler à ceci:
Maintenant, nous créons une nouvelle vue, type: Vue de Calendrier:
Dans l'écran Calendrier, nous devrons choisir le champ de la date de notre base de données comme indiqué dans l'image suivante.
Si nous avons seulement 1 champ de type: Date, nous aurons déjà sélectionné ce champ dans la "Vue Calendrier" qui a été créée.
Mais ne pas oubliez que vous pourriez avoir une base de données avec plusieurs colonnes, événements, rendez-vous etc. et créer autant d'écrans ou de vues que les collections de dates que vous avez.
L'étape suivante consiste à utiliser les éléments qui peut être traîné pour concevoir la vue Détail pour chaque date.
Nous avons 4 éléments (colonnes) à montrer.
Nous créons donc ce qui suit:
Dans l'exemple ci-dessus, nous avons traîné vers l'écran les éléments suivants dans l'ordre indiqué:
- Un élément de texte dynamique qui correspond à notre champ "Ville" dans la base de données. Montré en rouge.
- Un élément d'image dynamique qui correspond à notre champ "Image" dans la base de données. Montré en rose.
- Un élément de texte dynamique qui correspond à notre champ "Événements", type: date, dans la base de données. Montré en jaune.
- Un élément de texte dynamique qui correspond à notre champ "Information de l'Événnement" dans la base de données. Montré en vert.
Donc, maintenant, lorsque nous ouvrons notre vue des données de l'écran des événements, l'écran du calendrier s'affiche comme s'il se trouvait dans l'image ci-dessous.
Si nous cliquons sur l'une des dates en surbrillance, nous allons passer à l'écran que nous venons de concevoir, ce qui devrait ressembler à ceci:
Rappelez-vous que si dans notre base de données nous avons une certaine date répétée pour, dans ce cas, des visites différentes le même jour / date, lorsque nous cliquons dessus à partir d'une vue d'un calendrier, nous afficherions deux registres comme cette image sur la vue Détail de la vue du calendrier:
