# 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

---