Version 18 — Décembre 2010 — stefdn
- exemples de création de boutons radio et de menus select
- autres saisies
- CSS : mettre 2 saisies côte-à-côte
- vérifications de la conformité des valeurs saisies
- Saisies « autonomes »
- Affichage conditionnel de saisies
La doc n’indique pas comment créer les options des select ou les différents boutons radio d’un ensemble, mais le log ainsi que les fichiers sources donnent des exemples :
Pour les saisies « boutons radio »
[(#SAISIE{radio, afficher_liste,
label=<:plugin:afficher_liste:>,
explication=<:plugin:explication_afficher_liste:>,
datas=#ARRAY{
cle1,valeur1,
cle2,valeur2,
cle3,valeur3}
})]
[(#SAISIE{radio, maintenance}
{label=Durée de maintenance}
{defaut=12}
{datas=#ARRAY{
12, 12 mois,
24, 24 mois,
36, 36 mois}
}
)]
Pour les saisies « select »
[(#SAISIE{selection, maintenance}
{label=Durée de maintenance}
{option_intro=Sélectionnez la durée de maintenance}
{defaut=12}
{datas=#ARRAY{
12, 12 mois,
24, 24 mois,
36, 36 mois}
}
)]
Il y a moultes saisies dans le plugin, fort utiles dans certains cas :
Certains font appel aux « selecteurs » définis dans SPIP Bonux et font un ample usage d’ajax pour faciliter la sélection, par navigation arborescente dans les rubriques par exemple.
Par défaut, des #SAISIES successives sont affichées les unes sous les autres. (propriété clear:both;
sur les <li>
définie dans habillage.css).
Pour faire apparaître une saisie à droite d’une autre, sur la même ligne, il faut surcharger les propriétés CSS de manière à corriger les valeurs définies dans habillage.css
Pour cela on créera un fichier perso.css dans le dossier squelettes, qui contiendra les nouvelles valeurs.
Par exemple, pour un formulaire « identite » qui comporte une #saisie{input, prenom}
immédiatement suivi d’une #saisie{input, nom}
, pour que le nom apparaisse à droite du prénom, il suffit de mettre dans perso.css :
.formulaire_identite .editer {
float: left;
}
.formulaire_identite .editer_prenom {
clear: left;
}
.formulaire_identite .editer_nom {
clear: right;
margin-left: 10px;
}
L’affichage des erreurs n’est alors pas très agréable puisqu’en s’intercalant entre le label et la saisie, les erreurs rompent l’alignement horizontal des deux zones de saisie voisines.
Pour remédier, on peut :
Les #SAISIES peuvent être utilisées dans le cadre d’un formulaire CVT.
La partie ’verifier’ du code associé fait les vérifications adéquates. Elle peut pour cela faire appel aux vérifications prédéfinies par le plugin ’verifier’ (actuellement encore en dev).
Par exemple, pour vérifier un code postal français, ça s’utilise en faisant :
$verifier = charger_fonction('verifier','inc');
if ($err=$verifier(_request('cp'), 'entier', array('min'=>1000, 'max'=>99999))
$erreurs['cp'] = $err;
SAISIES propose également une fonction ’saisies_verifier($formulaire)’ qui vérifie et valide en un seul appel la conformité de toutes les saisies, et renvoie le tableau des erreurs dans le cas d’une non validité.
Pour cela,
Ce tableau contient 2 entrées :
- ’type’
- ’options’
Pour chaque saisie, saisies_verifier vérifie si elle a bien été saisie (dans le cas d’une saisie obligatoire), puis appelle la fonction de vérification avec les options indiquées.
Exemple :
$saisie_age = array(
'saisie' => 'input',
'options' => array(
'nom' => 'age',
'label' => 'Votre age',
'size' => 2),
'verifier' => array (type, entier
options => array (max=>7, min=>7)));
Comme indiqué dans Saisies, le tableau $formulaire
rassemble toutes les saisies : $formulaire = array ($saisie_age, ...);
En passant par un ficher yaml pour décrire les saisies, ça donne ceci :
saisie: 'input'
options:
nom: 'age'
label: 'Votre age'
size: 2
verifier:
type: 'entier'
options:
min: 0
max: 100
[#autonomes<-]
Le code html servant à générer chaque saisie est défini par les squelettes contenus dans le répertoire saisies du plugin plugon .
Ces squelettes sont inclus par le squelette générique _base, qui teste si la saisie à afficher est « autonome ».
La plupart des saisies ne sont pas autonomes, et en plus de l’inclusion, les traitements génériques aux saisies sont effectués (en dehors donc du fichier propre à la saisie, qui ne présente que les spécificités de la saisie) : l’affichage d’une erreur associée si il y en a une, le label, les explications, les ’attention’ et les traitements de obligatoire...
Les saisies autonomes sont par contre inclues sans rien d’autre autour. Elles sont dites « autonomes » car c’est leur propre squelette qui gère, ou non, l’affichage des labels, erreurs, explications, attentions et obligatoire. Si le squelette qui définit la saisie n’affiche ni erreur ni label, il n’y aura pas d’affichage des erreurs ni des labels.
Les saisies qui sont autonomes sont définies par la fonction saisies_autonomes qui appelle le pipeline du même nom qui permet d’en ajouter de nouvelles. Ce sont par défaut les saisies :
- fieldset
- hidden
- destinataires
- explication
On peut modifier cette liste en redéfinissant le pipeline éponyme. Ou bien (mauvaise pratique) son unique usage : dans _base.html :
à la place de #SET{saisies_autonomes,#VAL|saisies_autonomes}
mettre #SET{saisies_autonomes,#ARRAY{fieldset, hidden, destinataires, explication, cequonveutenplus}}
L’option afficher_si
ajoutée à une saisie permets de préciser une condition sur les autres valeurs d’un formulaire indiquant si la saisie doit être affichée afficher ou non.
Exemple YAML :
-
saisie: 'oui_non'
options:
nom: 'choix'
label: 'Utilisez-vous SPIP ?'
-
saisie: 'input'
options:
nom: 'raison_non'
label: 'Si non, pourquoi ?'
afficher_si: '@choix@ == ""'
-
saisie: 'input'
options:
nom: 'raison_oui'
label: 'Si oui, pourquoi ?'
afficher_si: '@choix@ == "on"'
Le nom des champs doit être encadré par le caractère @.
Il est possible d’utiliser des parenthèses dans les conditions ainsi que les opérateurs &&
et ||
.
Par exemple : afficher_si: '@radio1@ == "on" || (@input2@ != "" && @select3@=="valeur3")'
L’option afficher_si n’a d’effet que sur les balises #GENERER_SAISIES et #VOIR_SAISIES. Les conditions doivent porter sur des champs définis dans le tableau de saisies.
Il est possible d’insérer plusieurs formulaires avec une option afficher_si dans une même page.