Xforms : une liste à choix multiples efficace pour l’utilisateur

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.