Depuis la dernière version des PrimeFaces Extensions, le composant Timeline permet de faire glisser des éléments depuis une liste externe et de les déposer sur la Timeline. Lorsqu’un élément est déplacé et déposé, un événement avec une date de fin est créé. La date de fin est calculée comme la date de début plus 10% de la largeur de la Timeline. Cet algorithme par défaut convient à la plupart des cas d’utilisation.
Comportement d’événements et objets transmis
Le bean définit l’écoutiste AJAX sur Drop. L’écoute reçoit une instance de la classe TimelineDragDropEvent. Le protocole d’exécution implique que TimelineDragDropEvent te = new TimelineDragDropEvent(this, behaviorEvent.getBehavior(), ...). La méthode standard JSF invokeOnComponent assure que l’objet data est disponible dans TimelineDragDropEvent.
Éléments de configuration et comparaison avec p:droppable
Il faut aussi considérer les attributs liés au drag-and-drop tels que dropHoverStyleClass, dropActiveStyleClass, dropAccept et dropScope. Ils sont similaires aux attributs correspondants de p:droppable. Cependant, il existe une différence : l’attribut datasource n’est pas nécessaire ici. Dans PrimeFaces, p:droppable possède cet attribut représentant l’ID d’un composant UIData à connecter. Je n’ai jamais compris pourquoi il est nécessaire, mais on peut obtenir le composant UIData grâce une astuce simple.
Le callback de dépôt (drop) provenant du jQuery Droppable reçoit un objet ui avec une référence à l’élément draggable. Cela permet d’exploiter les données du drag sans recourir à un datasource séparé, ce qui simplifie l’intégration dans les pages JSF.
Flux de données et objets d’événement
- Le comportement de drop est géré côté serveur via une écoute AJAX.
- La création de TimelineDragDropEvent transmet les informations essentielles sur le dépose.
- La date de fin calculée est déduite de la date de début et de la largeur de la Timeline (10 %).
Cette approche permet une intégration fluide entre des listes externes et la Timeline, tout en conservant une logique de calcul standard et réutilisable.
Implémentation pratique et conseils
- Activez le drag depuis une liste externe et configurez les zones de drop sur la Timeline.
- Configurez les classes de style pour les états hover et actif afin d’améliorer l’expérience utilisateur.
- Évitez d’utiliser l’attribut datasource pour simplifier la liaison avec UIData; privilégiez l’accès direct via les objets d’événement.
- Utilisez l’objet TimelineDragDropEvent côté serveur pour extraire les informations pertinentes et mettre à jour les données de la Timeline.
Le mécanisme invocable côté serveur via JSF (invokeOnComponent) garantit que les objets de données restent accessibles durant le traitement de l’événement, ce qui rend les applications plus robustes et réactives.
Pour des cas où l’UIData est nécessaire, il existe des astuces pour récupérer la référence au composant sans dépendre du datasource, tout en restant conforme à PrimeFaces Extensions.
Rearrange Tasks, Milestones, Swimlanes and Sub-swimlanes with drag and drop | Lucen Timeline
Tableau récapitulatif des options clés
| Option | Description | Impact |
|---|---|---|
| dropHoverStyleClass | Classe appliquée lorsque le curseur survole une zone de dépôt | Améliore le retour visuel |
| dropActiveStyleClass | Classe appliquée pendant le dépôt | Indique l’action en cours |
| dropAccept | Types d’éléments acceptés pour le drop | Filtre les éléments glissables |
| dropScope | Portée du drop (portée du composant) | Limite le drop à certaines zones |
| datasource | Non nécessaire pour Timeline DragDrop | Simplifie la connexion sans UIData |
En résumé, l’intégration drag-and-drop sur Timeline dans PrimeFaces Extensions est conçue pour être intuitive et efficace, en utilisant un flux d’événements clair et en évitant les dépendances inutiles au datasource. Le calcul automatique de la date de fin au moyen de la largeur de la Timeline offre une valeur pratique par défaut tout en restant adaptable via les callbacks et les paramètres CSS.
tags: #curseur #primefaces #drag