Chapitre 6 : XForms

XForms représente la nouvelle génération de formulaires sur le Web, après les formulaires HTML. L’idée est d’aller au-delà des formulairers HTML, et de séparer l'aspect interface utilisateur et le modèle de données sous-jacent. En effet, le même composant de formulaire peut avoir des représentations très différentes suivant le navigateur et la plateforme utilisés pour "afficher" un document, permettant ainsi d'adapter la représentation aux caractéristiques de la plateforme, qu’il s’agisse d’une feuille de papier ou d’un périphérique manuel (un téléphone portable, par exemple).

1- XForms vs Formulaies HTML

Pour pouvoir faire cette comparaison, je vais essayer de présenter un formulaire HTML pour voir à quoi ressemble –t-il et en quoi XForms diffère-t-il ?

<table>

<tr><td>Prénom :<input name="prenom" type="text" size="30"></td></tr>

<tr><td>Fonction :<input name="fonction" type="text" size="30"></td></tr>

<tr><td>Login :<input name="login" type="text" size="30"></td></tr>

<tr><td>Mot de passe :<input name="passe" type="password" size="30"></td></tr>

</table>

</form>

Selon cet exemple, on voit bien qu’un formulaire HTML respecte en général un schéma qui contient trois types d’entrées encadrées par une balise FORM. ACTION renvoit au script de traitement de ce formulaire. Ceci est parfait pour des ordinateurs de bureau, mais pour des terminaux légers, exemple un portable, il serait impossible de répondre à une telle question (en l’absence d’une interface texte). C’est seulement en séparant la présentation du frontal, que ça serait possible de modifier la question selon le type de terminal utilisé.

La spécification XForms vient répondre à cette question en définissant trois aspects permettant de séparer clairement le but du formulaire de sa présentation : le modèle de données, l'interface utilisateur et le protocole d'envoi.

2- XForms : composants

2-1 Modèle de données

Le modèle de données est subdivisé en deux parties: les structures de données, d'une part, et les extensions (contraintes, dépendances, calculs), de l'autre. Il définit des types de données de manière très similaire au formalisme de schéma XML : String, Boolean, Number, Monetary Values, Date, Time of Day, Duration, URI, Binary. Chaque type de donnée a des "facettes" qui lui sont associées. Ces facettes représentent des détails du type (p.ex. précision, format, valeur par défaut, masque, etc.) et sont fournies sous la forme soit d'attributs, soit de sous-éléments. Par exemple:

<xform:string name="Nom" />
<xform:date name="DateParution" min="now" />
<xform:date name="DateNaissance" max="now"/>

Contrairement aux schémas XML pour lesquels, les facettes sont statiques, les facettes XForms peuvent être dynamiques, et correspondre ainsi à des contraintes qui évoluent en cours d'exécution (par ex. bornes inférieures et supérieures d'un élément de formulaire qui changent en fonction de ce que l'utilisateur aura tapé dans d'autres champs).

Exemple

<xform:date name="HeureDepart" max="HeureArrivee" />
<xform:date name="HeureArrivee" min="HeureDepart" />

2-1-1 Données structurées

Types énumérés : Basés sur le type string, en énumérant la liste des valeurs possibles.

<xform:string name="nationalité" enum="closed">
          <xform:value>Tunisien</value>
          <xform:value>Français</value>
            <xform:value>American</value>
</xform:string>

Structures hétérogènes : Permet de regrouper un certain nombre de champs pour former une entité.

<xform:group name="client">
      <xform:string name="Nom"/>
      <xform:string name="rue"/>
      <xform:string name="ville"/>
      <xform:string name="pays"/>
      <xform:string name="codePostal"/>
</xform:group>

Unions : Permet de déclarer différentes façons de fournir la même information. Exemple:

<xform:union name="genre">
          <xform:string enum="closed">
                    <xform:value>féminin</value>
                    <xform:value>masculin</value>
          </xform:string>
          <xform:string enum="closed">
                    <xform:value>F</value>
                    <xform:value>M</value>
          </xform:string>
</xform:union>

Variantes : Permet de déclarer des structures différentes en fonction de la valeur d'un champ.

<xform:switch name="address">

<xform:case locale="fr" condition="property(locale) is 'FR'">
        <xform:string name="rue"/>
        <xform:string name="ville"/>
        <xform:string name="canton"/>
        <xform:string name="codePostal"/>

</xform:case>

<xform:case locale="us" condition="property(locale) is 'US'">
        <xform:string name="street"/>
        <xform:string name="city"/>
        <xform:string name="state"/>
        <xform:string name="zipCode"/>

</xform:case>
            <xform:case locale="default">
        <xform:string name="rue"/>
        <xform:string name="ville"/>
        <xform:string name="pays"/>
        <xform:string name="codePostal"/>

</xform:case>
</xform:switch>

Structures homogènes : Permet de répéter une structure en plusieurs exemplaires.

<xform:array name="auteurs" minOccurs="1" maxOccurs="unbounded">
<xform:string name="auteur" />
</xform:array>

2-1-2 Langage de contraintes dynamiques

Les contraintes dynamiques sont définies par des expressions faisant référence à divers éléments du document. Ces éléments peuvent être référencés à l'aide de la notation définie dans XPath. Pour éviter des problèmes dus à l'utilisation de caractères spéciaux, les opérateurs utilisés dans les expressions sont des mots:

opérateur	signification
not expr	inverse le résultat de l'expression
if cond then expr1 else expr2	le résultat sera le résultat de la première expression si la condition est vraie, sinon celui de la deuxième expression
expr1 is expr2	retourne vrai si les deux expressions sont égales
expr1 is within(expr2,expr3)	retourne vrai si expr1 est une valeur comprise entre expr2 et expr3. Les expressions doivent être du même type de base (numérique, string, date, temps, valeur monétaire)
expr1 is before expr2	expr1 est inférieure à expr2
expr1 is below expr2	idem
expr1 is after expr2	expr1 est supérieure à expr2
and, or et xor	opérateurs booléens
plus, minus, times et over	opérateurs arithmétiques
string1 plus string2	concaténation de chaînes de caractères
nombre%	valeur divisée par 100
number(), sum(), floor(), ceiling(), average(), min(), max()	fonctions numériques
string(), concat(), starts-with(), contains(), substring-before(), substring-after(), substring(), string-length(), normalize-space() et translate()	fonctions de manipulation de chaînes de caractères
now()	heure actuelle du système sous forme de chaîne de caractères
submit()	envoi au serveur

2-2 Interface utilisateur

Cette section décrit les balises à utiliser pour décrire l'interface utilisateur, les propriétés de style permettant la mise en page des éléments interactifs de formulaires, ainsi que le mécanisme faisant le lien entre l'interface utilisateur et le modèle de données.

2-2-1 Eléments interactifs

Elément	Catégorie	Description
output	anyControl	élément non modifiable par l'utilisateur et affichant une valeur généralement calculée à partir d'autres éléments
textbox	anyNavControl	élément de saisie de texte. Les attributs rows et cols indiqueront les dimensions (en caractères).
checkbox	anyNavControl	case à cocher
exclusiveSelect	anyNavControl	élément de sélection simple contenant un élément <item value="..."> pour chaque valeur possible. La propriété de style list-ui peut prendre une des valeurs radio, checkbox, menu ou listbox pour définir l'apparence de l'élément
multipleSelect	anyNavControl	élément de sélection multiple contenant, comme l'élément exclusiveSelect, des éléments item.
button	anyNavControl	élément permettant de lancer une action. L'attribut action peut contenir une contrainte dynamique.
submit	button	élément provoquant l'envoi des données du formulaire. L'attribut action a pour valeur par défaut submit().
reset		pas encore défini
suspend		pas encore défini

D'autres éléments interactifs seront bientôt définis.

2-2-2 Eléments de mise en page

Elément

Description

groupbox

élément pouvant contenir d'autres éléments de formulaire. La propriété de style layout indique la direction selon laquelle les éléments contenus sont répartis (horizontal, vertical ou inherit). La propriété field-align indique l'emplacement de l'étiquette (sous-élément <caption>) d'un élément par rapport à l'élément interactif même (left, right, top, bottom, center, justify ou inherit).

2-3 Liens entre interface et modèle

Le lien entre éléments de l'interface et l'instance de données est réalisée à l'aide d'expressions dans le langage de contraintes dynamiques.

Chaque élément interactif de formulaire peut avoir un attribut ref qui prend pour valeur une expression dans le langage de contraintes dynamiques. Cet attribut indique quelle partie de l'instance de données l'élément interactif définit.

Exemple:

<xform:textbox ref="EmpruntLivre/Emprunteur/NomFamille">

</xform:instance>

L'élément <xform:instance> sert à définir la valeur intiale de l'instance de données associée à un formulaire. Ses sous-éléments devraient être modifiés par le logiciel employé par l'utilisateur lorsque celui-ci interagit avec les éléments interactifs du formulaire.

S'il y a plusieurs formulaires indépendants dans le même document, l'élément <xform:xform id="NomDuFormulaire"> permet de déclarer un formulaire et l'attribut xform:xform permet d'associer un élément interactif à un formulaire déclaré. Exemple:

<xform:textbox xform:xform=ref="EmpruntLivre/Emprunteur/NomFamille">

<xform:xform id="b">
          <xform:model>
            ...
          </xform:model>
          <xform:instance>
                     <EmpruntLivre>
                             <Emprunteur>
                                       <NomFamille>...</NomFamille>
                             </Emprunteur>
                    </EmpruntLivre>
          </xform:instance>
</xform:xform>

L'élément <xform:model> sert à définir le modèle de données associé à un formulaire, un peu comme une déclaration de type dans un langage de programmation. Si une instance est explicitement déclarée, elle doit être conforme au modèle associé au formulaire.

L'élément <xform:bind id="..." ref="..."> permet d'établir un lien entre modèle, instance et interface lorsque ces différentes parties ne sont pas directement imbriquées dans le même élément <xform:xform>.