Format SVG

Interactions XML

Les objectifs

Le langage XML ne fait que décrire le structure arborescente d'un document.
Pour apporter des comportements il faudra utiliser un langage de programmation.
Le W3C a normalisé le javascript.
La présentation des éléments peut être modifiée par des règles de style.
Le W3C a normalisé les CSS.

La bonne approche en programmation consiste à séparer chaque partie dans des ressources différentes, ainsi on placera par exemple le code XML dans un fichiers fichier.xml, les scripts javascript dans un fichier fichier.js et les styles CSS dans un fichier fichier.css.

Le javascript

javascript permet de manipuler l'arborescence décrite par le document XML, c'est à dire :
- ajouter, supprimer, modifier et permuter des éléments,
- ajouter, supprimer et modifier les attributs des éléments.
Il permet également de planifier des actions :
- à des instants donnés (fonction setTimeout()),
- par répétition (fonction setInterval()),
- par réaction à un événement externe (attributs onclik(), onmove(), ...)

d'autres actions sont également possibles telles que l'obtention de fragments XML par requête HTTP sur serveur distant, ...

La manipulation de l'arborescence par javascript

L'appel fondamental est document.getElementById(identifiant).
Il retourne un objet de type node à partir duquel il sera possible d'interagir avec le nœud concerné.
une fois un nœud récupéré il est possible :
- de modifier la liste de ses descendants,
- de modifier la liste de ses attributs,
- de modifier son contenu.
L'appel node.getElementsByTagName(tag) retourne l'ensemble des éléments de type tag dans la hiérarchie de l'objet node.

La manipulation de l'arborescence par javascript

La propriété node.children contient la liste des enfants du nœud node.
La propriété node.parentNode contient l'objet parent du nœud node.
La propriété node.attributes contient la liste des attributs du nœud node.
La méthode ntag_node = document.createElement('tag) crée une nouveau nœud dans le document dont le contenu est référencé par la variable ntag_node.
La méthode node.appendChild(ntag_node) placera le nœud ntag_node à la suite des éléments contenus dans node.

La manipulation de l'arborescence par javascript

La méthode node.settAttribute('nom_attribut','val') modifiera l'attribut nom_attribut de l'élément node en lui donnant comme nouvelle valeur val :
- si l'attribut existait déjà il sera modifié,
- dans le cas contraire il sera créé.
La méthode node.removeChild(subnode) permet de détruire le nœud subnode de la liste des enfants de node.
La méthode node.getNodeType() retourne le type d'élément de note sous forme numérique permettant ainsi de savoir s'il s'agit de texte, de balise XML, de la racine du document, ....

Le tableau ci dessous indique la valeur de retour en fonction du type d'élément visé par `node.getNodeType()` :
type de nœud	valeur de retour
`Element`	1
`Attribute`	2
`Text`	3
`Comment`	8
`Document`	9

La définition du style

Les CSS ont été définies dans le but de permettre l'affectation du style d'un document XML à partir de règles de styles externes au document visé.
Ce principe est largement répandu pour la mise en forme de documents HTML.
Il est également applicable à tout contenu XML dans la mesure ou le logiciel de rendu XML respecte correctement les directives de mise en forme.

La définition du style

le style est composé de couples propriété:valeur;.
Il peut être attribué directement dans les éléments par l'attribut style="prop1:val1;prop2:val2"
Il est plus judicieux de l'affecter à des éléments via un sélecteur CSS, dans ce cas la syntaxe sera de la forme :
```
selecteur1,selecteur2 {prop1:val1;prop2:val2}
```
Les sélecteurs les plus répandus sont :
- le sélecteur par balise XML : tag {prop:val;...}
- le sélecteur par classe : .la_classe {prop:val;...}
- le sélecteur par identifiant : #mon_id {prop:val;...}

Documentation

Quelques liens

la documentation sur javascript : http://www.toutjavascript.com/
les spécifications du W3C : http://www.w3.org/standards/webdesign/script.html/
Les spécifications sur les sélecteurs CSS2 : http://www.w3.org/TR/CSS2/selector.html