Question : Comment utiliser deploy.js pour afficher et cacher des éléments et conserver cette disposition d’un appel à l’autre de la page ?

Analyse de l’utilisation de js/bdf/deploy.js

Niveau : Programmation (noyau et extensions)

Réponse :

Principe

Au chargement de la page, cette bibliothèque se base sur des attributs particuliers pour indentifier les éléments qui sont des déclencheurs de l’affichage d’autres éléments. Un élément déclencheur doit est identifié par l’attribut data-deploy-role qui peut avoir trois valeurs : link, checkbox ou radio.

data-deploy-role=link

En général, l’élément qui porte cet attribut est une balise <a> mais ce n’est pas obligatoire. Une petite boite avec +/- est rajoutée avec le texte de l’élément pour rappeler l’état ouvert/fermé.

Cet élément doit posséder l’attribut obligatoire :

  • data-deploy-target : cible du déclenchement, sa valeur est celle d’un sélecteur CSS (la plupart du temps, l’identifiant de la cible)

Il peut également posséder les deux attributs optionnels suivants :

  • data-deploy-default : sa valeur est celle d’un sélecteur CSS qui indique un élément affiché lorque la cible de data-deploy-target est cachée (et qui inversement sera caché lorsque la cible de data-deploy-target est affichée)

  • data-deploy-store : si sa valeur est true, l’état affiché/caché du sélecteur est conservé en HTML 5 pour un futur chargement de la page (il faut pour cela que le stockage ait été activé)

data-deploy-role=checkbox

L’élément est une case à cocher. Sa sélection provoque l’affichage d’un élément.

Cet élément doit posséder l’attribut obligatoire :

  • data-deploy-target : cible du déclenchement, sa valeur est celle d’un sélecteur CSS (la plupart du temps, l’identifiant de la cible)

Il peut également posséder l’attribut optionnel suivant :

  • data-deploy-invert : si sa valeur est true, son comportement est inversé : la sélection de la coche cache la cible, sa déselection l’affiche.

data-deploy-role=radio

L’élément doit être un bouton radio. Sa sélection provoque l’affichage d’un élément. Un mécanisme est inclus pour prendre en compte la déselection du bouton radio lors de la sélection d’un autre bouton radio du même groupe.

Cet élément doit posséder l’attribut obligatoire :

  • data-deploy-target : cible du déclenchement, sa valeur est celle d’un sélecteur CSS (la plupart du temps, l’identifiant de la cible)

Il peut également posséder l’attribut optionnel suivant :

  • data-deploy-invert : si sa valeur est true, son comportement est inversé : la sélection du bouton radio cache la cible, sa déselection l’affiche.

À propos de la cible

La cible d’un déclencheur est désigné par l’attribut data-deploy-target du déclencheur. Elle n’a pas besoin d’indication supplémentaire. Cependant, son état initial (affiché/caché) doit être indiqué explicitement avec l’utilisation de la classe .hidden (élément caché si la classe est présente, affiché sinon). En effet, dans le cas de data-deploy-role=link, l’état ouvert/fermé est déduit de l’état initial de la cible.

Dans le noyau du code, les cibles sont mises en forme par les classes .global-PDetailPanel (quand la cible est située après un paragraphe) ou .global-BrDetailPanel (quand la cible est située après un saut de ligne) et leurs identifiants sont sous la forme trucPanel. Ce sont deux usages totalement facultatifs.

Utilisation

Au chargement de la page, js/bdf/deploy.js liste tous les éléments du document possédant l’attribut data-deploy-role et leur applique le comportement adéquat. Cette bibliothèque n’intervient pas sur les classes existantes et en introduit une seule : .global-deploy-Icon qui est utilisé pour la boite +/- introduit sur les déclencheurs data-deploy-role=link.

Lorsqu’un nouvel élément est introduit dynamiquement, il est possible d’appliquer la méthode BDF.Deploy.init($element) ($element est un objet JQuery) pour que les déclencheurs contenus dans $element soient activés.

Côté Java, dans le cas d’une classe étendant fr.exemole.bdfserver.html.BdfHtmlProducer, il suffit de passer addJsLib(CommonJsLibs.DEPLOY) dans le constructeur pour que la bibliothèque soit chargée.

On pourra s’inspirer de la méthode statique fr.exemole.bdfserver.html.printDeployLink :

public static void printDeployLink(BdfHtmlProducer bhp, String targetSelector, String defaultSelector, String messageKey, boolean storeState) {
HTMLAttributes linkAttr = HA.href("#").attr("data-deploy-role", "link");
linkAttr.attr("data-deploy-target", targetSelector);
if (defaultSelector != null) {
linkAttr.attr("data-deploy-default", defaultSelector);
}
if (storeState) {
linkAttr.attr("data-deploy-store", "true");
}
bhp.startA(linkAttr);
bhp.localize(messageKey);
bhp.endA();
}