Affichage dynamique

Affichage dynamique

Résumé express : Créer des types de données, configurer le store global et utiliser les boucles pour afficher dynamiquement les cartes et tâches.

Problématique : Scalabilité des composants

Actuellement, nous avons seulement deux cartes dans notre application. Si nous en avions 10, il ne serait pas pratique de placer 10 composants manuellement. Nous devons créer une liste de cartes accessible partout dans l'application.

1. Définir les types de données

Créer le type CardType

1. Clic droit → New → Type
2. Nommer le type CardType
3. Définir la structure :
   • Type : Card
   • Structure : Object (car une carte a plusieurs propriétés)

Propriétés du type Card

• title : string (le titre de la carte)
• tasks : array of strings (liste des tâches)

Cette structure définit le "schéma" qu'aura chaque carte dans notre application.

2. Configurer le store global

Créer la structure de données

1. Aller dans le Store
2. Redéfinir le schéma :
   • Nom : cards (avec un S pour le pluriel)
   • Type : Array de CardType

Initialiser les données par défaut

Remplir le store avec des données d'exemple :

Carte 1 - "À faire" :

• title: "À faire"
• tasks: ["tâche 1", "tâche 2"]

Carte 2 - "En cours" :

• title: "En cours"
• tasks: [] (aucune tâche)

Carte 3 - "Terminé" :

• title: "Terminé"
• tasks: ["tâche 3", "tâche 4", "tâche 5"]

Tester le store

1. Cliquer sur Reset to Store dans l'onglet Preview
2. Le preview affiche maintenant les données du store par défaut

3. Affichage dynamique des cartes

Transformer l'affichage statique en boucle

1. Retourner sur la page Main
2. Clic droit sur une carte → Wrap in component
3. Choisir Template

Configurer la boucle

1. Dans le Template, sélectionner For (pour une boucle)
2. Définir l'itération sur cards (données du store)
3. Passer le Preview de Once à All pour voir toutes les cartes

Connecter les données dynamiques

1. Sélectionner le composant Card
2. Modifier la propriété title : template.value.title
3. Les titres se mettent à jour automatiquement

4. Affichage dynamique des tâches

Ajouter la propriété tasks au composant Card

1. Aller dans le composant Card
2. Ajouter une nouvelle propriété :
   • Nom : tasks
   • Type : array of strings
   • Valeurs par défaut : ["tâche 1", "tâche 2"]

Créer une boucle pour les tâches

1. Dans le composant Card, sélectionner la zone des tâches
2. Wrap in component → Template
3. Configurer une boucle For sur la propriété tasks
4. Passer le Preview en mode All

Rendre le contenu des tâches dynamique

1. Sélectionner le texte d'une tâche
2. Remplacer le texte fixe par une variable : {taskName}
3. Créer la propriété taskName liée à template.value
4. Les tâches s'affichent maintenant dynamiquement

5. Connecter tout ensemble

Lier les cartes aux données du store

1. Retourner sur la page Main
2. Sélectionner le composant Card dans la boucle
3. Modifier la propriété tasks : template.value.tasks
4. Chaque carte affiche maintenant ses propres tâches

Tester l'affichage complet

1. Reset to Store pour charger les données
2. Les trois cartes s'affichent avec leurs titres et tâches respectifs
3. Ajouter une carte dans le store pour tester la réactivité

Concepts clés

Les Types

• Définissent la structure des données
• Garantissent la cohérence dans toute l'application
• Permettent la validation automatique

Le Store

• Stockage global des données de l'application
• Source unique de vérité
• Permet la synchronisation entre composants

Les Templates avec boucles

• For : itère sur des tableaux ou objets
• template.value : accède à l'élément courant de la boucle
• Affichage dynamique basé sur les données

Preview modes

• Once : affiche un seul élément (pour le design)
• All : affiche tous les éléments (pour tester les boucles)

Avantages de cette approche

• Scalabilité : ajouter des cartes ne nécessite que de modifier le store
• Maintenance : une seule définition de carte pour toute l'app
• Cohérence : les types garantissent la structure des données
• Réactivité : les changements du store se reflètent automatiquement

Prochainement : Implémentation de la logique interactive pour ajouter et manipuler les cartes et tâches.