Générer des éléments XUL dynamiquement

Par neolao le - XUL

Illustration d'un bisounours portant XUL Toujours un problème classique, la génération dynamique de contenu XUL. En effet, on a souvent besoin de gérer des listes par exemple. En HTML, on utilise un autre langage côté serveur pour générer des choses. Et en XUL alors ? Et ben c'est lui même qui intègre une syntaxe de génération dynamique, on appelle ca des gabarits (template en anglais). Je crois que c'est la partie la plus complexe que j'ai lu pour l'instant, ca m'a permis d'approfondir quelques connaissances sur le XML qui ne se résume pas qu'à des balises :) .

Si le début fait peur, lisez au moins la conclusion :) .

Les données

Quand on parle de génération dynamique, ça sous entend qu'il y a des données quelques part. Le format de données structurées compris par défaut par XUL est le RDF qui est aussi du XML. Pour les données qui viennent d'autres sources, comme une base de données, ca sera un autre billet :) . Plus d'information sur le format RDF sur xulfr.org ou carrément sur la-grange.net.

Par exemple, si je veux afficher les données dans une boîte :

<box datasources="bisounours.rdf" ref="urn:bisounours">
...
</box>
  • datasources est l'URL du fichier
  • ref est l'URN du noeud qu'on veut afficher (voir explication sur les espaces de noms)

Voilà la source RDF.

Les gabarits

Il faut maintenant générer ce qu'il y a à l'intérieur. On va simplement faire un gabarit (template) de ce qui doit se répéter. Il faut donc écrire un squelette avec des variables comme dans la logique d'un langage côté serveur. Mais ceux qui ont l'habitude de faire ca savent très bien que c'est pas si simple, il y a souvent des exceptions, des comparaisons à faire, des conditions à vérifier. C'est à ce niveau là que ca devient complexe.

Pour l'instant, on en est là :

<box datasources="bisounours.rdf" ref="urn:bisounours">
	<template>
	...
	</template>
</box>

Les règles

Donc, dans un gabarit, il y a des règles. Elles permettent de filtrer l'affichage. En fait, la syntaxe complète est plutot lourde parce qu'elle permet de filtrer très précisément. C'est pour ca qu'il existe une syntaxe simplifiée.

Syntaxe simplifiée

Si on veut simplement afficher tous les enregistrements :

<box datasources="bisounours.rdf" ref="urn:bisounours">
	<template>
		<label uri="rdf:*" value="rdf:urn:bisounours#name"/>
	</template>
</box>
  • uri="rdf:*" indique la partie qui doit etre générée
  • rdf:urn:bisounours#name représente l'information à afficher

Et maintenant avec une règle :

<box datasources="bisounours.rdf" ref="urn:bisounours" xmlns:bisounours="urn:bisounours:rdf#">
	<template>
		<rule bisounours:generation="1">
			<label uri="rdf:*" value="rdf:urn:bisounours#name"/>
		</rule>
	</template>
</box>

J'ai besoin de filtrer le champ generation, alors je déclare l'espace de nom bisounours. On filtre grace à des attributs de la balise <rule>. Ici j'affiche tous les bisounours de première génération.

Ce sont juste des exemples, la syntaxe simplifiée ne se résume pas qu'à ca. Plus de détails sur xulfr.org.

Syntaxe complète

Je ne vais pas expliquer cette syntaxe là, ca serait trop long. Je pense même qu'elle mérite un billet à part, et mon but c'est surtout de présenter les aspects de XUL, pas de faire des tutoriaux. Si vous êtes arrivé jusqu'ici sans avoir eu peur, vous pouvez lire ca.

Conclusion

Il y a vraiment de tout dans XUL. Lorsque j'ai lu la documentation sur la syntaxe complète des gabarits, ma première réaction était : "c'est quoi ce bordel ?". Et puis, ca commence à rentrer et c'est pas si compliqué. C'était surtout lié au format RDF qui est un format complexe quand on découvre, mais en fin de compte, il rempli plutot bien son rôle quand on lit pourquoi il a été inventé.

Je fini par un exemple de ce que ca sera avec une requête SQLite qui a l'air beaucoup plus compréhensible parce que je manipule ce genre de données depuis longtemps. Je pense même que lorsque mozStorage sera par défaut dans XulRunner, la plupart des gens utiliseront ca (c'est mon avis) :) .

PS: Plus d'infos sur les bisounours

Commentaires

1. Le vendredi, février 17 2006, 08:51 par ekameleon

Encore un très bon article, Merci :)
Je continue malgré tout à trouver cela bien compliqué par rapport à une structure de donnée object ECMAScript par exemple. Faudra qu'à l'occasion je m'y mette sérieusement en faisant quelques tests car pour le moment cela me donne vraiment pas envie de m'y mettre et je préfère m'orienter sur du parsing à la JSON ou EDEN.
EKA+ :)

4. Le vendredi, février 17 2006, 12:03 par neolao

ouais, effectivement c'est pas mal

ca ne t'empeche pas de charger ton JSON et de générer ce que tu veux ensuite. Pour l'appliquer à un template XUL, il faudrait utiliser uniquement des listes alors. Je ne sais pas si tu connais le format RDF, mais ce n'est pas un arbre normal. Si on peut s'arranger avec des références en JSON, ca pourrait marcher pareil.

edit: tiens, j'sens que j'vais faire un billet sur JSON, il est intéressant :)

5. Le vendredi, février 17 2006, 14:42 par ekameleon

JSON est très utilisé par les 'Ajaxiens' mais si j'étais toi j'irai voir un peu ce qu'il se passe dans le newsgroup de Burrrn dans le forum sur EDEN et regarde le contenu du teaser pour voir tout ce qu'on va pouvoir faire avec ;)
Possibilité de passer par exemple directement des instances de tes propres classes, possibilité d'ajouter un header au document .eden etc... le tout basé ECMAScript :)

EKA+ :)

6. Le vendredi, février 17 2006, 17:09 par neolao

Au niveau Ajax, je sais pas si t'as lu la news, mais il y a plusieurs groupes dont IBM, adobe et d'autres pour faire quelque chose. Il y a aussi yahoo et son centre de developpement.

j'veux bien croire que EDEN c'est bien, mais j'me lancerai pas tête baissée tant que j'aurai pas vu ce que font les autres. Apparement, ca se bouge ces temps ci niveau Ajax