Forums : Xul, Xbl, JS...

Salut, essaye simplement avec setAttribute()...

merci pour cette alternative qui fonctionne parfaitement.

j'aimerais quand même essayer de faire fonctionner les élément dans la balise "implementation" car aucun ne fonctionne ..., si vous avez des exemples ou des solutions

merci

Attention, les éléments dans le binding ne doivent pas avoir d'attribut id. Sur le principe, on utilise un binding pour créer un nouvel élément et donc pouvoir en ajouter plusieurs sur la même page (ce qui ferait plusieurs éléments avec le même id). Le textbox à l'intérieur du binding n'est pas accessible depuis le document.

Il faut créer des propriétés et des méthodes au niveau du binding, qui seront alors disponibles sur l'élément (par exemple propriété number et méthode generate) qui permettront d'utiliser

document.getElementById('random-box').generate();
//ou
document.getElementById('random-box').number = 12;
var n = document.getElementById('random-box').number;

au niveau du binding :

<content>
  <xul:textbox xbl:inherits="value"/>
 </content>
<implementation>
  <property name="number">
     <setter>
       this.setAttribute("value", val);
     </setter>
     <getter>
       return this.getAttribute("value");
     </getter>
  </property>
  <method name="generate">
    this.number = Math.random();
  </method>
</implementation>

Quelques remarques :

• pas de readonly sur la balise implementation
• regarde aussi du côté de l'attribut 'extend' qui permet de modifier un élément déjà existant (ici on pourrait juste rajouter une méthode generate à un textbox de base)

<binding id="randomizer"
         extends="chrome://global/content/bindings/textbox.xml#textbox">
...
</binding>

• à la place de <box class="randomizer"/>, tu peux créer un élément randomizer

 //css
 randomizer {
   -moz-binding: url(...);
 }
 //xul
 <randomizer id="r" value="30"/>

et sinon, pour modifier des éléments à l'intérieur du binding, tu dois utiliser les méthodes de parcours du DOM. Dans ton exemple, pour modifier le textbox

<method name="setColor">
  this.firstChild.style.color = "red";
</method>

bas déjà, un GROS GROS merci pour ta réponse : super claire, super concise, super complète (bravo !)

sinon ça marche toujours pas ... ^^

exemple.xul

<?xml version="1.0" encoding="utf-8" ?> 

<!-- importation des feuilles de style -->
<?xml-stylesheet href="chrome://exemple/skin/exemple.css" type="text/css" ?>

<window pack="center"
	title="exemple"
	persist="screenX screenY" 
	xmlns:html="http://www.w3.org/1999/xhtml" 
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

	<!-- importation du javascript -->
	<script src="exemple.js" />
	
	<!-- création des racourcis clavier -->
	<keyset>
		<key keycode="VK_ESCAPE" id="closeWindow" oncommand="window.close();" />
	</keyset>

	<random value="25" id="random-box"/>
	 
	<button label="Générer" oncommand="document.getElementById('random-box').generate();"/>
	<button label="Voir" oncommand="document.getElementById('random-box').number"/>

</window>

exemple.css

@import url("chrome://global/skin/");

/* ========================================== */
/* ================== noms ================== */
/* ========================================== */

random
{
	-moz-binding: url('chrome://exemple/skin/exemple.xml#random');
}

exemple.xml

<?xml version="1.0"?>

<bindings 	xmlns="http://www.mozilla.org/xbl"
		xmlns:xbl="http://www.mozilla.org/xbl"
		xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	
	<binding id="random">
	
		<content>
			<xul:textbox xbl:inherits="value"/>
		</content>
		
		<implementation>
		
			<property name="number">
				<setter>
					this.setAttribute("value", val);
				</setter>
				
				<getter>
					return this.getAttribute("value");
				</getter>
			</property>
			
			<method name="generate">
				this.number = Math.random();
			</method>
			
		</implementation>
		
	</binding>
		
</bindings>

pour la fonction generate ça me met : blablabla is not a function et pour la valeur number ça me met undefined.

merci pour tout !

oups

Une petite erreur de syntaxe dans la définition de la méthode : le code doit être entouré par une balise body.

<method name="generate">
  <body>
    <![CDATA[
     this.number = Math.random();
    ]]>
  </body>
</method>

De plus, c'est plus prudent d'entourer tous les codes javascript avec

<![CDATA[ ]]>

pour éviter qu'ils soient interprétés au niveau xml, même si là il n'y a pas de problème.

Ca a l'air de marcher maintenant.

Sinon, je ne sais pas si ça répond à tes besoins, mais perso pour éviter de coder dans mes XBL, je colle des attributs à mon binding que j'hérite à l'intérieur.

Genre, mon binding prend :

bindingelement.setAttribute("mavalue","testvalue");

et ensuite dans mon textbox XBL :

xbl:inherits="value=mavalue"

merci à tous les deux !

mistervince -> ça ne marche toujours pas (toujours ce même message d'erreur) : aurais tu un exemple complet que je puise le copier pour voir si le problème ne viendrais tout simplement pas de moi ?

Raphael -> je crois que je vais prendre ta solution ^^ (je voudrais juste arriver une fois à faire marcher les implémentations avant)

merci beaucoup !

Il faut bien sûr utiliser au maximum l'héritage des attributs, mais ajouter une propriété permet de les manipuler plus facilement. C'est ce qui est souvent fait dans les bindings de firefox pour les attributs 'courants' (value, disabled, ...), un attribut a une propriété équivalente pour plus de simplicité.

Voilà un exemple avec 2 bindings :

• le premier est la manière la plus simple : on étend un textbox avec juste ce dont on a besoin. C'est suffisant si on veut juste générer un nombre aléatoire.
• le 2e est plus complet et permet d'utiliser des éléments plus compliqués.

fichier random.xml

<?xml version="1.0" encoding="UTF-8"?>

<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	
   <binding id="random1" extends="chrome://global/content/bindings/textbox.xml#textbox">
       <implementation>
           <method name="generate">
               <body>
               <![CDATA[
               this.value = Math.random();
               ]]>
               </body>
           </method>
       </implementation>
   </binding>
   
   <binding id="random2">
       <content>
           <xul:textbox xbl:inherits="value,disabled"/>
           <xul:button label="générer" oncommand="document.getBindingParent(this).generate()"/>
           <xul:button label="voir" oncommand="document.getBindingParent(this).showValue()"/>
       </content>
		
       <implementation>
           <property name="value">
               <setter>
               <![CDATA[
               this.setAttribute("value", val);
               ]]>
               </setter>	
               <getter>
               <![CDATA[
               return this.getAttribute("value");
               ]]>
               </getter>
           </property>

           <constructor>
               <![CDATA[
               this.generate();
               ]]>
           </constructor>
			
           <method name="generate">
               <body>
               <![CDATA[
               this.value = Math.random();
               ]]>
               </body>
           </method>
           
           <method name="showValue">
               <body>
               <![CDATA[
               alert(this.value);
               ]]>
               </body>
           </method>
       </implementation>
   </binding>
   
</bindings>

fichier doc.xul

<vbox>
  <hbox>
     <textbox id="random1" class="random" value="25"/>
     <button label="Générer" oncommand="document.getElementById('random1').generate();"/>
     <button label="Voir" oncommand="alert(document.getElementById('random1').value)"/>
   </hbox>
   <random/>
</vbox>

et la liaison se fait dans doc.css :

textbox.random {
-moz-binding: url(random.xml#random1);
}
random {
-moz-binding: url(random.xml#random2);
}

Attention, au niveau des urls, il faut vérifier que l'accès est possible. Si tu ouvres dans ton navigateur l'url du fichier random.xml (celle dans le fichier css), tu dois voir le code source des bindings. C'est peut-être là l'origine de tes problèmes : si firefox ne connait pas l'url du binding, il ne connait évidemment pas la méthode generate.

Par contre, je ne sais pas s'il y a quelque chose de spécial à faire pour utiliser un nouveau binding dans une extension, peut-être au niveau du fichier manifest ou du fichier chrome ?

bon courage

alors déjà un grand merci pour avoir pris le temps de faire un exemple aussi complet.

par contre je ne sais pas pourquoi tant que je n'enlève pas cette partie, il me dit qu'il y a une erreur à la fin de la ligne ...

<content>
	<xul:textbox xbl:inherits="value,disabled"/>
	<xul:button label="générer" oncommand="document.getBindingParent(this).generate()"/>
	<xul:button label="voir" oncommand="document.getBindingParent(this).showValue()"/>
</content>

et même si je l'enlève, les erreurs restent :

Erreur : document.getElementById("random1").generate is not a function
Fichier Source : chrome://exemple/content/exemple.xul
Ligne : 1

je relis et relis le tutoriel, normalement il n'y a rien à faire ... (et ça marche pour le contenu mais pas pour les implémentation)

je vais continuer à chercher mais je n'y croit plus beaucoup ...

Tu dois avoir 3 fichiers

• un fichier random.xml : c'est la définition des éléments, tu a juste à coller le code que je t'ai donné, sans rien changer, et plus y toucher après ça.
• un fichier exemple.xul : là, il y a le code de ta fenêtre (<window xmls:xul=""></window>) avec différents éléments (hbox, vbox, label ou autres). Il doit y aussi un lien vers un fichier css (chrome://exemple/content/exemple.css) qui te permettra de définir le style des éléments. Entre les balises <window></window>, tu peux coller le code de doc.xul de mon précédent post.
• un fichier exemple.css avec au moins les régles css suivantes :

  /*les règles de base des éléments */
  @import url(chrome://global/skin/);
  /*le lien vers les nouveaus bindings*/
  textbox.random {
      -moz-binding: url(chrome://exemple/content/random.xml#random1);
  }
  random {
      -moz-binding: url(chrome://exemple/content/random.xml#random2);
  }

Et le seul fichier que tu dois afficher, c'est exemple.xul.

Si ça ne marche pas comme ça, essaye d'ouvrir dans firefox les urls chrome://exemple/content/exemple.css et chrome://exemple/content/random.xml pour vérifier que les fichiers sont accessibles.

c'est exactement ce que j'ai =(

en fait ça se comporte comme si ce qu'il y avais entre les balises implementation n'était pas lues ...

Je suis désolé, je n'ai plus d'idée pour l'instant ). Je n'ai jamais eu de problème comme ça avant.

Vincent.

tu n'as pas à être désolé ^^

tu as passé déjà beaucoup de temps à m'aider : c'est moi qui suis désolé de ne pas y être arriver malgré tes conseils.

juste une dernière piste que j'explore : quand j'ouvre exemple.xul : mon contenu s'affiche correctement. Mais quand j'ouvre exemple.xml, il m'indique qu'il y a une erreur.
-> ça pourrait venir de là que le reste n'est pas pris en compte.

je te tiendrais au courant si j'arrive à faire marcher.