Interactions utilisateur

Events
Actions
Ajoutez de l'interactivité à vos applications avec des événements et des actions.
Tour des fonctionnalités (Épisode 5)
Retour à l'Académie

Interactions utilisateur

Résumé express : Créer des composants interactifs avec variables, computed values et événements pour une expérience dynamique.

Introduction aux composants réactifs

Ce tutoriel montre comment utiliser le Visual Scripting pour créer des composants qui réagissent aux interactions utilisateur et calculent des valeurs dynamiquement.

1. Variables de base

Concept

Les variables sont des valeurs qu'on peut modifier et réutiliser partout dans le composant.

Création d'une variable

  1. Créer un nouveau composant
  2. Ajouter une variable "name"
  3. Type : String
  4. Valeur par défaut : laisser vide

2. Input avec liaison de données

Widget Text Input

  1. + → Widget → Form → Text Input
  2. Propriété model : sélectionner la variable "name"
  3. Chaque modification de l'input met à jour la variable

Test de réactivité

  1. Ajouter un second Text Input avec la même variable "name"
  2. En Preview : taper dans un champ met à jour l'autre automatiquement
  3. Suppression ou modification : synchronisation en temps réel

3. Amélioration de l'interface

Ajouter un label

  1. Propriété label du Text Input : "name"
  2. Animation automatique du label au focus
  3. Interface plus professionnelle

Affichage du message

  1. Custom Text : "Hello Mister"
  2. Créer une variable temporaire : {name}
  3. Lier à la variable "name" avec l'icône éclair
  4. Affichage dynamique : "Hello Mister [Nom]"

4. Variables computed

Problème à résoudre

Pour "Jean Dupont", afficher "Mr. Dupont" au lieu de "Mr. Jean Dupont".

Créer une computed variable

  1. + → Computed
  2. Nom : "LastName"
  3. Calcul automatique basé sur d'autres variables
  4. Recalcul automatique quand les dépendances changent

Logique de traitement

  1. Aller dans l'onglet Logic
  2. Utiliser GetName pour récupérer la variable "name"
  3. Ctrl + Espace : vérifier la valeur ("Jean Dupont")

Extraction du nom de famille

  1. Nœud Split avec séparateur " " (espace)
  2. Sépare la chaîne en tableau : ["Jean", "Dupont"]
  3. Nœud Last : récupère le dernier élément
  4. Connecter à l'output de la computed

Organisation du graphique

  • Pas besoin de fil d'exécution pour les nœuds de données
  • Garder un graphique propre et aligné pour la lisibilité
  • Connexions logiques pour la compréhension

5. Utilisation de la computed

Mise à jour de l'affichage

  1. Modifier le Custom Text
  2. Changer la variable de "name" à "LastName"
  3. Affichage : "Hello Mr. Dupont"
  4. Test en Preview : taper "Jean Dupont" affiche "Mr. Dupont"

Réactivité complète

La computed se met à jour automatiquement à chaque modification de l'input.

6. Événements utilisateur

Ajouter un événement click

  1. Sélectionner un élément (div)
  2. Events → Click
  3. Edit Logic pour définir l'action

Logique d'événement

  1. Log pour afficher dans la console
  2. Utiliser Template pour formatter : "Hello, Mr. {LastName}"
  3. GetLastName → Template → Log
  4. Résultat : "Hello, Mr. Dupont"

Test des événements

  • Builder mode : événements désactivés
  • Preview mode : clic fonctionne et affiche dans la console
  • Changer le nom et cliquer : affichage mis à jour

Concepts clés

Variables vs Computed

  • Variables : stockage de valeurs modifiables
  • Computed : calculs automatiques basés sur d'autres valeurs

Réactivité

  • Mise à jour automatique de tous les éléments liés
  • Synchronisation en temps réel
  • Pas de code manuel nécessaire

Types de nœuds Visual Scripting

  • Get/Set : récupération et modification de variables
  • Split : division de chaînes
  • Last : dernier élément d'un tableau
  • Template : formatage de texte avec variables

Événements

  • Click : interaction utilisateur
  • Logic editing : définir les actions
  • Mode Preview requis pour tester

Bonnes pratiques

Organisation du code visual

  • Alignement des nœuds pour la lisibilité
  • Connexions logiques et claires
  • Séparation des responsabilités

Variables et computed

  • Variables pour les données utilisateur
  • Computed pour les transformations
  • Noms explicites et descriptifs

Test et débogage

  • Ctrl + Espace : vérifier les valeurs
  • Console pour les logs
  • Preview mode pour tester les interactions