Dart - Le nouveau langage du Web
La manipulation du DOM
La librairie dart:html permet de modifier la page HTML affichée par le navigateur Web, avec la manipulation du style et du DOM, elle permet aussi d'échanger des requêtes asynchrones avec le serveur Web afin d'envoyer des données (à traiter, enregistrer) et de mettre à jour la page. Dans cette section, nous parlerons de la manipulation du DOM.
Principe du DOM
Le DOM représente un arbre de noeuds, où chaque noeud représente une balise HTML et pointe sur les balises enfants. Par exemple, considérons le code HTML suivant :
<div> <h1>Titre</h1> <p> Mont texte affiché <img src="monImg"/> </p> </div>
Ce code donne l'arbre suivant :
La navigation dans le DOM se fait donc comme dans un arbre, à partir du noeud on peut atteindre ses enfants "H1" et "P" et accéder à leurs attributs et à leurs enfants. Il est donc possible d'accéder à un noeud et d'en modifier les attributs ou le contenu.
DOM avec Dart
Dart propose plusieurs types d'objets pour manipuler le DOM. L'objet Window correspond à la fenêtre (ou onglet) courante, il permet d'accéder à un objet Document qui représente le document, la page actuelle. Ce document représente un arbre de noeud, qu'il est possible de manipuler. Un noeud correspond à un objet Node, la plupart des noeuds sont des éléments (balise), de la classe Element.
Un exemple
Supposons le code HTML suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Appli</title>
<link rel="stylesheet" href="appli.css">
</head>
<body>
<h1>DOM</h1>
<p></p>
<script type="application/dart" src="appli.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
La page affichée contient un titre (DOM) et une balise paragraphe (<p>) vide.
Nous allons ajouter à notre script de Dart, qui se nomme dans l'exemple "appli.dart", une instruction dans la fonction main() qui va ajouter du contenu dans la balise pararagraphe. Le code est exécuté au chargement de la page. Notre script est donc le suivant :
import 'dart:html';
void main() {
// Récupération de l'élément correspondant à la balise paragraphe
// Et ajout du texte
query("p").appendText("Ajout de texte au paragraphe avec Dart !");
}
La fonction query permet de trouver un élément selon le sélecteur en paramètre. Le sélecteur répond au même conditions qu'en CSS, à savoir #elem pour trouver selon l'identifiant, etc ... Il s'agit du même comportement que le framework jQuery. On a donc le résultat suivant :
Un exemple plus complet
Nous allons créer un élément, une image, pour l'ajouter à notre paragraphe.
import 'dart:html';
void main() {
// Création de l'image
ImageElement img = new ImageElement();
img.src = "dart_logo.png";
img.width = 50;
// Récupération du paragraphe
ParagraphElement p = query("p");
// Ajout de l'image puis du texte
p.append(img);
p.appendText("Ajout de texte au paragraphe avec Dart !");
}
Un élément de type image est créé, auquel on donne ensuite l'emplacement de l'image à afficher, avec l'attribut src. Puis nous récupérons l'élément paragraphe auquel nous ajoute l'image puis le texte.
D'autres méthodes existent sur les objets de type Element, notamment pour remplacer un élément par un autre avec replaceWith, ou encore pour supprimer un élément avec remove. DOM est donc un outil puissant qui permet de manipuler et reforger une page à son goût. La librairie HTML offre aussi la possibilité de dialoguer avec le serveur sans recharger la page, il s'agit des HttpRequest présentées dans la section suivante.