Cours MIF13 technos côét client 2

22/09/2009
MIF13
Programmation Web
TECHNOLOGIES
CÔTÉ CLIENT
( LAN G AG E S D É D I É S AU W E B
2 ÈME PAR TI E )
LIONEL MÉDINI
SEPTEMBRE-DÉCEMBRE 2009
Plan du cours
Partie 1
Localisation et identification de ressources
Introduction aux langages à balises et aux langages dédiés au
Web
XML
(X)HTML
Validation de documents
MIF 18
Schémas XML
Xpath
Plan du cours
Transformation d’arbres XML : XSL
MIF 18
Schémas XML
Xpath/Xquery
Partie 2
XSL : transformation d’arbres
Caractéristiques de XSL
Officiellement : XML Stylesheet Language
En pratique, ça ne sert à rien d’appliquer des éléments de style
à un document XML
Mais XSL fournit un mécanisme très puissant pour
transformer un arbre XML
Principe de fonctionnement
XSLT
CSS : caractéristiques de styles et outils disponibles sur le Web
Autres types de technos côté client
En un autre arbre XML (échange de données)
En un arbre XHTML (visualisation des données XML)
En un texte simple (fichier non destiné à une application utilisant
un parser XML)
En un document papier formatté (XSL-FO)
Présentation générale et pointeurs
JavaScript : principes de scripting/programmation côté client
SVG, Flash, Silverlight
Transformation d’arbres XML : XSL
Utilisation la plus courante de XSL
Niveau
structuration
Arbre XML source
(données)
Application : navigateur…
Transformation d’arbres XML : XSL
Les deux composants de XSL
XPath
Processeur XML
DTD ou schéma XML
(structure)
XPath
Données et métadonnées
Niveau
composition
Description de l’arbre résultant
(modèle de transformation XSL)
Permet de pointer vers les données de l’arbre XML
Ne respecte pas la syntaxe XML
Processeur XSLT
pour le parcours de documents XML
pour le test de valeurs associées aux contenus ou aux attributs
d’éléments
pour ne pas « perturber » l’analyse des feuilles de style XSLT par le
parser XML
Mise en forme
(feuilles de style CSS)
Niveau
visualisation
Document XHTML
1
22/09/2009
Transformation d’arbres XML : XSL
Les deux composants de XSL
XPath
Les deux composants de XSL
XPath
Nœud
Tout type de données (élément, attribut, PI)
Racine du document : '/‘
Les éléments sont identifiés par leurs noms
Les attributs sont identifiés par '@' suivi du nom de l’attribut
Nom d’axe
Déplacements complexes dans l’arbre XPath
Syntaxe : Nom_D_Axe::Nom_De_Noeud
Recommandation : http://www.w3.org/TR/xpath20/#axes
Absolu : à partir de la racine de l’arbre XPath
Relatif : à partir du nœud contextuel
Récursif : à partir du nœud contextuel, mais seulement « vers le bas »
Description
Exemple d’utilisation/
syntaxe abrégée
self::node()
ou
Transformation d’arbres XML
: XSL
./node() ou .
Nœud contextuel
child
Enfants du nœud contextuel
descendant
Tout enfant, petit enfant etc. du nœud contextuel
descendant::Etat_civil
descendant-or-self::
Etat_civil ou .//Etat_civil
parent
Parent du nœud contextuel
parent::Prenom ou
../Prenom
ancestor
Tout parent, grand parent etc. du nœud contextuel
ancestor::Prenom
ancestor-or-self
Comme parent + le nœud contextuel lui-même
ancestor-or-self::Prenom
following-sibling
Tous les frères suivants du nœud contextuel (vide si le nœud following-sibling::Nom
est un attribut)
preceding-sibling
Tous les frères précédents du nœud contextuel (vide si le
nœud est un attribut)
preceding-sibling::Prenom
following
following–sibling + descendants de tous les nœuds frères
suivants
following::Nom
preceding
preceding–sibling + descendants de tous les nœuds frères
précédents
preceding::Prenom
attribute
Attributs du nœud contextuel
attribute::id ou./@id
namespace
Tous les nœuds appartenant au même espace de noms que
le nœud indiqué
namespace::xhtml:div
Transformation d’arbres XML : XSL
Les deux composants de XSL
XPath
Opérateurs et fonctions
Accesseurs
Transformation d’arbres XML : XSL
child::Etat_civil ou
Etat_civil (défaut)
descendant-or-self Comme descendant + le nœud contextuel lui-même
Axes de navigation (poly p. 75)
Chemin de localisation
self
Transformation d’arbres XML : XSL
Les deux composants de XSL
XPath
Transformation d’arbres XML : XSL
Les deux composants de XSL
XSLT : principes de base
• Pour récupérer un élément d’un nœud
• Exemples : node-name(), string(), base-uri()
Génération d’erreurs
Génération de traces
Constructeurs
• error()
• trace()
• Pour les types de données XML spécifiques
• Exemple : MonType()
Opérateurs et fonctions
Expression de caractéristiques de sélection complexes
Communs avec XQuery
Recommandation à part entière :
http://www.w3.org/TR/xquery-operators/
Description de l’arbre résultant (programmation déclarative)
Application XML définissant des « éléments de transformation »
⇒
Référence à un espace de noms spécifique « xsl: »
Éléments et attributs spécifiques interprétés par un processeur
XSLT
Structuration par modèles (« templates ») de contenus
Définissant le traitement à appliquer à un élément repéré par une
expression XPath
Imbriqués grâce à des mécanismes d’application de templates
parallèle avec les fonctions en programmation déclarative
Casting entre types de données
2
22/09/2009
Transformation d’arbres XML : XSL
Principe général de la transformation d’arbres
Requête XPath
Données et méta-données
<CV xmlns="…">
<Etudiant>
<Nom>Toto</Nom>
<Rubrique>
<Item>
<Contenu>1</Contenu>
<Contenu>2</Contenu>
<Contenu>3</Contenu>
</Item>
</Rubrique>
</Etudiant>
</CV>
Légende
élément
attribut
texte
Processeur
XSLT
Arbre XML source
(données)
Description de l’arbre résultant
(feuille de style XSLT)
• Modèles de contenus
• Conditions à remplir pour ces modèles
• Spécification des données à récupérer
Éléments de premier niveau (cardinalité=0 ou 1)
<xsl:strip-space> et <xsl:preserve-space> : gestion des
espaces dans l’arbre résultant (resp. suppression et conservation)
• Attribut elements : noms des éléments concernés séparés par des
espaces
<xsl:template> : modèle racine de l’arbre de sortie
• Attribut match : désigne le nœud XPath concerné par le modèle (au
premier niveau, toujours "/")
• Contient la racine de la déclaration de l’arbre de sortie
Autres éléments (key, variable, attribute-set, param) : voir la
recommandation
Transformation d’arbres XML : XSL
Les deux composants de XSL
XSLT : les éléments
Génération de contenus XML
<xsl:element name="p" namespace="xhtml">Contenu de
l’élément (ici: un paragraphe XHTML)</xsl:element>
Remarque : <xsl:element> n’est nécessaire que lorsque le nom de
l’élément à générer doit être calculé
<xsl:attribute name="href" namespace="xhtml">Contenu
de l’attribut (ici : référence XHTML)</xsl:attribute>
Remarque : <xsl:attribute> se place dans l’élément auquel il se
rapporte
<xsl:text>Contenu textuel quelconque.</xsl:text>
Remarque : <xsl:text> ne sert qu’au formatage du texte (gestion des
espaces…)
Tout autre élément XML bien formé est accepté
Élément racine
<xsl:stylesheet version="1.0"
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>
<html xmlns="…">
<head>
<title> Toto </title>
</head>
<body>
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</body>
</html>
Les deux composants de XSL
XSLT : syntaxe
Les deux composants de XSL
XSLT : syntaxe
Arbre résultat
(après transformation)
Transformation d’arbres XML : XSL
Transformation d’arbres XML : XSL
Éléments de premier niveau (cardinalité=0 ou 1)
<xsl:output> : définit le type d’arbre de sortie
• Attribut method : 3 valeurs possibles (text, html, xml)
• Autres attributs : version, encoding, standalone, indent…
<xsl:include> et <xsl:import> : permettent d’inclure d’autres
feuilles de style
• Attribut href : URI de la ressource à inclure
• Différence entre les deux : règles de priorités
Transformation d’arbres XML : XSL
Les deux composants de XSL
XSLT : les templates
Définition
Modèles simples : <xsl:template match="noeud_XPath">
• L’expression XPath qui définit le nœud peut inclure un filtre
• Ce nœud devient le nœud contextuel dans le template
Modèles nommés : <xsl:template name="nom_tmplate">
Appel
Modèles simples :
<xsl:apply-templates select="expr_XPath" />
• L’expression XPath est un chemin de localisation qui désigne le nœud
Modèles nommés :
<xsl:call-template name="nom_tmplate" />
Transformation d’arbres XML : XSL
Les deux composants de XSL
XSLT : les éléments
Traitement de contenus de l’arbre XML source
<xsl:value-of select="expr_XPath" />
• Permet d’obtenir la valeur d’un nœud (élément ou attribut)
• L’expression XPath est un chemin de localisation
• Elle désigne un nœud à partir du nœud contextuel
<xsl:copy-of select="expr_XPath" />
• Permet de recopier dans l’arbre destination toute une partie de l’arbre
source
• L’expression XPath fonctionne comme précédemment
<xsl:copy />
• Permet de copier uniquement un élément sans ses sous-éléments
3
22/09/2009
Transformation d’arbres XML : XSL
Les deux composants de XSL
XSLT : les éléments
Structures de contrôle
<xsl:if test="expr_XPath">Contenu
conditionnel</xsl:if>
• Le contenu conditionnel peut être composé d’autres éléments
(<xsl:value-of select="expr_XPath" />)
<xsl:for-each select="expr_XPath">Contenu
répété</xsl:for-each>
• Cet élément est redondant avec <xsl:apply-templates /> mais
rend la feuille de style moins lisible
<!-- enseignement.xml -->
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="enseignement.xsl"?>
<enseignement>
<auteur>Lionel Médini</auteur>
<cours>
<titre>TI1 - systèmes d'information distribués</titre>
<niveau>Master 2</niveau>
</cours>
<cours>
<titre>MIF13 - programmation Web</titre>
<niveau>Master 1</niveau>
</cours>
</enseignement>
XSLT
Exemple
<!-- enseignement.xsl -->
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head><title>Liste des cours</title></head>
<body>
<ul>
<xsl:for-each select="enseignement/cours">
<xsl:sort select="niveau"/>
<li>
<span style="font-style: italic;"><xsl:value-of select="titre"/></span>
<span style="font-weight: bold;"> (cours de <xsl:value-of select="niveau"/>)</span>
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
21
MIF13 – 2008-2009
</xsl:stylesheet>
Transformation d’arbres XML : XSL
Quelques exemples d’outils
Dans un navigateur
IE : processeur XSLT incorporé à MSXML (contrôle ActiveX)
Gecko, WebKit : objet window.XSLTProcessor
En JavaScript :
Google AJAXSLT
Dans HTML-Kit (éditeur HTML WYSIWYG) :
plugin ErgXSLT
En Java, intégré à JAXP 2 (J2EE puis JEE5) :
TrAX Transformation API for XML (javax.xml.transform, xsltc)
En C / en PHP :
libxslt (PHP 5)
Transformation d’arbres XML : XSL
Les deux composants de XSL
XSLT : les éléments
Structures de contrôle
<xsl:choose>
<xsl:when test="expr_XPath1">
Contenu conditionnel 1
</xsl:when>
<xsl:when test="expr_XPath2">
Contenu conditionnel 2
</xsl:when>
...
<xsl:otherwise>
Contenu conditionnel n
</xsl:otherwise>
</xsl:choose>
Transformation d’arbres XML : XSL
Autre exemple
Date de 2002
À ouvrir uniquement avec IE ou une application ad hoc
http://www710.univlyon1.fr/~lmedini/LIA/LSI/Exam/Septembre/
Feuilles de style (X)HTML : CSS
Buts : définir des caractéristiques de style
Standardisées pour être reconnues par tous les navigateurs
Dans un langage différent de HTML pour séparer la forme du
fond
Externalisables pour pouvoir les réutiliser
Imbriquables pour pouvoir les appliquer à des sous-ensembles
de documents
4
22/09/2009
Feuilles de style (X)HTML : CSS
Trois niveaux d’application
Niveau élément : feuilles de style intégrées
Syntaxe du langage
Définition des caractéristiques de style
Élément
nom_element {caract1:valeur1; caract2: valeur2;…}
Classe de style
.nom_classe {caract1:valeur1; caract2: valeur2;…}
Sous-classe
nom_element.nom_classe {caract1:valeur1;…}
Pseudo-classes
a:visited {caract1:valeur1;…}
Remarque : on peut les combiner : a.rouge:visited
Application de styles
Syntaxe : caractéristiques de style dans la valeur de l’attribut style
de la balise ouvrante
Niveau document : feuilles de style incorporées
Feuilles de style (X)HTML : CSS
Syntaxe : élément <style type="text/css"> dans la balise
<head> d’un document HTML
Niveau site web : feuilles de style liées
Syntaxe
Caractéristiques de style dans un fichier à part
Lien vers ce fichier par son URI dans un document HTML :
<link rel="stylesheet" type="text/css" href="URI" />
éléments (X)HTML : pas besoin de demander l’application
Classes, sous-classes et pseudo-classes de style : attribut
class="nom_classe"
Feuilles de style (X)HTML : CSS
Autres technologies côté client
À retenir en CSS
On ne peut positionner que des éléments de type bloc
Les caractéristiques de style sont héritées entre les nœuds de
l’arbre (en cascade)
Pour les liens, le changement est dynamique mais pas
automatiquement réversible
ordonner les déclarations : link, visited, hover, active (LoVe
HAte)
Position du problème
Une page Web est statique (texte, images)
Le traitement de données par le serveur peut prendre du temps
Comment rendre les contenus plus dynamiques ?
Détail des caractéristiques : voir références sur la page
d’accueil du cours
Il existe un validateur de feuilles de style CSS
Animations, vidéo, contenus interactifs
Plusieurs manières de le résoudre
Rajouter des animations
Rajouter des traitements au niveau du client
Dans le navigateur
Dans un plugin ou un autre programme
Plusieurs types de technologies
Autres technologies côté client
Autres technologies côté client
Scalable Vector Graphics (SVG)
Application XML permettant de définir des images vectorielles
et des animations
Pris en charge par Mozilla mais pas par Internet Explorer
Exemple d’utilisation : voir TP1
Adobe Flash
Anciennement Macromedia Flash (rachat par Adobe en 2005)
Permet de définir
Des images (vectorielles ou bitmap)
Des animations dynamiques
De la vidéo
Des contenus interactifs…
Langage de programmation : ActionScript
De plus en plus populaire
Non supporté sur la majorité des téléphones et PDA
Cousin lointain d’EcmaScript
De nombreux sites complètement en Flash
5
22/09/2009
Autres technologies côté client
Adobe Flash
Côté client : nécessite un player (Adobe Flash Player)
Plugin dans le navigateur
Restrictions de sécurité
Présent sur 97% des navigateurs (selon Adobe)
Desktop application (aucune restriction)
Autres technologies côté client
SilverLight
Concurrent Microsoft de Flash
Environnement de développement propriétaire
Lien avac le monde Java : Flex
Format des fichiers : swf
Type MIME : application/x-shockwave-flash
Orienté prototype (permet l’héritage dynamique)
Non typé / typage dynamique (types associés aux instances et non
aux classes)
Interprété
Fonctionnel
Autres technologies côté client
JavaScript
Référence ECMAScript : http://www.ecmascript.org/
Version actuelle : 3.1 (4.0 en préparation)
Plusieurs versions découlant de la spécification générale
EcmaScript
Plugin dans Microsoft Internet Explorer (Windows et Mac)
Player de type desktop application
Sous Windows
Il existe une version pour Linux : Moonlight
Des versions pour Windows mobile 6 et Symbian OS sont
prévues
Autres technologies côté client
JavaScript
De loin le plus utilisé
Caractéristiques
Images, animations, vidéo, interactivité…
Côté client
Côté développeur
Version 3 (2007) : adjonction d’un support XML : E4X
Prise en charge par les navigateurs récents
Firefox 3 : JavaScript 1.8 (ECMAScript 3.1)
Safari 4 : JavaScript 1.9
Opera 9 : JavaScript 1.5 + JScript (ECMAScript 2)
Internet Explorer 8 : JScript 5.8 / JavaScript 1.5 (ECMAScript 3)
Chaque moteur implémente une version différente du langage :
http://en.wikipedia.org/wiki/JavaScript#Versions
Autres technologies côté client
JavaScript
Implémentations dans les navigateurs
JavaScript : open source, englobe la spécification ECMAScript
JavaScript 1.8 est totalement compatible avec ECMAScript 3.1
JavaScript 2.0 sera totalement compatible avec ECMAScript 4
Moteurs existants : SpiderMonkey (FireFox), V8 (Chrome), Nitro
(Safari)
JScript : propriétaire, implémenté dans IE
Base de langages de scripting commune pour de nombreux outils
Microsoft
• Managed Jscript : Moteur IE, SilverLight, Windows Script Host
• JScript .Net : Microsoft .Net Framework
Conclusion
Les technologies côté client sont vastes…
Les plus utilisées : (X)HTML, XML, CSS, JavaScript, Flash
…Et de plus en plus complexes
Un navigateur ne sert pas qu’à afficher des pages Web
Il contient de nombreux autres modules permettant de rendre
les contenus dynamiques
Malheureusement, ils ne fonctionnement pas tous de la même
façon
La partie cliente de votre application doit donc être
conçue en respectant les bonnes pratiques
(et bien entendu, en cohérence avec la partie serveur)
La prochaine version (5.8) satisfera ECMAScript 3.1
6