La bonne manière d'ajouter un évènement à un élément XUL

[Thomas]

Bonjour,

Je souhaite avoir un bouton particulier. Ça sera un gros bouton, contenant du texte (ou une petite image) ainsi qu'un champ de recherche. Si on clique dessus et que la textebox est vide, alors il ouvre un nouvel onglet, sinon il ouvre un onglet avec l'URL stockée dans keyword.URL avec comme mot-clé le contenu du champ de texte.

Voici le code du panneau latéral :

Code : Tout sélectionner

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
<?xml-stylesheet href="chrome://emptysidebar/content/bindings.css" type="text/css"?>
<?xml-stylesheet href="chrome://emptysidebar/skin/sidebar.css" type="text/css"?>
<!DOCTYPE page SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd">
<page
  id="sbEmptySidebar"
  title="&emptysidebar.title;"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  onload="sidebar.init()"
  onunload="sidebar.destroy()">
  
  <script src="sidebar.js" type="application/x-javascript" />
 
  <tabpreviews id="previews" class="tbs-tabpreviews-vertical" flex="1">
    <box style="border:1px solid green" id="openNewTabButton">
      <vbox>
        <label value="New Tab" />
        <textbox />
      </vbox>
    </box>
  </tabpreviews>

</page>

Comment bien faire pour ajouter des évènement dessus ? J'ai rajouté un attribut onclick avec comme valeur une fonction openNewTab() contenue dans sidebar.js. Ça fonctionne à eu près mais ça génère l'erreur suivante :

Erreur : this.parentNode.parentNode.onClick is not a function
Fichier source : chrome://emptysidebar/content/emptysidebar.xul
Ligne : 1

En plus, ça ne me permet pas de récupérer dans ma fonction le contenu de la textbox. Comment faire autrement ?

J'ai tenté un :

Code : Tout sélectionner

var newTabButton = document.getElementById("openNewTabButton");
newTabButton.addEventListener("click", openNewTab, false);

Mais la deuxième ligne ne fonctionne pas, il me dit "Erreur : newTabButton is null", il ne trouve pas l'élément avec cet ID -_-

Je suis trop nul, aidez moi ^^

[martin]

une réponse un peu tardive, mais si tu n'as pas résolu ton problème...

je vois plusieurs erreurs:

- un élément xul:box ne connait pas d'attribut "onclick".

- d'une manière générale, il y a un erreur évidente signalée "onClick" != "onclick"

-

En plus, ça ne me permet pas de récupérer dans ma fonction le contenu de la textbox.

: si ta fonction est appelée via un attribut "onclick" ou "oncommand", this devrait se référer à l'élement, donc tu peux récupérer des infos sur celui-ci ou ses descendants. Plus efficacement et plus général, tu peux utiliser un argument dans ta fonction pour récupérer l'Event, et donc Event.target (ou un de ses copains) pour avoir l'élément ciblé.

- pour ton essai suivant (avec addEventListener), çà devrait marcher, je suppose que tu ne l'as pas déclaré dans sidebar.init, où il devrait se trouver.

Cependant pourquoi, si tu veux un bouton, ne pas utiliser plutôt un élément xul:button ? Et dans ce cas utiliser l'événement oncommand mieux adapté qu'un onclick .

[Thomas]

Merci pour ta réponse !

En fait je souhaitais créer un bouton particulier, contenant en plus un champ de texte. Est-ce possible avec un xul:button ?

De toute façon, j'ai laissé cette extension de côté pour l'instant. Il faut que je commence avec moins gros pour comprendre petit à petit. Du coup, je me suis rabattu sur JetPack