Panneaux flottants
J'ai créé ce système pour gérer un environnement de production (centré autour d'un browser, editor, ou quoi que ce soit d'autre) équipé de panneaux latéraux détachables (flottants) et réductibles.
Pour l'utiliser, il suffit de récupérer le dossier "panflottant" contenant les bindings et d'insérer dans votre page xul une référence à 'environnement.css', présent dans ce dossier. Il faudra également modifier deux uri chromes en fonction de celle de votre application. Il s'agit de la ligne 17 de 'environnement.xbl' :
loader.loadSubScript("chrome://monappli/content/panflottant/dragex.js");
et de la ligne 54 de 'dragex.js' :
openDialog("chrome://monappli/content/panflottant/dialog.xul",
Voici un exemple d'utilisation :
<?xml version="1.0" encoding="ISO-8859-15"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://monappli/content/panflottant/environnement.css" type="text/css"?> <window id="main-window" title="Mon Appli" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <environnement flex="1"> <panneaux> <panneau idoverlay="pan1" title="panneau 1" src="chrome://monappli/content/pan1.xul" /> <panneau idoverlay="pan2" title="panneau 2" src="chrome://monappli/content/pan2.xul" /> </panneaux> <browser src="http://www.google.fr" id="myeditor" flex="1"/> </environnement> </window>
- <environnement> représente, comme son nom l'indique, l'environnement de production, qui ne peut contenir que deux noeuds fils : <panneaux> et la zone de production (ici un <browser>).
- <panneaux> est une boîte contenant les panneaux latéraux.
- <panneau> est une boîte qui sera chargée par le panneau, qui doit être un overlay sur un <vbox>(on indique donc en attribut l'identifiant de l'overlay (idoverlay), le titre qui sera affiché pour identifié le panneau (title) et l'adresse chrome de celui-ci (src).
Exemple appliqué à mybrowser :
