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
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 : checkbox, radio ou details.
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.
data-deploy-role
=
details
Ce rôle doit s’appliquer exclusivement à une balise <details>
. Cette balise introduite en HTML5 gère directement le déploiement sans avoir besoin de Javascript. Ce rôle sert uniquement à indiquer que l’état ouvert ou fermé de la balise doit être conservé pour l’affichage futur de la page. C’est l’équivalent de l’attribut data-deploy-store
disponible pour data-deploy-role
=
link.
À 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).
Dans le noyau du code, les cibles sont mises en forme par la classes .global-DetailPanel
. C’est un usage facultatif.
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.
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.