<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE chapitre SYSTEM "../ressources/chapitre22.dtd">

<chapitre typecourssiteweb="xml">

<cours nomfichier="xforms">Cours d'initiation à XML</cours>

<entete>
	<titre>Plus loin que les formulaires HTML: XForms</titre>
	<auteur email="Gilles.Chagnon@upmc.fr">G. Chagnon</auteur>
	<resume>XForms est un format de description de formulaires dotés de fonctionnalités avancées par rapport à leur ancêtre de la norme HTML.</resume>
	<motsclefs>xforms, xml, formulaire</motsclefs>
</entete>

<corpus>

<partie titre="Généralités" ancre="xformsgene">
	<section titre="Limites des formulaires en HTML" ancre="limiteshtml">
		<paragraphe>
			<texte>Les formulaires sont depuis plusieurs années une composante essentielle des sites Internet. Ils permettent en effet, à moindres frais, d'apporter une touche d'interactivité à l'internaute. Néanmoins, les formulaires disponibles à l'aide des balises en <code type="langage">HTML</code> présentent des limitations qui sont maintenant gênantes&#160;:</texte>
			<liste>
				<item><texte>une mauvaise intégration en XML&#160;: certains de ces éléments (comme <code><![CDATA[<input>]]></code>, par exemple), sont des balises vides non fermées&#160;;</texte></item>
				<item><texte>des fonctionnalités limitées&#160;: pour réaliser de nombreuses actions, comme pré-remplir dynamiquement certains éléments du formulaire, ou bien vérifier la validité d'une saisie (comme une adresse électronique, par exemple), il est nécessaire de passer par un langage de script&#160;;</texte></item>
				<item><texte>un codage mêlant présentation et information&#160;;</texte></item>
				<item><texte>un support des éléments affichables dépendant fortement de l'outil utilisé.</texte></item>
			</liste>
			<texte>Afin de répondre à ces exigences de la communauté, le W3C a mis sur pied un groupe de travail, dont le résultat fut la publication en octobre 2003 de la <reference href="http://www.w3.org/TR/2003/REC-xforms-20031014/">recommandation</reference> pour le <reference href="http://www.w3.org/MarkUp/Forms/">langage <code type="langage">XForms</code></reference>. Une <reference href="http://www.w3.org/TR/2006/REC-xforms-20060314/" lang="en">seconde édition</reference> a été publiée en mars 2006. La <reference href="http://www.w3.org/TR/2007/REC-xforms-20071029/">troisième version</reference> est sortie le 29 octobre 2007.</texte>
		</paragraphe>
	</section>
	<section titre="Principe de XForms" ancre="pcpxforms">
		<paragraphe>
			<texte>Un formulaire collecte des données&#160;; la représentation interne au navigateur de ces données est une <autrelangue>instance data</autrelangue>, basée sur <code type="langage">XML</code>.</texte>
			<texte>Les relations entre les données au sein de ces représentations sont plus complexes qu'en <code type="langage">HTML</code> où, on le rappelle, on ne rencontre que des paires <code>nom_variable=valeur</code>. Dans le cas de <code type="langage">XForms</code>, deux champs de formulaires peuvent être interdépendants.</texte>
			<texte>À une saisie de l'utilisateur correspond une <autrelangue>instance data</autrelangue>, traitée en mémoire, qui en retour agit sur le formulaire qui lui a donné «&#160;naissance&#160;», ce qui conditionne la saisie de l'utilisateur, etc. La soumission elle-même n'a lieu qu'à la toute fin du processus. Cette soumission est effectuée selon un formatage de données précis, conforme par exemple à un Schéma, et permettant un envoi au format <code type="langage">XML</code>, déjà acceptable sans traitement par le serveur.</texte>
			<texte>Afin d'alléger encore la charge du serveur, <code type="langage">XForms</code> permet de réaliser des calculs sur les données <valeur>avant</valeur> leur soumission. En fait, il est possible de réaliser tout ce que <reference href="fonctionsxpath.html"><code type="langage">XPath</code></reference> permet, ainsi que des calculs plus aboutis, des vérifications en temps réel du formatage des données saisies, la gestion de champs de formulaires obligatoires, etc.</texte>
			<texte>Le but des membres du groupe de travail était de remplacer 80% des scripts nécessaires dans les formulaires en <code type="langage">HTML</code>, par seulement 20% de fonctionnalités. Cela est réalisé par un recours intensif&#160;:</texte>
			<liste>
				<item><texte>à <code type="langage">XPath</code> pour les calculs et manipulations de chaînes de caractères&#160;;</texte></item>
				<item><texte>à <code type="langage">XML Schema</code> pour les vérifications de formatage des données saisies&#160;;</texte></item>
				<item><texte>à des fonctions de calcul supplémentaires telles que <code>average()</code>, <code>min()</code>, <code>max()</code>, etc.</texte></item>
			</liste>
		</paragraphe>
	</section>
</partie>

<partie titre="Fonctionnalités des formulaires XForms" ancre="xformsfonctions">
	<section titre="Les éléments et leurs (éventuels) équivalents HTML" ancre="xformselt">
		<paragraphe>
			<texte>Les éléments de formulaire <code type="langage">HTML</code> ont été remplacés par quelques équivalents <code type="langage">XForms</code>. D'autres sont nouveaux.</texte>
			<tableau bordure="1">
				<ligne type="header">
					<colonne id="xhtml2"><texte>Élément <code type="langage">(X)HTML</code></texte></colonne>
					<colonne id="xforms"><texte>Élément <code type="langage">XForms</code></texte></colonne>
				</ligne>
				<ligne>
					<colonne headers="xhtml2"><texte><code><![CDATA[<input type="text">]]></code></texte></colonne>
					<colonne headers="xforms"><texte><code><![CDATA[<input>]]></code></texte></colonne>
				</ligne>
				<ligne>
					<colonne headers="xhtml2"><texte><code><![CDATA[<textarea>]]></code></texte></colonne>
					<colonne headers="xforms"><texte><code><![CDATA[<textarea>]]></code></texte></colonne>
				</ligne>
				<ligne>
					<colonne headers="xhtml2"><texte><code><![CDATA[<input type="password">]]></code></texte></colonne>
					<colonne headers="xforms"><texte><code><![CDATA[<secret>]]></code></texte></colonne>
				</ligne>
				<ligne>
					<colonne headers="xhtml2"><texte><code><![CDATA[<input type="file">]]></code></texte></colonne>
					<colonne headers="xforms"><texte><code><![CDATA[<upload>]]></code></texte></colonne>
				</ligne>
				<ligne>
					<colonne headers="xhtml2"><texte><code><![CDATA[<button>]]></code></texte></colonne>
					<colonne headers="xforms"><texte><code><![CDATA[<trigger>]]></code></texte></colonne>
				</ligne>
				<ligne>
					<colonne headers="xhtml2"><texte><code><![CDATA[<input type="submit">]]></code></texte></colonne>
					<colonne headers="xforms"><texte><code><![CDATA[<submit>]]></code></texte></colonne>
				</ligne>
				<ligne>
					<colonne headers="xhtml2"><texte><code><![CDATA[<select multiple="multiple">]]></code> ou plusieurs <code><![CDATA[<input type="checkbox">]]></code></texte></colonne>
					<colonne headers="xforms"><texte><code><![CDATA[<select>]]></code></texte></colonne>
				</ligne>
				<ligne>
					<colonne headers="xhtml2"><texte><code><![CDATA[<select>]]></code> ou plusieurs <code><![CDATA[<input type="radio">]]></code></texte></colonne>
					<colonne headers="xforms"><texte><code><![CDATA[<select1>]]></code></texte></colonne>
				</ligne>
				<ligne>
					<colonne headers="xhtml2"><texte>pas d'équivalent</texte></colonne>
					<colonne headers="xforms"><texte><code><![CDATA[<output>]]></code> (pour une zone d'affichage dynamique)</texte></colonne>
				</ligne>
				<ligne>
					<colonne headers="xhtml2"><texte>pas d'équivalent</texte></colonne>
					<colonne headers="xforms"><texte><code><![CDATA[<range>]]></code> (pour un contrôle de la plage de valeurs autorisées pour une donnée)</texte></colonne>
				</ligne>
				<legende>Équivalents <code type="langage">(X)HTML</code> des nouveaux éléments <code type="langage">XForms</code>.</legende>
			</tableau>
		</paragraphe>
	</section>
	<section titre="Extension des fonctionnalités HTML" ancre="extensions">
		<paragraphe>
			<texte>Les éléments <code><![CDATA[<input>]]></code>, <code><![CDATA[<textarea>]]></code> et <code><![CDATA[<secret>]]></code>, appliquées à des données de type chaîne de caractères, ont le même comportement qu'en <code type="langage">HTML</code>. Lorsqu'ils sont appliqués à une donnée d'un autre type, le comportement peut être adapté. On peut par exemple imaginer un champ de saisie d'une donnée de type <code>date</code> (voir les types prédéfinis dans le cours sur les <reference href="schema.html#types">Schémas</reference>), qui se présente non comme un champ de saisie de texte, mais comme un calendrier interactif.</texte>
			<texte>Les saisies de texte prévoient aussi des «&#160;modes d'entrée&#160;», du formatage automatique (par exemple, un champ ne peut accepter les numéros de téléphone que sous une certaine forme, grâce à un type de donnée défini dans un schéma), mais aussi des fonctionnalités simples de formatage au moment de la soumission (par exemple, une conversion majuscule vers minuscule automatique).</texte>
			<texte>L'élément <code><![CDATA[<select>]]></code> dispose d'un attribut, <code>appearance</code>, qui permet de spécifier si le champ doit se présenter sous la forme minimale (<code>minimal</code>), compacte (<code>compact</code>) ou complète (<code>full</code>).</texte>
			<texte>L'élément <code><![CDATA[<output>]]></code> permet l'affichage des données saisies en temps réel dans le formulaire. Par exemple (les données saisies dans le formulaire sont <valeur>mises en valeur</valeur>)&#160;:</texte>
			<texte><code>Vous êtes en train de commander </code><valeur>3756 briques</valeur><code> en </code><valeur>porcelaine de Chine</valeur><code>. En êtes-vous sûr</code><valeur>e</valeur><code>?</code></texte>
			<texte>L'élément <code><![CDATA[<range>]]></code> peut s'afficher comme une sorte de curseur coulissant le long d'une règle graduée, ou bien un bouton que l'on peut tourner. L'avenir dira l'interface qui deviendra la plus habituelle.</texte>
			<texte>L'élément <code><![CDATA[<upload>]]></code> va au-delà de la simple boîte de dialogue d'ouverture de fichier, puisque le groupe de travail XForms prévoit qu'il soit possible de gérer par ce genre d'interface la capture à partir d'un scanner ou d'un appareil photo numérique connecté à la machine, un micro, etc.</texte>
			<texte><code type="langage">XForms</code> offre aussi d'autres possibilités&#160;: champs de formulaires copiés (par exemple, pour entrer plusieurs fois des produits dans chariot électronique), affichage/masquage de portions du formulaire, gestion de formulaires s'étendant sur plusieurs pages <code type="typefichier">HTML</code>.</texte>
		</paragraphe>
		<paragraphe>
			<texte>En fait, il apparaît que <code type="langage">XForms</code> peut être interprété comme un langage de réalisation d'interface pour des applications Web.</texte>
		</paragraphe>
	</section>
	<section titre="Gestion des événements" ancre="gestionevt">
		<paragraphe>
			<texte>En <code type="langage">HTML</code>, certains événements n'étaient accessibles que par des appels à des scripts (par exemple, les événements <code>onfocus</code>, <code>onblur</code>, <code>onselect</code>...). <code type="langage">XForms</code> fait appel au modèle <reference href="http://www.w3.org/TR/xml-events/">XML events</reference>, qui peut prendre en charge&#160;:</texte>
			<liste>
				<item><texte>la «&#160;focalisation&#160;» sur un élément de formulaire</texte></item>
				<item><texte>l'affichage d'un message</texte></item>
				<item><texte>le chargement d'une nouvelle URL (dans la fenêtre courante ou une autre)</texte></item>
				<item><texte>des calculs, des vérifications de conformité à un format prédéfini, des rafraîchissements d'écran...</texte></item>
				<item><texte>la soumission ou la remise à zéro d'un formulaire</texte></item>
				<item><texte>le défilement automatique le long d'un formulaire...</texte></item>
			</liste>
		</paragraphe>
	</section>
</partie>

<partie titre="Dans la pratique" ancre="pratique">
	<section titre="Visualisation" ancre="visualisation">
		<paragraphe>
			<texte><code type="langage">XForms</code> est un langage nouveau et, en tant que tel, n'est pas encore supporté nativement par les navigateurs. Il est néanmoins d'ores et déjà possible de tester son code&#160;:</texte>
			<liste>
				<item><texte>soit avec un <autrelangue>plug-in</autrelangue> d'Internet Explorer 6, <reference href="http://www.formsplayer.com/">FormsPlayer</reference>&#160;;</texte></item>
				<item><texte>soit avec un petit navigateur Java dédié aux formats <code type="langage">XML</code>, <reference href="http://www.x-smiles.org">X-Smiles</reference> (ce navigateur implémente notamment en natif <code type="langage">SVG</code>, <code type="langage">SMIL</code>).</texte></item>
				<item><texte>soit avec l'<reference href="https://addons.mozilla.org/fr/firefox/addon/824">extension Mozilla XForms</reference> pour <logiciel lang="en">FireFox</logiciel></texte></item>
				<item><texte><reference href="http://www.orbeon.com/">Orbeon</reference> et <reference href="http://chiba.sourceforge.net/">Chiba</reference> sont deux implémentations Open Source utilisant Ajax.</texte></item>
			</liste>
			<texte>Une liste plus complète d'implémentations est disponible <reference href="http://www.w3.org/MarkUp/Forms/#implementations">au W3C</reference>.</texte>
		</paragraphe>
	</section>
	<section titre="Inclusion en XHTML" ancre="xhtml">
		<paragraphe titre="Principe" ancre="xhtmlpcp">
			<texte><autrelangue>Via</autrelangue> les <reference href="schema.html#espacenom">espaces de nom</reference>, <code type="langage">XForms</code> peut être intégré dans n'importe quel fichier <code type="typefichier">XML</code>. Mais l'utilisation la plus répandue est dans un fichier <code type="typefichier">XHTML</code>.</texte>
		</paragraphe>
		<paragraphe titre="Un premier exemple" ancre="xhtmlpremier">
			<texte>Un exemple simple donne les principes de base&#160;: il est disponible <reference href="exemples/xforms0.xml">en téléchargement</reference>. On notera&#160;:</texte>
			<liste>
				<item><texte>l'appel à des espaces de nom pour l'insertion des éléments de formulaire&#160;;</texte></item>
				<item><texte>un modèle dans l'entête du fichier <code type="typefichier">HTML</code>, et les balises non insérées dans un élément particulier dans le corps du fichier (il n'y a pas de balise <code><![CDATA[<form>]]></code>)&#160;;</texte></item>
				<item><texte>la présence <valeur>obligatoire</valeur> d'éléments <code><![CDATA[label]]></code>, qui permettent à la fois de décrire chaque élément de formulaire, mais aussi de fournir le texte destiné à être affiché sur les boutons.</texte></item>
			</liste>
			<texte>Sous réserve de correctement libeller le modèle (ce qui n'est pas le cas ici), la chaîne de caractères envoyée par le formulaire lors de la soumission est le fichier <code type="typefichier">XML</code> suivant&#160;:</texte>
			<exemple type="XML">
				<element nom="instanceData" indent="oui">
					<element nom="numero" niveau="1">(...)</element>
				</element>
			</exemple>
		</paragraphe>
		<paragraphe titre="Un exemple plus élaboré" ancre="xhtmldeuxieme">
			<texte>Le deuxième exemple, disponible lui aussi <reference href="exemples/xforms.xml">en téléchargement</reference>, présente quelques autres principes de base en plus de ceux précédemment évoqués&#160;:</texte>
			<liste>
				<item>
					<texte>Le modèle doit répondre à deux tâches&#160;:</texte>
					<liste type="ordonnee">
						<item><texte>il doit définir la structure de l'<autrelangue>instance data</autrelangue>, dans la balise <code><![CDATA[<instance>]]></code>&#160;;</texte></item>
						<item><texte>il doit aussi définir ce qui arrive lors de la soumission du formulaire.</texte></item>
					</liste>
				</item>
			</liste>
			<texte>La balise <code><![CDATA[<instance>]]></code> définit les éléments <code type="langage">XML</code> qui figureront dans la soumission du formulaire. Il est possible, au lieu de simplement écrire, dans l'ordre, la liste de ces éléments, de faire référence à un schéma externe, à l'aide d'un attribut <code>src</code>. Cette possibilité permet d'appliquer plus de contraintes aux données qui doivent être saisies.</texte>
			<texte>La balise <code><![CDATA[<submission>]]></code> possède beaucoup d'attributs&#160;; les trois plus importants sont <code>id</code>, <code>action</code> et <code>method</code>, comme en <code type="langage">HTML</code>. L'exemple donné en propose deux illustrations&#160;:</texte>
			<liste>
				<item><texte>Comme en <code type="langage">HTML</code>, <code>id</code> permet d'... identifier le modèle de soumission&#160;;</texte></item>
				<item><texte>la création d'un fichier local (méthode "put"). On peut se servir de cette méthode si on doit réaliser l'interface d'une application Web destinée à aider des utilisateurs novices à produire des fichiers <code type="typefichier">XML</code> selon un format précis.</texte></item>
				<item><texte>l'envoi "classique" (méthode "post"). Cette méthode est particulièrement adaptée à l'utilisation de <reference href="servicesweb.html">Services Web</reference>.</texte></item>
			</liste>
			<texte>Dans le formulaire lui-même, dans le corps du document, on note pour chaque champ l'utilisation de quelques attributs&#160;:</texte>
			<liste>
				<item><texte>L'attribut <code>model</code> "pointe" vers le modèle d'<autrelangue>instance data</autrelangue> utilisé&#160;;</texte></item>
				<item><texte>L'attribut <code>ref</code> pointe, pour l'<autrelangue>instance data</autrelangue> sélectionnée, vers la balise à remplir&#160;;</texte></item>
				<item><texte>L'attribut <code>class</code> permet de faire référence à une propriété <code type="langage">CSS</code> gérant l'apparence de l'élément.</texte></item>
			</liste>
			<texte>L'élément <code><![CDATA[<submit>]]></code>, enfin, possède un attribut <code>submission</code> désignant le type de soumission à employer. Cet attribut fait référence à la balise <code><![CDATA[<submission>]]></code> d'identifiant correspondant.</texte>
		</paragraphe>
		<paragraphe titre="Interactivité sans script" ancre="interactif">
			<texte>Le troisième exemple <reference href="exemples/xforms2.xml">en téléchargement</reference> ajoute quelques éléments&#160;:</texte>
			<liste>
				<item><texte>Une balise <code><![CDATA[<repeat>]]></code> permet d'indiquer une collection d'éléments de formulaire répétables.</texte></item>
				<item><texte>L'élément <code><![CDATA[<trigger>]]></code>, qui désigne un bouton, permet de spécifier une action de répétition. Pour cela, lorsque l'événement indiqué par l'attribut <code>ev:event</code> est activé, le formulaire s'ajoute (sans script, balise <code><![CDATA[<insert>]]></code>) un élément <code><![CDATA[<order>]]></code> (<code>nodeset=order</code>, après le dernier élément de même nom dans l'<autrelangue>instance data</autrelangue> (<code>at="last()" position="after"</code>)</texte></item>
			</liste>
		</paragraphe>
	</section>
</partie>

<partie titre="Pour aller plus loin..." ancre="papl">
	<paragraphe>
		<texte>Outre ses indéniables avantages par rapport aux formulaires <code type="langage">HTML</code> en termes d'allègement de code (en limitant le recours aux langages de script, notamment), <code type="langage">XForms</code> est un langage qui semble spécifiquement dédié à la réalisation d'interface pour des applications Web, mais aussi pour des Services Web.</texte>
		<texte>Il s'agit néanmoins d'un langage complexe -on n'a rien sans rien.</texte>
		<texte>Le plus simple, pour un auteur habitué aux formulaires <code type="langage">HTML</code> et désireux d'explorer ce nouveau langage, est de jeter un oeil sur le document du W3C intitulé <reference href="http://www.w3.org/MarkUp/Forms/2003/xforms-for-html-authors.html">XForms for HTML Authors</reference>.</texte>
	</paragraphe>
</partie>

</corpus>

</chapitre>