Damien ALEXANDRE portfolio - Web-développeur Intégrateur

Créer un Xforms

Bien que ce type de formulaire ne soit pas encore pleinement utilisable en production (à moins d’utiliser un support "serveur" à la Orbeon ou d’inclure une librairie Javascript à la FormFaces) il est important de se pencher dès maintenant sur le problème des Xforms.

Les formulaires HTML actuels sont complètement dépassés, et sans nos librairies Javascript nous ne pourrions rien en faire de bien (au sens ergonomie, vérification des données, aide à la saisie, ajax...). Le problème de ces Javascripts à profusion, c’est qu’on limite par là l’utilisation du formulaire aux uniques navigateurs graphique.
Qu’en est-il des périphériques mobile ? Des téléphones avec accès Wifi ? Des lecteurs MP3 avec Safari (iTouch inside) ? Ils sont de plus en plus nombreux, de plus en plus connectés. Comment proposer des formulaires vraiment universels ? Utilisable dans tout types de clients et s’adaptant aux besoins individuels ?

Xforms est notre sauveur.

Xforms est un dialecte XML (tout comme XHTML) servant donc comme son nom l’indique à concevoir des formulaires. Quitte à créer une nouvelle norme, autant faire ça bien et proposer de nouvelles fonctionnalités ! Les Xforms sont capable de faire tout ce que nous faisons déjà avec l’aide de Javascript, et bien plus encore.

La meilleure façon de s’approprier le langage étant encore d’essayer je vous laisse avec mon petit tuto sur Xforms.

Utiliser un Xforms

Comme signalé dans l’introduction, les Xforms ne fonctionnent pas encore dans nos navigateurs. Il y a plusieurs solution pour utiliser des Xforms (Orbeon, FormFaces) mais la plus propre à mon gout est d’utiliser l’extension Firefox qui va bien Elle est encore en développement mais elle fonctionne déjà très bien.
Une fois installé, rendez vous ici. C’est un exemple simple de Xforms, si il marche vous pouvez lire la suite.

Structure générale

Un Xforms est composé de trois parties : Les traitements, les données et les éléments de l’interface.

Traitements et données

Les traitements et les données se trouve dans un <model>, on y met des <instance> de données et des <submission> pour les traitements. C’est aussi dans le model qu’on va mettre tous les contrôles (<bind>), les messages (<message>) etc...
Le model se place dans le <head> de notre page.

Voyons un model simple :

<xf:model>
        <xf:instance id="mon-instance">
            <data xmlns="">
                <date/>
                <titre/>
                <texte/>
            </data>
        </xf:instance>
 
        <xf:submission action="http://localhost/xforms/blog.php" method="post" id="blog" replace="all"/>
    </xf:model>

Télécharger

Première question, qu’est ce que le xf : devant chaque balise ? Il s’agit de l’espace de nom réservé à Xforms, en effet comme nous allons mettre de l’Xforms dans nos documents XHTML, il faut pouvoir différencier les deux langage. Pour cela on déclare l’espace de nom Xforms de cette façon :

<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="fr" lang="fr"
      xmlns:xf="http://www.w3.org/2002/xforms">

Télécharger

XHTML sera alors le langage par défaut, et toutes les balises xf : seront déclaré comme étant du Xforms. On aurait pu choisir un autre espace de nom mais l’usage veut qu’on utilise xf :, ça ne fait pas partie de la norme, c’est juste une bonne pratique [1].

Notre instance comporte nos données. C’est dans ce nœud que nous devons déclarer tous les champs du formulaire. On peut leur assigner des valeurs par défaut, les structurer, les mettre les uns dans les autres... Notez que le nom <data> à été choisi arbitrairement, vous pouvez y mettre ce que vous voulez

Le submission remplace en quelque sorte le classique <form action="" method=""> de nos formulaires actuels. Les méthodes accepté sont cependant plus nombreuses, et la méthode POST ne fonctionne pas de la même façon. En effet cette dernière renvoie maintenant un document XML (notre instance ! Remplie avec les valeurs du formulaire). Pour le traiter avec PHP il faut donc utiliser HTTP_RAW_POST_DATA plutôt que le classique $_POST.
L’autre nouveauté est la méthode PUT, elle permet d’enregistrer l’instance en tant que fichier sur le serveur (ou sur le client !).

L’interface

Maintenant que nos données sont déclarées, il faut permettre à l’utilisateur de les modifier et de les voir. On place donc dans notre <body> les champs dont nous avons besoin.

<p>
        <xf:input ref="titre" incremental="true">
            <xf:label>Titre</xf:label>
            <xf:alert>Veuillez saisir un titre !</xf:alert>
            <xf:hint>Le titre de votre article</xf:hint>
        </xf:input>
        <xf:submit submission="blog"><xf:label>Envoyer</xf:label></xf:submit>
    </p>

Télécharger

On a donc notre input, celui ci contient un label (Qui a la même utilité qu’en XHTML), un alert (Qui contient le message à afficher quand le champ n’est pas valide, nous verront plus tard comment dire ce que doit contenir tel ou tel champ) et un hint (Qui contient une astuce comme son nom l’indique, c’est une indication sur ce que l’utilisateur doit mettre dans le champ). L’attribut incremental à true signifie qu’à chaque modification du champ on re-test la valeur, afin d’en définir la validité ou pas. L’attribut ref est la référence à notre donnée dans l’instance. Il peut s’agir d’une expression Xpath.

On a aussi notre bouton de soumission. Il a maintenant sa propre balise (tous les champs ont maintenant leurs propres balises) et fait référence à des submission de notre model. Cela signifie que l’ont peut très facilement proposer plusieurs destinations pour le même formulaire [2].

Exemple complet

Maintenant qu’on a vu le minimum légal, voyons donc un exemple complet :

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="fr" lang="fr"
      xmlns:xf="http://www.w3.org/2002/xforms"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<head>
    <title>Mon premier Xforms</title>
    
    <xf:model>
        <xf:instance id="mon-instance">
            <data xmlns="">
                <date>2007-10-13</date>
                <titre/>
                <texte/>
            </data>
        </xf:instance>
        
        <xf:bind nodeset="titre" constraint="string-length(.) &gt; 0"/>
        <xf:bind nodeset="texte" constraint="string-length(.) &gt; 0"/>
        <xf:bind nodeset="date" type="xsd:date"/>
 
        <xf:submission action="blog.php" method="post" id="blog" replace="all"/>
    </xf:model>
</head>
 
<body>
    <p>
        <xf:input ref="titre" incremental="true">
            <xf:label>Titre</xf:label>
            <xf:alert>Veuillez saisir un titre !</xf:alert>
            <xf:hint>Le titre de votre article</xf:hint>
        </xf:input>
    </p>
    <p>
        <xf:textarea ref="texte">
            <xf:label>Texte</xf:label>
            <xf:alert>Veuillez saisir un texte !</xf:alert>
            <xf:hint>Le corps de votre article</xf:hint>
        </xf:textarea>
    </p>
    <p>
        <xf:input ref="date" incremental="true">
            <xf:label>Date</xf:label>
            <xf:alert>Veuillez saisir une date !</xf:alert>
            <xf:hint>La date de publication de votre article</xf:hint>
        </xf:input>
    </p>
    <p>
        <xf:submit submission="blog">
            <xf:label>Envoyer</xf:label>
        </xf:submit>
    </p>
</body>
</html>

Télécharger

Exemple complet de formulaire Xforms simple.

Alors quoi de neuf dans ce premier exemple ? Les <bind> bien sûr ! Il font leur apparition, et il sont plutôt simple à comprendre.

nodeset="titre" : L’élément à surveiller
constraint="string-length(.) > 0" : La règle de validité (Xpath, Regex... il y a plein de possibilités)
type="xsd:date" : Le type (gros morceau que les types, il en existe beaucoup [3], et certains, comme le type date, produit l’apparition d’un calendrier permettant une saisie plus simple pour l’utilisateur. Ceci reste cependant à la bonne grâce du logiciel client).

Je ne vais pas expliquer plus longuement les expressions Xpath permettant de vérifier la validité d’un champ, Xpath est une technologie à part entière qui mérite son propre cours.

Jouez un peu avec le formulaire, essayez de l’envoyer sans remplir les champs, essayez de rendre la date invalide... vous allez normalement comprendre tout ce qu’on vient de voir.

Ajoutons maintenant un peu de style à notre formulaire.

Un peu de CSS dans notre Xforms

Les Xforms apportent leurs propres pseudo classes CSS, je vais commencer par vous montrer le code directement pour vous l’expliquer par la suite.

@namespace xf url("http://www.w3.org/2002/xforms");
        body { font-family:Arial, Helvetica, sans-serif; font-size:75%; margin:0; padding:0; }
        xf|input xf|label {font-weight: bold;}
        *:invalid > xf|alert { color:pink; display:inline; }
        p { margin:20px; }
        xf|input:invalid { color:pink; }

Télécharger

Nous devons, tout comme pour le document XHTML, déclarer un espace de nom pour nos balises Xforms dans notre CSS, c’est le rôle de @namespace, les balises Xforms sont ensuite sélectionné avec le préfixe xf|.
Dans ce CSS nous donnons un style aux label, et aux champs :invalid ! En effet les champs non valides peuvent être stylé grâce à cette nouvelle pseudo classe !

Nous changeons aussi le comportement des alert, maintenant ils s’afficheront à côté du champ, dans la page.

Exemple complet de formulaire Xforms simple avec styles CSS.

Comme vous pouvez le voir, tant qu’il reste des champs en rouge, il est impossible de soumettre le formulaire.

Allez plus loin

Il y aurait encore beaucoup de choses à dire sur Xforms. En attendant que je rédige d’autre cours sur des points plus précis, je vous conseille ces quelques sources de bonne facture :

Commentaires, réactions : sur le blog ! Merci.
Dernière mise à jour le 13 Octobre 2007.

Tutoriel Xforms est mis à disposition selon les termes de la licence Creative Commons Paternité-Pas d'Utilisation Commerciale 2.0 France par son auteur, Damien ALEXANDRE.