XForms : contrôles

Ce chapitre traite des différents contrôles qu’on peut utiliser avec XForms. En plus de ceux qui existent avec les formulaires HTML, XForms en introduit de nouveaux. Ils ne sont pas tous traités ici puisque certains n’apparaissent que lorsqu’ils sont liés à un type spécifique, ce que nous verrons dans un autre chapitre.

• Entrée simple
• Champ de mot de passe
• Zone de texte multiligne
• Contrôle de sortie
• Sélection unique
• Sélection multiple
• Sélection dynamique
• Sélections dynamiques
• Commande d’étendue
• Les boutons

Entrée simple

Le premier de ces éléments de contrôle permet d’entrer du texte dans une zone simple. On utilise l’élément input.

La valeur entrée dans ce champ de texte n’est pas contenue dans cet élément. Elle est enregistrée dans l’instance du modèle désigné. Rappelez vous que par défaut, le processeur XForms utilise le premier modèle et dans ce modèle la première instance. Pour indiquer dans quel élément on enregistre la valeur, on utilise l’attribut ref. Cet attribut contient une expression XPath qui désigne le nœud dans lequel la valeur est enregistrée.

Il faut bien saisir que le contrôle est lié à l’élément auquel il est accroché, ce qui veut dire que l’élément de contrôle modifie le nœud en question, mais que si le nœud est modifié d’une autre manière, le contrôle réagira à ce changement et dans le cas d’une zone de texte, la valeur affichée dans le contrôle changera.

On inclut les différents éléments XForms dans les éléments du langage hôte, ici XHTML.

Pour chaque contrôle il est possible d’y accoler un texte, un label, grâce à l’élément label :

Champ de mot de passe

Le contrôle de champ de mot de passe est similaire à la zone de texte, à la différence évidente que le texte entrée est cachée. Sinon, aucune différence.

L’élément label a des cousins. L’élément hint en est un. Il sert à donner une indication sur le contrôle dans lequel il est contenu. La plupart des processeurs XForms montrent une bulle au passage de la souris.

Vous vous demandez peut être pourquoi on peut se contenter de mettre juste ref="nom" et pas ref="/data/nom" pour lier le contrôle à son élément d’instance (cet attribut est, je vous le rappelle, une expression XPath). En fait, le nœud contexte, le nœud sur lequel on se trouve par défaut, c’est la racine. Donc quand on écrit ref="nom", c’est le fils nom de la racine. Pas de problème, on désigne bien le nœud voulu.

Zone de texte multiligne

L’élément de contrôle textarea permet de rentrer du texte sur plusieurs lignes. Il n’existe pas, comme avec les formulaires HTML, d’attribut permettant de spécifier la taille et la largeur d’une telle zone de texte. Tout ce qui touche à la présentation est, selon la logique des langages XML modernes, relégué à CSS comme nous le verrons plus tard.

On utiliser ici un autre cousin de label, j’ai nommé help qui comme son nom l’indique fournit une aide sur le contrôle en cours. Reprenons notre formulaire :

La zone de texte multiligne est déjà remplie, pour une raison simple : elle est liée à l’élément dissertation de l’instance. Or, cet élément contient déjà du texte. Comme cet élément et le contrôle sont liés, le contrôle prendra comme valeur initiale le texte contenu dans l’élément ciblé. C’est de cette manière qu’on peut préremplir un formulaire. Mieux, en chargeant une instance à partir d’un fichier, on peut préremplir un formulaire avec les informations d’un utilisateur loggé. Il suffit d’écrire quelquechose comme ceci sur l’élément instance adéquat : src="preremplir.php" en s’assurant que le script envoie bien un document XML, qui servira d’instance.

Contrôle de sortie

Un des contrôle XForms qui n’existe pas avec les formulaires HTML, c’est le contrôle de sortie. Il permet d’afficher le texte (ou plus) contenu dans un nœud. On peut utiliser l’attribut ref. Mais, on peut aussi utiliser l’attribut value destinée à contenir une expression XPath qui sera calculée et dont le résultat sera affichée en sortie.

En testant cet exemple, vous avez du remarquer que la sortie ne se met à jour que lorsque les zones de texte perdent le focus. On peut remédier à ce problème avec l’attribut incremental="true" (à placer sur le contrôle) qui va provoquer la mise à jour du modèle à chaque entrée de l’utilisateur. Il est utilisable sur tous la plupart des contrôles (ceux qui servent à chosir ou modifier une valeur).

Sélection unique

XForms met l’accent sur la sémantique comme nous allons le voir avec les contrôles de sélection.

Pour avoir un contrôle permettant la sélection unique, XForms met à notre disposition l’élément select1, qui accepte bien entendu un label avec l’élément label.

On place dans l’élément select1 les différentes entrées avec l’élément item. Chaque item peut avoir deux enfants, un label (élément label) qui sera utilisé pour le texte de l’entrée et la valeur associée (élément value) qui elle sera associée à l’instance si l’entrée est sélectionnée. Le label est donc juste là pour la présentation.

Avec les formulaires HTML classiques, on devaient utiliser différents éléments pour faire une sélection unique selon le rendu que l’on voulait avoir. Avec XForms, c’est l’attribut appearance qui détermine l’apparence du contrôle. On peut ainsi avoir au choix une liste déroulante ou des boutons radio. Chaque implémentation peut afficher les contrôles d’une manière différente. Ce qui est important, c’est donc la sémantique : on utilise minimal lorsqu’on veut que le contrôle prenne le moins de place et full si on veut au contraire qu’il soit étendu. Entre les deux, on a la valeur compact. Au final, les données récoltées sont de toute façon les mêmes. Il faut parfois savoir lâcher prise sur l’interface utilisateur…

Lorsqu’on sélectionne une entrée dans un des trois contrôles, les autres sont mis à jour automatiquement. Cela illustre bien comment le modèle met à jour les vues qui sont liées aux mêmes données.

Sélection multiple

Il est aussi possible de demander à l’utilisateur de sélectionner plusieurs entrées dans une liste. On utilise dans ce cas le contrôle select.

Mais dans ce cas, comment sont collectées les données ? Qu’obtient-on au final dans l’instance ? C’est simple : le nœud relié à un tel contrôle reçoit la liste des valeurs des entrées sélectionnées, les valeurs étant séparées par des espaces. C’est pourquoi les valeurs ne doivent pas contenir d’espaces.

Comme pour les formulaires HTML, il est possible de grouper les différentes entrées. XForms permet cela en entourant les groupes d’entrées (item) avec l’élément choices. Comme toujours, la valeur textuelle du groupe est donnée par l’élément label. (Cet élément est aussi utilisable pour une sélection simple avec l’élément select1.)

Voyez ici les différentes apparences possibles, qui dépendent de votre processeur XForms.

On a préselectionné trois entrées en écrivant

dans l’instance.

Sélection dynamique

Cette manière de faire a plusieurs défauts : elle retourne un résultat plus difficilement traitable (une liste de valeur séparée par des espaces, ce n’est pas très XML), les valeurs ne peuvent pas contenir d’espace et, surtout, elle est rigide dans le sens ou les valeurs possibles sont codés en dur dans le document.

Évidemment, il existe un moyen de créer des sélections dont les entrées sont dynamiques avec XForms. Au lieu d’indiquer en dur les différentes valeurs, on utilise l’élément itemset qui va jouer le rôle de générateur de valeurs à partir de données contenus dans un modèle et qui se place comme fils de select ou select1. Son attribut nodeset désigne l’ensemble de nœud qui va servir de base pour la liste. C’est un comme si itemset générait une liste d’item.

Et comme pour les sélections précédentes, on utilise les éléments label (qui correspond au texte affiché dans la liste) et value (qui correspond à la valeur de l’entrée) avec l’attribut ref pour référencer le nœud à lier. Mais attention, la valeur n’est plus condmanée à être une chaîne de caractère sans espaces. La valeur peut maintenant être un élément XML. Ainsi, avec itemset, une sélection de plusieurs élément ne donnera plus une liste de valeurs dans le modèle mais un ensemble d’éléments, ce qui est plus dans l’esprit de XML.

L’exemple suivant contient plusieurs instances. Pour préciser l’instance qu’on désire utiliser, on utilise la fonction XPath instance('id de l’instance') qui renvoie la racine de l’instance désignée. Ici, on a une instance pour les données servant dans la liste de sélection et une instance pour stocker le résultat.

On sélectionne uniquement le texte pour le label, mais le nœud entier pour la valeur. Ne vous trompez pas : même si la valeur de sortie est une liste séparée par des espaces blancs, l’instance resultat contient bien les éléments XML, par exemple comme ceci :

C’est une fonctionnalité très puissante quand on la couple à l’utilisation de l’attribut src des instances. Voici comment on charge la liste des pays ISO avec XForms :

Sélections dynamiques

On peut se servir de l’élément itemset pour créer des sélections dynamiques, dont l’une est modifiée selon la valeur sélectionnée dans une autre. L’idée est de charger un structure sous forme arborescente :

(Il sagit évidemment des jours de la semaine grolandaise.) On va d’abord créer une première liste à partir des attributs nom. La sélection sera stockée dans une instance séparée. Ensuite, une seconde liste prendra en compte le résultat de cet dernière instance pour créer une liste à partir des nœuds de l’élément jour sélectionné.

C’est le rôle de l’expression XPath instance('jours')/jour[@nom = instance('resultat')/jour]/moment qui sélectionne les éléments moment de l’élément jour porte l’attribut nom qui a la valeur de la liste de sélection précédente.

Ce formulaire a deux défauts : le résultat contenu dans l’élément instance('resultat')/moment n’est pas remis à zéro lorsqu’on change de jour, et on voudrait que le premier élément soit automatiquement sélectionné. Nous verrons plus tard comment réaliser ceci.

Voici comment on peut en quelques balises et deux ou trois expressions XPath se passer de Javascript. La logique vous viendra progressivement, mais vous vous surprendrez à trouver des astuces qui vous éviteront d’avoir recours à des scripts.

Commande d’étendue

La commande d’étendue est une nouveauté de XForms. Elle permet de sélectionner une valeur entre deux bornes. Elle peut être utilisées pour des nombres et pour des dates, mais nous traiterons ici le cas de nombres (nous verrons la suite dans le chapitre sur le typage).

L’élément range a trois attributs qui permettent de contrôler l’étendue : start et end qui indiquent les valeurs de début et de fin de la commande d’étendue, et step (optionel) qui donne le pas pour la sélection. Testons avec et sans ce dernier attribut :

Dans cet exemple encore on donne des valeurs par défaut aux données que l’on veut collecter.

Vous avez surement tiqué sur le

Ces éléments sont obligatoires mais je ne peux pas vous en dire plus pour le moment. Sachez seulement que deux sortes de type sont acceptés : des types numérique et des types de date. Plus de détails dans le chapitre sur le typage.

Les boutons

Voici un titre assez générique pour finir la présentation basique (car sans typage) des contrôles de XForms.

Envoi de fichier

Le contrôle d’envoi de fichier est obtenu grâce à l’élément upload. Le fichier sera stocké comme les données textuelles dans le balisage de l’instance.

Son attribut mediatype permet de restreindre les types de fichier acceptés, en y indiquant la liste des types mimes séparés par des espaces. On peut donc n’accepter que les fichiers audio (audio/*), que les vidéos (video/*), que les images, etc. Dans l’exemple suivant, on n’accepte que les images PNG et SVG.

Si votre processeur XForms est bon, vous devriez ne pouvoir sélectionner que des fichiers SVG et PNG. Pour la ligne ]]>, une fois encore je vous en expliquerais le sens dans le chapitre taitant du typage.

Déclencheur

Vous pouvez afficher un bouton qui servira à déclencher une action (encore une fois, c’est traité dans une chapitre suivant) avec l’élément trigger. Il n’est pas lié à un élément d’une instance puisqu’il ne permet pas de modifier ou d’entrer une donnée. Son utilisation est simplissime :

Même si l’apparence est variable d’une implémentation à l’autre, on a le plus souvent avec appareance="minimal" un déclencheur qui ressemble à un lien.

Contrôle de soumission

Pour finir, voici le bouton qui sert à soumettre un formulaire : submit. Son apparence est la même que pour le déclencheur dans la plupart des cas.

Une chose manque : comment soumettre réellement ses données ? C’est l’objet du prochain chapitre et soyez sûr qu’il vous réserve quelques surprises…

Contact : tangui.lepense@free.fr - Jabber : Tangui@im.apinc.org
Merci à Link Mauve pour sa relecture, ses conseils et ses corrections.

Ce tutoriel SVG (texte et images d'exemple) de Tangui Le Pense est mis à disposition selon les termes de la licence Creative Commons Paternité - Partage à l'Identique 3.0 non transposé. Basé(e) sur une oeuvre à svground.fr.