Le but de cet exemple est de montrer une manière d'alimenter le contenu d'un widget (tel une liste), à partir d'un fichier de données au FormatRdF, généré dynamiquement par du PHP.
On a donc une 'page' XUL, chargée dans le navigateur. Il y a un arbre, avec un attribut datasources pointant vers une source de données RDF à une URL précise. Cette source pourrait être un fichier RDF statique classique, mais cela peut aussi être un script PHP. Ce script, dans notre exemple, récupère les données à partir d'une base de donnée, les empacte dans un fichier au format RDF qui est alors renvoyé vers le navigateur, de la même manière qu'un script PHP générant une page HTML.
Notre script PHP va récuperer les données de notre base de données. Choisissons Mysql. Voici la table d'exemple à créer.
CREATE TABLE `sample_tbl` (
`id` int(10) unsigned NOT NULL auto_increment,
`name` char(50) NOT NULL default '',
PRIMARY KEY (`id`)
) TYPE=MyISAM ;
INSERT INTO `sample_tbl` VALUES (1, 'Alfred');
INSERT INTO `sample_tbl` VALUES (2, 'Hervé');
INSERT INTO `sample_tbl` VALUES (3, 'Gustave');
Voici le script PHP qui va générer dynamiquement le contenu du fichier RDF. Enregistrez le dans create_rdf.php.
Attention : Adaptez les paramètres de connexion à votre installation de MySQL. Pour cette exemple, on suppose que la table précédente a été créée dans une base de données nommée test.
<?php
define('EOL', "\r\n");
function XML_entities($str)
{
return preg_replace(array("'&'", "'\"'", "'<'"), array('&', '"','<'), $str);
}
// Connexion à la base de données
$cnx=mysql_connect('localhost', 'root', '');
mysql_select_db('test',$cnx);
// execution de la requète SQL
$result = mysql_query('SELECT * FROM sample_tbl',$cnx);
// on spécifie au navigateur le type mime des données qu'on va lui envoyé. Ici, c'est du RDF, dont text/xml.
header('Content-type: text/xml');
// on commence à lui envoyer le début du fichier RDF
echo('<?xml version="1.0" encoding="ISO-8859-1"?>'.EOL);
echo('<RDF:RDF [[xmlns:RDF="!http://www.w3.org/1999/02/22-rdf-syntax-ns#"'.EOL)]];
echo(' [[xmlns:row="!http://dummy/rdf#]]" [[xmlns:NC="!http://home.netscape.com/NC-rdf#">'.EOL)]];
echo('<RDF:Bag about="[[urn:data:row">'.EOL)]];
// boucle de récupération des enregistrements de la requête et génération du contenu RDF
while ($row = mysql_fetch_assoc($result))
{
echo('<RDF:li>'.EOL);
echo('<RDF:Description>');
// parseType = indication pour le type des données, utile pour le trie sur la colonne
echo('<[[row:id]] NC:parseType="Integer">'.XML_entities($row['id']).'</[[row:id>')]];
echo('<[[row:name>'.XML_entities($row]]['name']).'</[[row:name>')]];
echo('</RDF:Description>'.EOL);
echo('</RDF:li>'.EOL);
}
// fin du fichier RDF
echo('</RDF:Bag>'.EOL);
echo('</RDF:RDF>'.EOL);
// fermeture du curseur et de la connexion
mysql_free_result($result);
mysql_close($cnx);
?>
voici un exemple du contenu généré par notre script PHP. Vous pouvez l'observer en appelant directement le script dans votre navigateur. (http://127.0.0.1/test/create_rdf.php par exemple)
<RDF:RDF>
<RDF:Bag about="[[urn:data:row"]]>
<RDF:li>
<RDF:Description>
<[[row:id>1</row:id]]>
<[[row:name>Alfred</row:name]]>
</RDF:Description>
</RDF:li>
<RDF:li>
<RDF:Description>
<[[row:id>2</row:id]]>
<[[row:name>Hervé</row:name]]>
</RDF:Description>
</RDF:li>
<RDF:li>
<RDF:Description>
<[[row:id>3</row:id]]>
<[[row:name>Gustave</row:name]]>
</RDF:Description>
</RDF:li>
</RDF:Bag>
</RDF:RDF>
Enfin, voici le fichier XUL de votre petite application. Enregistrez dans exemple.xul. Vérifiez bien que votre serveur apache est bien configuré comme indiqué dans ApplisWeb/ConfigurationDuServeurWeb. L'exemple en javascript ici est à utilisé dans le cas où il s'agit d'une version de Mozilla < 1.7a (voir sinon SourceDeDonneesRdf pour d'autres solutions).
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet href="[[chrome://global/skin/]]" type="text/css"?>
<window
id="sample_win"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript"><![CDATA[
function reloadTree(treeId)
{
var tree = document.getElementById(treeId);
var dsUrl=tree.getAttribute('datasources');
// le fait de mettre à blanc puis remettre à nouveau la valeur
// fait recharger la source de donnée
tree.setAttribute('datasources', '');
tree.setAttribute('datasources', dsUrl);
}
]]></script>
<hbox>
<description>Exemple utilisable uniquement avec Mozilla 1.7a et supérieur</description>
<spacer flex="1" />
<button label="Refresh" oncommand="reloadTree('tree')" />
</hbox>
<vbox flex="1">
<tree id="tree" flex="1" flags="dont-build-content" ref="[[urn:data:row]]" datasources="create_rdf.php">
<treecols>
<treecol id="id" label="Id" primary="true" flex="1"
class="sortDirectionIndicator" sortActive="false"
sortDirection="ascending"
sort="rdf:http://dummy/rdf#id"/>
<splitter class="tree-splitter"/>
<treecol id="name" label="Name" flex="1"
class="sortDirectionIndicator" sortActive="true"
sortDirection="ascending"
sort="rdf:http://dummy/rdf#name"/>
</treecols>
<template>
<treechildren>
<treeitem uri="rdf:*">
<treerow>
<treecell label="rdf:http://dummy/rdf#id"/>
<treecell label="rdf:http://dummy/rdf#name"/>
</treerow>
</treeitem>
</treechildren>
</template>
</tree>
</vbox>
</window>
Appelez simplement votre fichier XUL dans votre navigateur en indiquant par exemple l'url suivante : http://127.0.0.1/test/exemple.xul
Vous avez un bouton "Refresh" pour rafraichir les données contenu dans la liste. A chaque fois que vous cliquez dessus, la page create_rdf.php est appelée et le contenu RDF généré récupéré puis intégré dans le composant tree.
Cet exemple est installé sur le site Xulfr, vous permettant de voir ce que ça donne. Vous devez utiliser Mozilla > 1.7a ou Firefox > 0.8
Vous pouvez voir le contenu du fichier RDF généré en PHP en allant ici : http://xulfr.org/sources/exemple_php_rdf(..)
Il y a aussi un deuxième exemple comportant une petite amélioration : une boîte de saisie permettant d'ajouter des items dans la liste, et un bouton permet d'en supprimer. Cela fait appel à un service web via l'objet XMLHttpRequest pour enregistrer l'item saisie ou effacer celui indiqué.
Il y a des différences au niveau Javascript pour la balise tree, entre gecko 1.7 (firefox 1.0) et gecko 1.8 (firefox 1.5). Choisissez donc la version appropriée :
exemple avec firefox 1.0, exemple avec firefox 1.5
Regardez le code source de la page pour découvrir comme cela est fait.
Vous pouvez télécharger ces exemples, avec les scripts PHP : http://xulfr.org/sources/exemple_php_rdf(..)
Si vous utilisez Mozilla <1.7a ou Firefox < 0.8, l'exemple est beaucoup plus compliqué car cela nécessite des privilèges pour manipuler du RDF. Vous devez activer les privilèges dans votre navigateur, et le code javascript dans la page XUL est plus complexe. Il faut donc utiliser cette deuxième version. regardez le source de la page pour voir comme c'est fait.
Copyright © 2003-2013 association xulfr, 2013-2016 Laurent Jouanneau - Informations légales.
Mozilla® est une marque déposée de la fondation Mozilla.
Mozilla.org™, Firefox™, Thunderbird™, Mozilla Suite™ et XUL™
sont des marques de la fondation Mozilla.