Master professionnel en ingnierie des systmes dinformation et du logiciel

1
Technologies Web avancées

• Master professionnel en ingénierie des systèmes
  dinformation et du logiciel
• Université 7 novembre à Carthage Années 2007 -
  2008Riadh BEN MESSAOUDhttp//eric.univ-lyon2.fr
  /rbenmessaoud

2
Plan du cours

• Éléments de bases du langage HTML
• Du HTML au XHTML
• Feuilles de styles en cascades (CSS)
• World Wide Web Consortium
• Documents XML
• Feuilles de style XSL (XSLT) (Suite)
• Schéma XML (XML Schema)
• Formulaires XForms

3
Plan du cours

• Éléments de bases du langage HTML
• Du HTML au XHTML
• Feuilles de styles en cascades (CSS)
• World Wide Web Consortium
• Documents XML
• Feuilles de style XSL (XSLT) (Suite)
• Schéma XML (XML Schema)
• Formulaires XForms

4
Introduction

• Limites des formulaires en HTML
• Depuis plusieurs années, les formulaires sont une
  composante essentielle des sites Internet.
• Les formulaires permettent une interactivité avec
  l'internaute.
• Néanmoins, les formulaires disponibles à l'aide
  des balises en HTML présentent des limitations
  qui deviennent gênantes
• une mauvaise intégration en XML certains de ces
  éléments (comme ltinputgt, par exemple), sont des
  balises vides non fermées 

5
Introduction

• Limites des formulaires en HTML
• des fonctionnalités limitées  pour réaliser de
  nombreuses actions
• pré-remplir dynamiquement certains éléments du
  formulaire,
• vérifier la validité d'une saisie (comme une
  adresse électronique)
• il est nécessaire de passer par un langage de
  script.
• un codage mêlant présentation et information 
• un support des éléments affichables dépendant
  fortement de l'outil utilisé.
• Le W3C a mis sur pied un groupe de travail, dont
  le résultat fut la publication en octobre 2003 de
  la recommandation pour le langage XForms.

6
Introduction

• Principes de XForms
• Un formulaire collecte des données  la
  représentation interne au navigateur de ces
  données est une instance data, basée sur XML.
• Les relations entre les données au sein de ces
  représentations sont plus complexes qu'en HTML
• En HTML, il ny a que des paires
  nom_variablevaleur.
• Dans XForms, deux champs de formulaires peuvent
  être interdépendants.
• A une saisie de l'utilisateur correspond une
  instance data, traitée en mémoire, qui en retour
  agit sur le formulaire qui lui a donné
  "naissance",
• Ceci conditionne la saisie de l'utilisateur.

7
Introduction

• Principes de XForms
• La soumission n'a lieu qu'à la fin du processus.
• Cette soumission est effectuée selon un formatage
  de données précis, conforme par exemple à un
  Schéma XML.
• La soumission permet un envoi au format XML, déjà
  acceptable, sans traitement par le serveur.
• Afin d'alléger encore la charge du serveur,
  XForms permet de réaliser des calculs sur les
  données avant leur soumission en utilisant XPath.
• Il est possible de réaliser tout ce que XPath
  permet
• des calculs sur les données,
• des vérifications en temps réel du formatage des
  données saisies,
• la gestion de champs de formulaires obligatoires,
  
• etc.

8
Introduction

• Principes de XForms
• Le but des membres du groupe de travail était de
  remplacer les scripts nécessaires dans les
  formulaires en HTML par des fonctionnalités XML.
• Cela est réalisé par un recours intensif à
• XPath pour les calculs et manipulations de
  chaînes de caractères 
• XML Schema pour les vérifications de formatage
  des données saisies 
• des fonctions de calcul supplémentaires telles
  que average(), min(), max(), etc.

9
Fonctionnalités des formulaires XForms

• Les éléments de formulaire HTML ont été remplacés
  par quelques équivalents XForms. D'autres sont
  nouveaux.
• Éléments (X)HTML Elément XForms
• ltinput type"text"gt ? ltinputgt
• lttextareagt ? lttextareagt
• ltinput type"password"gt ? ltsecretgt
• ltinput type"file"gt ? ltuploadgt
• ltbuttongt ? lttriggergt
• ltinput type"submit"gt ? ltsubmitgt
• ltselect multiple"multiple"gt ? ltselectgt
• ltinput type"checkbox"gt ? ltselectgt
• ltselectgt ? ltselect1gt
• ltinput type"radio"gt ? ltselect1gt

10
Fonctionnalités des formulaires XForms

• Nouveaux éléments XForms
• ltoutputgt une zone d'affichage dynamique
• ltrangegt un contrôle de la plage de valeurs
  autorisées pour une donnée

11
Fonctionnalités des formulaires XForms

• Extension des fonctionnalités HTML
• Les éléments ltinputgt, lttextareagt et ltsecretgt,
  appliquées à des données de type chaîne de
  caractères, ont le même comportement qu'en HTML.
• Lorsqu'ils sont appliqués à une donnée d'un autre
  type, le comportement peut être adapté.
• ? On peut imaginer un champ de saisie d'une
  donnée de type date qui se présente non comme un
  champ de saisie de texte, mais comme un
  calendrier interactif.

12
Fonctionnalités des formulaires XForms

• Extension des fonctionnalités HTML
• Les saisies de texte prévoient aussi
• des modes d'entrée
• du formatage automatique (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)
• des fonctionnalités simples de formatage au
  moment de la soumission (une conversion majuscule
  vers minuscule automatique).
• L'élément ltselectgt dispose d'un attribut,
  appearance, qui permet de spécifier si le champ
  doit se présenter sous la forme minimale
  (minimal), compacte (compact) ou complète (full).
  
• L'élément ltoutputgt permet l'affichage des données
  saisies en temps réel dans le formulaire.

13
Fonctionnalités des formulaires XForms

• Extension des fonctionnalités HTML
• L'élément ltrangegt 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'élément ltuploadgt 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.
• XForms offre aussi d'autres possibilités  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 HTML.
• XForms peut être interprété comme un langage de
  réalisation d'interface pour des applications Web.

14
Fonctionnalités des formulaires XForms

• Gestion des événements
• En HTML, certains événements n'étaient
  accessibles que par des appels à des scripts (par
  exemple, les événements onfocus, onblur,
  onselect...).
• XForms fait appel au modèle XML events, qui peut
  prendre en charge 
• la "focalisation" sur un élément de formulaire
• l'affichage d'un message
• le chargement d'une nouvelle URL (dans la fenêtre
  courante ou une autre)
• des calculs, des vérifications de conformité à un
  format prédéfini, des rafraîchissements
  d'écran...
• la soumission ou la remise à zéro d'un formulaire
• le défilement automatique le long d'un
  formulaire...

15
Dans la pratique

• Visualisation
• XForms est un langage nouveau ! Il n'est pas
  encore supporté par les navigateurs !
• Néanmoins, il est possible de tester son
  code avec
• Un utilitaire pour Internet Explorer 6-7,
  PicoForms (http//www.picoforms.com)
• un plug-in d'Internet Explorer 6, FormsPlayer
  (http//www.formsplayer.com)
• un petit navigateur Java dédié aux formats XML,
  X-Smiles (http//www.x-smile.org).
• Un plug-in de Mozilla Mozillla XForms project
  (http//www.mozilla.org/projects/xforms/)
• etc.
• Une liste plus complète d'implémentations est
  disponible au W3C (http//www.w3.org/MarkUp/Forms/
  implementations).

16
Dans la pratique

• Inclusion en XHTML
• Via les espaces de nom, XForms peut être intégré
  dans n'importe quel fichier XML.
• L'utilisation la plus répandue de XForms est dans
  un fichier XHTML.
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmlnsev"http//www.w3.org/2001/xml-events"
  xmlnsxf"http//www.w3.org/2002/xforms"gt
• ? Exemple simple

17
Un exemple simple

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
• xmlnsev"http//www.w3.org/2001/xml-events"
• xmlnsxf"http//www.w3.org/2002/xforms"gt
• ltheadgt
• lt?import namespace"xf" implementation"default
  pxf"?gt
• lttitlegtPremier document XFormslt/titlegt
• ltxfmodel id"premier"gt
• ltxfsubmission action"..."/gt
• lt/xfmodelgt
• lt/headgt
• ltbodygt
• ltpgtEntrez votre code client ?lt/pgt
• ltxfinputgt
• ltxflabelgtCode-client lt/xflabelgt
• lt/xfinputgt
• ltpgtCliquer sur le boutton soumettre.lt/pgt
• ltxfsubmitgt
• ltxflabelgtSoumettrelt/xflabelgt

18
Un exemple simple
19
Un exemple simple

• Dans lexemple on note la présence de
• l'appel à des espaces de nom pour l'insertion des
  éléments de formulaire 
• un modèle dans l'entête du fichier HTML
• les balises non insérées dans un élément
  particulier dans le corps du fichier (il n'y a
  pas de balise ltformgt) 
• la présence obligatoire d'éléments label, qui
  permettent à la fois de décrire chaque élément de
  formulaire, mais aussi de fournir le texte
  destiné à être affiché sur les boutons.

20
Un exemple plus évolué

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict
  .dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
• xmlnsev"http//www.w3.org/2001/xml-events"
  
• xmlnsxf"http//www.w3.org/2002/xforms"gt
• ltheadgt
• lt?import namespace"xf" implementation"default
  pxf"?gt
• lttitlegtCommandelt/titlegt
• ltxfmodel id"model1"gt
• ltxfinstancegt
• ltorder xmlns"" itemNum""gt
• ltquantity/gt
• lt/ordergt
• lt/xfinstancegt
• ltxfsubmission id"s01" method"put"
  action"commande.xml" /gt
• ltxfsubmission id"s02" method"post"
  action"http//xformstest.org/cgi-bin/showinstance
  .sh" /gt
• lt/xfmodelgt
• lt/headgt

21
Un exemple plus évolué

• ltbodygt
• ltpgtEntez le numéro et la quantité du produit
  ?lt/pgt
• ltxfinput model"model1" class"itemClass"
  ref"_at_itemNum"gt
• ltxflabelgtNuméro du produit lt/xflabelgt
• lt/xfinputgt
• ltbr /gt
• ltxfinput model"model1" ref"quantity"gt
• ltxflabelgtQuantité lt/xflabelgt
• lt/xfinputgt
• ltbr /gt
• ltxfsubmit submission"s01"gt
• ltxflabelgtEnregistrerlt/xflabelgt
• lt/xfsubmitgt
• ltpgtCliquez sur "Enregistrer" pour sauvegarder la
  commande.lt/pgt
• lt/bodygt
• lt/htmlgt

22
Un exemple plus évolué
23
Un exemple plus évolué

• Le modèle ltmodelgt doit répondre à deux tâches 
• définir la structure de l'instance data
  ltinstancegt 
• définir ce qui arrive lors de la soumission du
  formulaire ltsubmissiongt.
• La balise ltinstancegt définit les éléments XML qui
  figureront dans la soumission du formulaire.
• Il est possible de faire référence à un schéma
  externe, à l'aide d'un attribut src.
• Cette possibilité permet d'appliquer plus de
  contraintes aux données qui doivent être saisies.
• La balise ltsubmissiongt possède trois attributs
  id, action et method,
• id permet d'identifier le modèle de soumission 
• 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 XML selon un format précis.
  
• l'envoi "classique" (méthode "post"). Cette
  méthode est particulièrement adaptée à
  l'utilisation de Services Web.

24
Un exemple plus évolué

• Dans le formulaire lui-même, dans le corps du
  document, on note pour chaque champ l'utilisation
  des attributs 
• L'attribut model "pointe" vers le modèle
  d'instance data utilisé 
• L'attribut ref pointe, pour l'instance data
  sélectionnée, vers la balise à remplir 
• L'attribut class permet de faire référence à une
  propriété CSS gérant l'apparence de l'élément.
• L'élément ltsubmitgt possède un attribut submission
  désignant le type de soumission à employer. Cet
  attribut fait référence à la balise ltsubmissiongt
  d'identifiant correspondant.
• La chaîne de caractères envoyée par le formulaire
  lors de la soumission
• ltinstanceDatagt
• ltorder xmlns"" itemNum""gt
• ltquantitygtlt/quantitygt
• lt/ordergt
• lt/instanceDatagt

25
Pour aller plus loin

• Outre ses avantages par rapport aux formulaires
  HTML en termes d'allègement de code (en limitant
  le recours aux langages de script), XForms est un
  langage qui semble spécifiquement dédié à la
  réalisation d'interface pour des applications
  Web, mais aussi pour des Services Web.
• Il s'agit néanmoins d'un langage complexe, mais
  on n'a rien sans rien.
• Pour mieux explorer ce nouveau langage, jeter un
  oeil sur le document du W3C intitulé XForms for
  HTML Authors (http//www.w3.org/MarkUp/Forms/2003/
  xforms-for-html-authors.html).