Forums : Xul, Xbl, JS...

si tu es avec FF 1.5, tu as la richlistbox dans laquelle tu met ce que tu veux.

Merci.

J'utilise XulRunner. Avec la dernière nightly build, ça devrait être bon, non ?

Bon, ça fonctionne. Le problème, c'est que les richlistbox n'ont pas de notion de colonne, contrairement aux listbox. Et evidemmment, je cherche à présenter des données sur plusieurs colonnes...

Est-il possible de mettre des images dans un listbox, ou sinon y a-t-il un moyen de mettre des données non textuelles dans un tree ?

Tu peux simuler des colonnes dans un <richlistbox> car tu peux y ajouter plusieurs éléments.

<richlistbox>
  <richlistitem align="center">
    <image src="image.png"/>
    <vbox>
      <label class="header" value="blabla"/>
      <label value="blabla"/>
    </vbox>
    <checkbox label="blabla"/>
  </richlistitem>
  <richlistitem align="center">
   ...
  </richlistitem>
</richlistbox>

Personnellement j'aime bien car c'est possible d'avoir des lignes avec des hauteurs différentes, mais c'est vrai qu'il manque les en-têtes de colonnes...

Tu peux ajouter une image à chaque cellule d'un <treecell> avec l'attribut src

thefab a écrit:

Tu peux simuler des colonnes dans un <richlistbox> car tu peux y ajouter plusieurs éléments.

Oui, l'ennui c'est que les colonnes ne sont pas du tout alignées. Si tous les éléments de toutes les lignes n'ont pas la même largeur, ça ne ressemble plus à rien.

Ce que je voudrais faire, c'est une grille où le 1er élément de chaque ligne est une chaîne de caractères, et les autres éléments sont des cases à cocher. Pourquoi ne pas utiliser un <grid> ? Pour pouvoir profiter du scroll de la listbox. Si vous avez une solution alternative, je suis preneur ;-)

thefab a écrit:

Tu peux ajouter une image à chaque cellule d'un <treecell> avec l'attribut src

J'y ai bien pensé. Mon but est de mettre des checkbox. Ce serait possible de les "émuler" avec des images, mais je n'ai pas réussi à récupérer l'évènement de clic sur une cellule de la ligne, mais uniquement sur la ligne entière. Donc impossible de changer l'image d'une cellule individuellement, en fonction de celle qui est cliquée...

je vois pas trop ou est le probleme avec la listbox, tu peux mettre des checkbox dans les listcell, le hic c'est de propager l'event au checkbox, se que ne permet pas par defaut la listbox pour ce faire tu dois mettre l'attribut 'suppressonselect' (si je me rapelle bien) à true sur le listbox. Il y a aussi un atrtibut sur les listitem qui à priori d'apres mon anglais permet la meme chose sur un ligne particuliere, mais de memoire, je n'ai essayé que le 'suppressonselect'. Je verifirais ca demain au taf. Cherche au sinon le PDF 'Rapid Application Development with Mozilla' tout y est dedans meme si des chose ne marche pas, c'est un bon receuil.

Hello,

Je n'avais pas relu le 1er message du fil (j'ai cru que tu voulais juste afficher des images). J'ai essayer la même chose il n'y a pas longtemps, voilà ou j'en suis:

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window title="Check ListBox" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script type="application/x-javascript">
function listboxOnSelect(listbox, e)
  {
  document.getElementById("selection-textbox").value = listbox.selectedItem.value;
  }
function listboxOnClick(listbox, e)
  {
  if (listbox.selectedItem)
    {
    var listcell = listbox.selectedItem.firstChild;
    var checked = listcell.getAttribute("checked");
    if (checked)
      {
      if (checked == "true")
        listcell.removeAttribute("checked");
      else
        listcell.setAttribute("checked", true);
      }
    else
      {
      listcell.setAttribute("checked", true);
      }
    }
  }
</script>

<textbox id="selection-textbox" value=""/>

<listbox onselect="listboxOnSelect(this, event);" onclick="listboxOnClick(this, event);">
  <listhead>
    <listheader id="entete1-listheader" label="En-Tête 1"/>
    <listheader id="entete2-listheader" label="En-Tête 2"/>
  </listhead>
  <listcols>
    <listcol flex="1"/>
    <listcol flex="1"/>
  </listcols>
  <listitem>
    <listcell class="header" label="Titre 1"/>
    <listcell/>
   </listitem>
   <listitem value="1">
     <listcell type="checkbox" label="1"/>
     <listcell label="1"/>
   </listitem>
   <listitem value="2">
     <listcell type="checkbox" label="2" checked="true"/>
     <listcell type="checkbox" label="2"/>
   </listitem>
   <listitem>
     <listcell class="header" label="Titre 2"/>
     <listcell/>
   </listitem>
   <listitem value="3">
     <listcell type="checkbox" label="3"/>
     <listcell label="3"/>
   </listitem>
 </listbox>

</window>

Comme tu peux le constater il faut inverser l'état de la case à cocher à la main, si tu veux plusieurs cases à cocher il faut checker quelle colonne est cliquée, en plus on ne peut pas inverser la case à cocher avec la touche Espace... bref pas top quoi !

J'ai posé la question sur la ML on m'a dit que les case à cocher sur les trees ne fonctionnaient qu'à partir de la 1.5 et qu'elles étaient moches (pas testé)

Fabrice

En fait, je n'avais pas vu qu'il est possible de mettre, dans un <listitem>, autre chose que des <listcell>. Par exemple, le code suivant s'affiche bien :

<listitem suppressonselect="true">
  <listcell class="header" label="Titre 1"/>
  <checkbox label="pouet" checked="true"/>
  <menulist>
    <menupopup>
      <menuitem label="aaa"/>
      <menuitem label="bbb"/>
    </menupopup>
  </menulist>
</listitem>

Malheureusement, même en mettant l'attribut suppressonselect à true sur le listbox et le listitem, ma checkbox et ma liste déroulante ne reçoivent pas d'évènements...

J'ai cherché dans "Rapid Application Development with Mozilla", mais je n'ai rien trouvé qui m'aiderait. Quelqu'un aurait une idée pour que le listbox ne capture pas tous les évènements ?

J'ai finalement trouvé la solution dans le forum de XulPlanet.

Il faut ajouter dans le <listitem> l'attribut "allowevents" (en le mettant à "true"). Il était bien caché, celui-là !

Encore merci à tous pour l'aide

oui, je comfirme apres verification de mon code au taf, c'est bien allowevents que j'avais utilisé, curieusement apres retry de suppressonselect, pas le moinde effet... allez comprendre... Si quelqu'un connait la signification....