Aller au contenu principal

Symfony UX

Comment intégrer des fonctionnalités JavaScript interactives dans les applications Symfony de manière simplifiée

Notions théoriques​

Symfony UX est une initiative visant à simplifier l'intégration de fonctionnalités JavaScript interactives dans les applications Symfony. Son objectif principal est de permettre aux développeurs PHP d'ajouter des comportements dynamiques côté client sans avoir à écrire beaucoup de JavaScript.

Les composants clés de Symfony UX sont :

  1. Stimulus : Un framework JavaScript léger
  2. Turbo : Une bibliothèque pour des mises à jour de page dynamiques
  3. Une collection de composants UX prêts à l'emploi

Stimulus, le cœur de Symfony UX, est un framework JavaScript minimaliste qui permet d'ajouter du comportement interactif à vos pages HTML. Ses principes de base sont :

  • Les contrôleurs Stimulus sont associés à des éléments HTML via des attributs data.
  • Les actions sont définies dans le HTML et liées à des méthodes du contrôleur.
  • Les cibles permettent de sélectionner facilement des éléments dans le DOM.

Exemple de mise en application​

Voici un exemple de contrôleur Stimulus simple et son HTML correspondant :

// assets/controllers/hello_controller.js
import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    static targets = [ "name", "output" ]

    greet() {
        this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
    }
}
<div data-controller="hello">
    <input data-hello-target="name" type="text">
    <button data-action="click->hello#greet">Greet</button>
    <span data-hello-target="output"></span>
</div>

Etudions ce code​

static targets = [ "name", "output" ]

Cette ligne définit les cibles du contrôleur, qui correspondent aux éléments HTML marqués avec data-hello-target.

greet() {
    this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
}

Cette méthode est appelée lorsque le bouton est cliqué. Elle met à jour le contenu de l'élément output avec un message de salutation.

<div data-controller="hello">

Cet attribut associe le contrôleur Stimulus "hello" à cet élément div et tous ses enfants.

<button data-action="click->hello#greet">

Cet attribut définit une action : lorsque le bouton est cliqué, la méthode greet du contrôleur "hello" est appelée.

Test de mémorisation/compréhension​


Quel est le framework JavaScript au cœur de Symfony UX ?


Comment associe-t-on un contrôleur Stimulus à un élément HTML ?


Comment définit-on une action dans Stimulus ?


Comment sélectionne-t-on des éléments cibles dans un contrôleur Stimulus ?


Quel est l'avantage principal de Symfony UX ?


TP pour réfléchir et résoudre des problèmes​

Votre défi pour aujourd'hui est de créer un contrôleur Stimulus pour gérer un compteur interactif.

Créez un contrôleur Stimulus nommé counter_controller.js qui gère un compteur.

Le contrôleur doit avoir :

  • des méthodes pour incrémenter et décrémenter le compteur,
  • ainsi qu'une méthode pour réinitialiser le compteur à zéro.

Créez ensuite le HTML correspondant pour utiliser ce contrôleur.

Une solution