Grilles de données
Le widget Grille de données affiche les enregistrements de la base de données sous forme de grille. Les grilles de données sont affichées sous forme de cellules dans une grille ou un tableau.
Lors de la création de votre grille de données, la cellule supérieure gauche affichera les noms des champs de votre base de données. Les cellules supplémentaires seront affichées avec un remplissage gris. Lorsque vous simulez votre prototype, les cellules supplémentaires sont remplies avec les enregistrements de votre base de données.
Affichage des fiches de données dans une grille de données
Apprenez à afficher les fiches de données sous forme de grille avec une grille de données dans vos prototypes interactifs. Faisons-le pas à pas :
- Dans un nouveau prototype Web, créez une nouvelle base de données en cliquant sur l’icône « + » dans la palette des bases de données. Dans la boîte de dialogue qui s’affiche, donnez un nom à votre base de données. Pour correspondre à notre exemple, nommez-la « Liste de contacts ».
- Ajoutez des champs à votre base de données en cliquant sur l’icône « + » sur le côté droit. Pour correspondre à notre exemple, créez les champs suivants : Nom, Courriel, Société et Image.
- Modifiez le type du champ d’image en « Téléchargement de fichier » et cliquez sur « OK ».
- De retour dans la palette Maîtrise des données, cliquez avec le bouton droit de la souris sur votre maîtrise des données et sélectionnez l’onglet Afficher et modifier les enregistrements dans la boîte de dialogue qui s’affiche. Créez des enregistrements de données, en attribuant à chacun un nom, une adresse électronique, une société et une image. Cliquez sur « OK ».
- Dans la boîte de dialogue qui s’affiche, donnez un nom à votre grille de données (« Grille de contacts » pour correspondre à notre exemple). Sélectionnez votre base de données dans la liste déroulante « Data Masters ». Nous voulons inclure tous les champs de la base de données dans la grille de données. Pour les déplacer tous dans la boîte de sélection, cliquez sur l’icône de la double flèche droite. Ensuite, cliquez sur « OK » et positionnez votre grille de données au centre du canevas.Sur le canevas, la cellule supérieure gauche affichera des exemples de noms de champs.
- Cliquez à nouveau sur « Simuler » pour simuler votre grille de données avec les données réelles en place.
Propriétés
Dans la palette Propriétés, vous pouvez modifier les propriétés suivantes de votre grille de données :
- Nombre de colonnes
- Nombre de cellules par page
- Orientation – Faites pivoter votre grille de données horizontalement ou verticalement.
- Espacement – modifie l’espacement entre les cellules
Personnaliser une grille de données
Avec Justinmind, vous pouvez personnaliser l’apparence de votre grille de données. Suivez les étapes ci-dessous pour personnaliser les colonnes individuelles de votre grille de données :
- Allez dans la palette Propriétés et changez le nombre de colonnes de la grille de données en trois.
- Ensuite, dans la palette Calques, sélectionnez la cellule « Grid cell 1 » dans la grille de données.
- Sur le canevas, supprimez les éléments de texte « Nom », « Courriel », « Société » et « Image » pour qu’ils correspondent à notre exemple. Distribuez ensuite les champs de texte d’entrée des cellules et redimensionnez les cellules pour qu’elles correspondent à notre exemple ou pour qu’elles correspondent à votre propre exemple.
- Cliquez sur « Simuler » pour afficher votre grille de données personnalisée.
Créer un filtre de recherche pour une grille de données
Vous pouvez prototyper une liste consultable à l’aide d’une grille de données.
Suivez les étapes ci-dessous pour savoir comment procéder :
- Dans le même prototype, créez un champ de texte d’entrée sur le canevas au-dessus de la grille de données.
- Le champ de texte d’entrée étant sélectionné, créez un événement « On Key Up » + « Set Value », en sélectionnant la grille de données comme cible de l’action. Laissez l’entrée « Any Key » par défaut. Pour la valeur, cliquez sur le bouton radio « Calculé », puis sur le texte « Ajouter une expression ». Vous verrez apparaître le constructeur de l’expression calculée.
- Dans le constructeur, procédez comme suit pour créer l’expression :1. Faites glisser la fonction « Filtre » vers l’expression.
2. Faites glisser votre base de données (à partir de l’onglet Data Masters) vers le premier terme de la nouvelle fonction Filtre.
3. Faites glisser le champ de texte d’entrée vers le deuxième terme et cliquez sur « OK », puis à nouveau sur « OK » pour fermer la boîte de dialogue Evénements. - Cliquez sur « Simuler » et essayez de rechercher une fiche de données dans votre grille de données.
Vous pouvez télécharger notre exemple ici.