HTMX permet de construire des applications web dynamiques puissantes grâce à de simples attributs HTML. Dans cet article, nous allons examiner les fonctionnalités avancées de HTMX, en élargissant les possibilités de HTMX à travers des exemples pratiques, y compris hx-trigger, les déclencheurs d'événements et le traitement dynamique des données.

Enfin, dans la dernière 6ème partie, nous allons conclure le processus de développement web dynamique parfait en utilisant HTMX et Django, axé sur le savoir-faire en matière de traitement des réponses entre le serveur et le client.

1. Introduction aux fonctionnalités avancées de HTMX

Les fonctionnalités avancées de HTMX rendent le traitement des données dynamiques plus flexible et puissant. Voici les principales fonctionnalités que nous allons aborder dans cet article :

• hx-trigger: définit un événement particulier comme déclencheur pour envoyer des requêtes.
• hx-params: personnalise les données à transmettre lors de la requête.
• hx-swap: définit la manière dont les données de réponse du serveur sont insérées dans le DOM.
• Déclenchement conditionnel: gère de manière flexible les actions en fonction de conditions.

2. hx-trigger: requêtes basées sur des événements

hx-trigger permet d'envoyer une requête au serveur en définissant un événement comme déclencheur. Par défaut, l'événement de clic (click) est utilisé, mais cela peut être modifié librement.

Exemple d'utilisation de base

<input hx-get="/search/" hx-trigger="keyup changed delay:500ms" hx-target="#results" placeholder="Entrez un terme de recherche">
<div id="results">Les résultats de la recherche s'afficheront ici.</div>

Points clés

• keyup: envoie une requête à chaque frappe de touche.
• changed: envoie la requête uniquement lorsque la valeur d'entrée change.
• delay: retarde l'envoi de la requête de 500 ms.
• hx-target: spécifie l'élément dans lequel les données de réponse du serveur seront insérées.

3. hx-params: contrôle des données envoyées

hx-params permet de personnaliser les données à transmettre au serveur.

• Il est possible d'exclure certaines données ou d'envoyer uniquement les données nécessaires.

Exemple: envoi de champs spécifiques

<form hx-post="/submit/" hx-params="username,email" hx-target="#result">
    <input type="text" name="username" placeholder="Nom d'utilisateur">
    <input type="email" name="email" placeholder="E-mail">
    <input type="password" name="password" placeholder="Mot de passe">
    <button type="submit">Soumettre</button>
</form>
<div id="result">Le résultat s'affichera ici.</div>

Dans le code ci-dessus, seuls les champs username et email sont envoyés au serveur, le password est exclu.

4. hx-swap: contrôle de la manière dont les données de réponse sont insérées

hx-swap définit comment les données de réponse reçues du serveur sont insérées dans le DOM. La valeur par défaut est innerHTML, ce qui remplace le contenu existant.

Options principales

• innerHTML: valeur par défaut. Remplace le contenu existant.
• beforebegin: insère avant l'élément.
• afterbegin: insère en tout début de l'élément.
• beforeend: insère à la fin de l'élément.
• afterend: insère après l'élément.

Exemple d'utilisation

<div id="content">
    <p>Contenu existant</p>
</div>
<button hx-get="/new-content/" hx-swap="beforeend" hx-target="#content">Ajouter du contenu</button>

Lors du clic, les données de réponse reçues de /new-content/ seront insérées à la fin de <div id="content">.

5. Déclenchement conditionnel

HTMX permet de déclencher des requêtes de manière conditionnelle. Cela permet un contrôle plus granulaire de l'interaction avec l'interface utilisateur.

Exemple: requête selon l'état d'une case à cocher

<input type="checkbox" id="confirm" hx-get="/confirm/" hx-target="#message" hx-trigger="change:checked">
<div id="message"></div>

Une requête est envoyée à /confirm/ uniquement lorsque la case à cocher est sélectionnée.

6. Mise en pratique: mise en oeuvre d'un filtrage dynamique avec HTMX

Code HTML

<select hx-get="/filter/" hx-trigger="change" hx-target="#results">
    <option value="all">Tout</option>
    <option value="category1">Catégorie 1</option>
    <option value="category2">Catégorie 2</option>
</select>
<div id="results">Les résultats du filtre s'afficheront ici.</div>

Vue Django

from django.http import JsonResponse

def filter_view(request):
    category = request.GET.get("category", "all")
    results = {
        "all": ["Élément total 1", "Élément total 2"],
        "category1": ["Élément de catégorie 1-1", "Élément de catégorie 1-2"],
        "category2": ["Élément de catégorie 2-1", "Élément de catégorie 2-2"],
    }
    return JsonResponse({"results": results.get(category, [])})

Conclusion de cet épisode

Dans cette partie, nous avons exploré comment les fonctionnalités avancées de HTMX peuvent élargir notre intégration avec Django.

La prochaine partie sera la dernière partie et se concentrera sur des conseils pratiques et des optimisations concernant le savoir-faire en matière de traitement des réponses entre le serveur et le client. Restez à l'écoute ! 😊