Xforms propose 2 rendus pour les listes à choix multiple :

  • la classique liste qui permet via Ctrl + clic de sélectionner plusieurs éléments,
  • une série de cases à cocher qui permet de cocher plusieurs valeurs.

<xf:select ref= »… »>

</xf:select>

La liste classique à choix multiple a quelques avantages :

  • compacité,
  • permet de profiter des fonctionnalités que les navigateurs offrent sur les lites (recherche d’un élément en tapant au clavier, …).

Et beaucoup d’inconvénients :

  • si la liste est longue, la lisibilité est exécrable,
  • l’utilisateur n’est souvent pas à l’aise avec le Ctrl + clic (quoi de plus énervant que d’avoir choisi 3 valeurs et relâcher Ctrl avant de cliquer sur la 4me…),
  • le rendu n’est souvent pas fluide au sein d’un formulaire (moche même !).

<xf:select ref= »… » appearance= »full »>

</xf:select>

La série de cases à cocher corrige un certain nombre de ces inconvénients :

  • vue instantanée de l’ensemble des choix possible,
  • simplicité extrême, l’utilisateur coche, peut revenir facilement sur la sélection effectuée, …

Mais vient avec de nouveaux inconvénients :

  • le principal : inutilisable sur de longues listes, au delà d’une dizaine de valeurs la place prise est bien trop importante,
  • pas de recherche d’un élément en tapant au clavier.

Une solution, certes plus complexe à mettre en œuvre qu’un simple select, permet un bon compromis entre ces 2 solutions : la répétition de listes simples :

  • l’utilisateur dispose par défaut d’une liste simple permettant de choisir une valeur unique,
  • s’il souhaite ajouter une 2nde valeur, un bouton + permet d’ajouter une liste,
  • un bouton permet de retirer une liste et sa valeur.

On retrouve presque tous les avantages des solutions précédentes réunis :

  • très grande simplicité et comportement intuitif,
  • recherche d’un élément en tapant au clavier / fonctionnalités du navigateur sur les listes,
  • compacité,
  • et un gros avantage technique, le lien XML est différent : le select alimente un seul élément/attribut, les valeurs étant séparées par des espaces, tandis qu’avec cette solution un élément est créé pour chaque valeur, ce qui est bien plus simple à indexer dans une base de données XML

Les inconvénients sont :

  • pas de visibilité immédiate de l’ensemble des choix,
  • temps de développement plus long (à développer une seule fois sous forme d’un template cela-dit et à copier sur ce site !).

Passons enfin au code !

<xf:repeat nodeset= »valeur_liste »>
    <xf:select1 ref= »@valeur »>
      <xf:itemset nodeset= »… »>
        <xf:label>
            …
        </xf:label>
        <xf:value ref= »@valeur » />
      </xf:itemset>
    </xf:select1>
    <xf:trigger appearance= »minimal » ref= ».[count(../jq:valeur_liste) &gt; 1] »>
      <xf:action ev:event= »DOMActivate » if= »count(../jq:valeur_liste)&gt;1″>
        <xf:delete nodeset= »current() » />
      </xf:action>
    </xf:trigger>
</xf:repeat>
<xf:trigger appearance= »minimal »>
  <xf:label appearance= »minimal »>
    …
  </xf:label>
  <xf:action ev:event= »DOMActivate »>
    <xf:insert nodeset= »jq:valeur_liste » at= »last() » position= »after » />
    <xf:setvalue ref= »jq:valeur_liste[last()]/@valeur » /> <!– On copie le dernier élément qui a déjà une valeur positionnée donc on enlève cette valeur après copie –>
  </xf:action>
</xf:trigger>

Cette solution a fait ses preuves sur plusieurs formulaires de complexité très variée et sur des listes de toute taille.

Mots clés

Découvrez nos préstations en régie ou au forfait

Audit, conseil, AMOA, AMOE, bases de données XML, solutions éditoriales, sites Responsive Web Design, ...

Nous consulter !
Découvrir !

Archives

Étiquettes

Mots clés