Script visuel

Visual Script
Events
Store
Implémenter la logique interactive : événements click et création dynamique de cartes et tâches.
Premiers pas avec une vraie app (Épisode 4)
Retour à l'Académie

Visual Scripting

Résumé express : Implémenter la logique interactive avec visual scripting : événements click, gestion du store et création dynamique de cartes et tâches.

Introduction au Visual Scripting

Nous avons maintenant une belle interface, mais elle n'est pas interactive. Il est temps d'ajouter la logique pour pouvoir créer des cartes et des tâches grâce au visual scripting.

1. Créer un événement click

Ajouter l'événement sur le bouton "Ajouter une tâche"

  1. Aller dans le composant Card
  2. Sélectionner le div du bouton d'ajout de tâche
  3. Dans le panel de droite, cliquer sur Events puis le "+"
  4. Choisir l'événement Click
  5. Renommer le div en "add card" pour plus de clarté

Accéder à la logique

  1. Cliquer sur l'événement ou aller dans l'onglet Logic
  2. L'événement apparaît comme "onclick (add card)"

2. Comprendre le système de visual scripting

Types de blocs et connexions

  • Blocs d'exécution : fil blanc qui définit l'ordre d'exécution
  • Blocs de données : fils colorés selon le type
    • Jaune : chaîne de caractères (string)
    • Vert : nombre (number)
    • Rouge : booléen (boolean)
    • Bleu : objet (object)
    • Carré : tableau du type correspondant

Exemple de test

  1. Créer un bloc Log
  2. Le connecter à l'événement onclick avec le fil blanc
  3. Ajouter du texte : "hello"
  4. Tester avec clic droit → Execute pour voir l'animation
  5. Prévisualiser : cliquer sur "add card" affiche "hello" dans la console

3. Récupérer et manipuler les propriétés

Accéder aux propriétés du composant

  1. Clic droit → taper "get"
  2. Sélectionner "get tasks" ou "get title"
  3. Ces blocs récupèrent les propriétés définies dans le composant

Ajouter une tâche avec Push

  1. Utiliser le bloc Push pour ajouter un élément à un tableau
  2. Connecter get tasks à l'entrée tableau du bloc Push
  3. Dans "value", écrire "nouvelle tâche"
  4. Connecter l'onclick au bloc Push
  5. Tester : chaque clic ajoute une nouvelle tâche

4. Créer le système d'ajout de cartes

Modifier le composant CreateButton

Le bouton doit avoir deux états :

  • État normal : bouton "Ajouter une carte"
  • État édition : input text + boutons validation/annulation

Créer la variable d'état

  1. Ajouter une variable isEditing (boolean) dans CreateButton
  2. Wraper le bouton dans un Template
  3. Condition : afficher si isEditing = false

Créer l'interface d'édition

  1. Ajouter un second Template avec condition isEditing = true
  2. Insérer un Text Input depuis UI Library
  3. Ajouter deux icons : validation (check) et annulation (cross)
  4. Styliser avec display flex et align-items center

5. Logique de basculement d'état

Passer en mode édition

  1. Ajouter un événement click sur le bouton "Ajouter une carte"
  2. Dans Logic, utiliser Set isEditing à true

Gérer la saisie de texte

  1. Créer une variable title (string) dans CreateButton
  2. Sur le Text Input, définir v-model = title
  3. Afficher les icônes seulement si title ≠ empty (Template avec condition)

6. Validation et annulation

Événement de validation (check)

  1. Ajouter un click sur l'icône de validation
  2. Récupérer la valeur avec get title
  3. Tester avec un Log pour vérifier la récupération

Événement d'annulation (cross)

  1. Ajouter un click sur l'icône d'annulation
  2. Utiliser Set title avec une chaîne vide
  3. Le champ se vide automatiquement grâce au v-model

7. Créer une carte dans le store

Comprendre la structure de données

Une carte contient :

  • title : string
  • tasks : tableau de strings

Récupérer les données du store

  1. Utiliser get store pour accéder aux données globales
  2. Utiliser spread pour décomposer l'objet et récupérer la liste des cartes
  3. Le spread permet d'extraire les propriétés d'un objet

Ajouter la nouvelle carte

  1. Utiliser Push sur la liste des cartes du store
  2. Créer un Create Object de type CardType
  3. Connecter get title au champ title de l'objet
  4. Laisser tasks comme tableau vide
  5. Connecter le tout à l'événement de validation

Réinitialiser l'interface

Après création de la carte :

  1. Set title à vide
  2. Set isEditing à false

Concepts avancés

Le spread operator

  • Permet de décomposer un objet pour accéder à ses propriétés
  • Exemple : store.cards devient accessible via spread du store
  • Peut s'enchaîner pour accéder aux propriétés imbriquées

Raccourcis utiles

  • Ctrl + Space : voir la valeur de chaque élément
  • Ctrl + Alt : voir le type attendu par chaque connexion
  • Clic droit + Execute : tester l'exécution avec animation

Résultat final

L'application permet maintenant de :

  • Ajouter des tâches dans les cartes existantes
  • Créer de nouvelles cartes avec un titre personnalisé
  • Toutes les données sont sauvegardées dans le store

Prochainement : Les variables computed pour une expérience utilisateur fluide et agréable.