Raccourcis : Contenu - rubriques - sous rubriques
EN FR

Qu'est ce que XUL ?

XUL est un langage de description d'interface utilisateur. Il peut être très utile pour réaliser des applications web ayant l'ergonomie d'une application desktop, sans avoir à inclure des scripts JS et de faire du DHTML partout. Voir http://xulfr.org. XUL est utilisé dans Firefox pour son interface utilisateur. Notez qu'il faut obligatoirement un navigateur basé sur le moteur Gecko de Mozilla (dont Firefox) pour pouvoir afficher du XUL.

jResponseXul et cie

L'objet jResponseXul permet de générer une fenêtre XUL (<window>). Il y a aussi jResponseXulDialog pour les boîtes de dialogue (<dialog>), jResponseXulOverlay pour les overlays XUL (<overlay>), et jResponseXulPage pour les pages XUL incluses via une balise <iframe> dans une fenêtre XUL. Chacun de ces objets ont la même API (tous basés sur jResponseXul), il y a seulement quelques différences minimes, au niveau notamment de la balise principale générée.

jResponseXul permet de générer, comme jResponseHtml, les liens vers les feuilles de styles et les scripts javascript, la balise principale, et les liens des overlays, qu'ils soient statiques ou dynamiques (voir plus loin).

Utilisation de jResponseXUL

Voici les alias pour récupérer les différentes réponses XUL :


  $window = $this->getResponse("xul");
  $dialog = $this->getResponse("xuldialog");
  $overlay = $this->getResponse("xuloverlay");
  $page = $this->getResponse("xulpage");

Dans la suite, on utilisera $window mais les exemples fonctionnent aussi avec les autres objets (sauf indication contraire).

Vous pouvez indiquer des attributs à mettre sur la balise principale (<window>, <overlay>, <dialog> ou <page>) :


  $window->rootAttributes = array("width"=>"300");

Pour lier la page XUL avec des feuilles de styles, des scripts et des overlays, il suffit d'utiliser les méthodes addCssLink(), addJsLink() et addOverlay() :


  $window->addCssLink('style.css');
  $window->addJsLink('scripts.js');
  $window->addOverlay('overlay.xul');

Générer sans template

Si vous ne voulez pas utiliser de template, vous pouvez tout simplement utiliser la methode addContent pour ajouter du XUL dans la page :


   $rep->addContent('contenu xul');

Générer avec un template

Dans la propriété $body vous avez un objet jTpl, et vous devez indiquer dans la propriété $bodyTpl le sélecteur du template à utiliser. Et $title permet d'indiquer le titre de la fenêtre :


 $window->title = "ma fenêtre";
 $window->bodyTpl = "monmodule~listexul";
 $window->body->assign("liste", $liste);

Comme pour jResponseHtml, vous pouvez inclure du contenu avant ou après celui du template. Pour cela vous utiliserez la méthode addContent(). Elle prend en paramètre une chaîne pour le contenu, et un booléen (facultatif) pour indiquer si on veut que le contenu soit ajouté avant (true) ou après (false, valeur par défaut) le contenu du template.


$rep->addContent('Mon contenu XUL après le template');
$rep->addContent('Mon contenu XUL avant le template', true);

Notez que le contenu à ajouter peut être aussi le contenu de zones

Réaliser des overlays

Un overlay est un fichier XUL qui permet d'ajouter des modifications à une autre page XUL sans toucher à son code source. C'est très utilisé dans Firefox par les extensions. Cela peut être aussi utilisé dans une application web, et en particulier dans Jelix : un module peut déclarer un overlay pour une page XUL générée par un autre module.

principe

La façon dont ça fonctionne est assez simple et repose sur le système d'évènement de Jelix. En fait un objet jResponseXul, avant de générer le contenu final, envoie un évènement pour se signaler. En réponse, les modules peuvent lui renvoyer l'url d'un overlay. Une balise <?xul-overlay?> sera ajoutée alors dans la page.

Une condition pour que ça fonctionne vraiment : il faut que l'action qui génère la page xul mette la propriété $fetchOverlays à true :


  $window->fetchOverlays = true;

Dans le cas contraire (et c'est le comportement par défaut), aucun évènement ne sera envoyé et donc aucun overlay "étranger" ne pourra être indiqué.

mise en oeuvre

Tout d'abord, il faut faire une action qui génère une réponse "xuloverlay", comme vous l'avez vu plus haut. Imaginons qu'il s'agisse de l'action "testa~xul:overlay1" et que l'action qui affiche la page xul sur laquelle s'applique l'overlay soit "testb~xul:index".

Dans le module "testa", il faut ensuite faire un "listener" pour pouvoir répondre à l'évènement "FetchXulOverlay" qu'envoie jResponseXul quand il demande les overlays à lier. Dans un fichier classes/testa.listener.php, vous aurez alors :


class testaListener extends jEventListener{

   function onFetchXulOverlay($event){

   }
}

L'évènement a un paramètre, "tpl", qui indique le sélecteur de template utilisé pour la page principal générée par l'action "testb~xul:index". Admettons qu'il s'agisse de "testb~mainxul". On va tester si le paramètre est bien le template que l'on attend, et en retour, on va indiquer l'url de l'overlay.


class testaListener extends jEventListener{

   function onFetchXulOverlay($event){
      if($event->getParam('tpl') == 'testb~mainxul'){
            $event->Add('testa~xul:overlay1');
        }
   }
}

N'oublions pas de déclarer ce listener dans le fichier events.xml du module test a :


<events xmlns="http://jelix.org/ns/events/1.0">
   <listener name="testa">
       <event name="FetchXulOverlay" />
   </listener>
</events>

Voilà, vous pouvez de cette manière modifier l'écran XUL du module testb sans toucher à son template xul.