Après
avoir vu les aspects théoriques
de XForms, nous en venons ici au coté pratique de la chose:
réaliser un formulaire XForms.
Rappels
En HTML classique, un formulaire se trouve sous cette forme:
<form action="form.cgi"
method="POST">
<input type="radio" name="choix"
value="oui" checked>oui
<br>
<input type="radio" name="choix"
value="non">non
<br>
Votre nom: <input type="text" name="nom">
<br>
Votre prénom: <input type="text"
name="prenom">
</form>
Non seulement les attributs name
et value sont inclus dans le code
décrivant l'interface même du formulaire, mais en plus
sa présentation est indiquée directement: en l'occurence,
un bouton radio. De fait, ce formulaire ne pourrait être interprété
par une plateforme ne reconnaissant pas les boutons radio (un navigateur
vocal, par exemple).
De plus, parce que les formulaires HTML combinent les données
brutes, l'interface et les actions spécifiées en seul
bloc, il devient rapidement compliqué de modifier la présentation
ou les éléments d'un formulaire.
Enfin, impossible pour un développeur d'étendre les
possibilité du formulaire pour répondre à ses
propres besoins.
XForms étant un sorte de "module d'extension"
de XHTML (la "version XML du HTML"), il devient de fait
possible d'étendre les possibilités d'un formulaire,
tout en le rendant plus dynamique et plus facile à mettre
en place. Les navigateurs disposant d'un processeur XForms peuvent
afficher un formulaire XForms selon les capacités de la plateforme.
Le code
La structure de base d'un formulaire XForms est de la forme suivante:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xform="http://www.w3.org/2002/01/xforms">
<head>
<xforms:model id="formulaire1">
<xforms:instance>
<root>
<choix/>
<nom/>
<prenom/>
</root>
</xforms:instance>
<xforms:submission action="form.cgi"
method="post" id="form1envoi"/>
</xforms:model>
</head>
<body>
<xforms:select1
model="formulaire1" ref="choix">
<xforms:label>Faites
un choix</xforms:label>
<xforms:item>
<xforms:label>Oui</xforms:label>
<xforms:value>oui</xforms:value>
</xforms:item>
<xforms:item>
<xforms:label>Non</xforms:label>
<xforms:value>non</xforms:value>
</xforms:item>
</xforms:select1>
<xforms:input
model="formulaire1" ref="nom">
<xforms:label>Votre
nom: </xforms:label>
</xforms:input>
<xforms:input
model="formulaire1" ref="prenom">
<xforms:label>Votre
prénom: </xforms:label>
</xforms:input>
<xforms:submit
submission="form1envoi">
<xforms:label>Envoyer</xforms:label>
</xforms:submit>
</body>
</html>
Tous les formulaires XForms sont de cette forme, avec le XForms
Model (les données et la logique du formulaire) défini
dans le <head>, et la présentation
(l'interface utilisateur) dans le <body>.
Attention, cette forme d'écriture est sujette à changements,
étant donné que la spécification XForms n'est
pas encore définitive. Nous utilisons ici le
document de travail daté du 21 août 2002. Selon
toute vraisemblance, il correspond à la proposition définitve
pour la spécification, mais il vaut mieux être prudent
en ce domaine...
Le XForms Model indique juste que ce formulaire doit collecter
trois informations (sans qu'on leur donne déjà un
typage), et qu'elles seront envoyées via l'URL se trouvant
dans l'attribut action.
Nous utilisons ensuite trois contrôleurs XForms: <xform:select1>,
<xform:input> et <xform:submit>.
<xform:select1> permet de définir un contrôleur
où l'utilisateur doit choisir un seul élément
parmi une liste. Selon les capacités de la plateforme, le
navigateur affichera cette liste sous forme de boutons radio, de
liste déroulante ou autre... Pareillement, le texte de chaque
contrôleur est inclus dans un sous-élément du
contrôleur. Cela permet d'améliorer l'accessibilité
du formulaire.
<xform:input> et <xform:submit> sont assez proches de
leur équivalents HTML.
Il est important de noter que les contrôleurs XForms ne sont
pas des sous-élements, de <form>. Au lieu de cela,
l'attribut model="formulaire1"
les identifie comme faisant partie d'un formulaire donné.
Pour avoir plusieurs formulaires sur une même page, il faut
définir un modèle XForms pour chaque formulaire, puis
que chaque élément du formulaire fasse référence
à son modèle via l'attribut model=.
Cet attribut est optionnel: il n'est pas nécessaire s'il
n'y a qu'un seul formulaire dans la page.
Enfin, notez que les balises décrivant les contrôleurs
ont été simplifiées par rapport à HTML.
Il s'agit véritablement ici d'un formulaire XForms de base:
nous n'y avons ajouté aucune liaisons, ni contrainte de type,
comme il est possible de le faire. Nous verrons ces capacités
dans une prochain article.
Si le code source pour un même formulaire est sensiblement
plus long et visuellement plus compliqué que pour un formulaire
HTML, il faut bien intégrer les apports devenus nécessaire
de XForms: la possibilité d'utiliser un même formulaire
pour tous les supports possèdant un processeur approprié.
Utiliser XForms permettra à l'avenir de déployer,
par exemple, une seule version d'un site e-commerce, lisible par
l'ensemble des navigateurs, quel que soit la plateforme. Le temps
passé à apprendre et mettre en place XForms aujourd'hui
sera rapidement justifié par le temps gagner à mettre
en place une application globale.
|