Forums : Xul, Xbl, JS...

ReHello,

toujours pas de solutions simples à mon problème. J'ai passé le DOM en revue pour essayer de trouver (ceci dit, une petite mise au point de temps en temps c'est pas mal) mais , pas moyen d'avoir accès à la cellule via le DOM lorsque l'arbre a été créé avec un template. Continuons, continuons...

salut!

Moi j'arrive a recuperer le texte d'une cellule dans un tree genere par un XML(tu as juste a adapter pour utiliser ca avec une source RDF mais le principe est le meme voir tutoriel xulfr.org chap 6.8), voila comment je fais:

dans mon fichier XUL, declaration de l'arbre:

<tree id="iddemontree" flex="1" style="height:400px;" flags="dont-build-content" onselect="doSelectTree(event);">
<treecols>
    <treecol id="col1" />
    <treecol id="col2" />
    <treecol id="col3" />
</treecols>
</tree> etc....

dans mon fichier Javascript:

function doSelectTree(event)
{
var tree = event.target;
var txtintree = tree.view.getCellText(tree.currentIndex,"col2");
//a toi de t'amuser avec txtintree maintenant
}

Mon exemple va recuperer le texte de la colonne num 2 et de ligne ou l'utilisateur aura cliquer avec la souris.

Maintenant on peut imaginer qu'a la place du texte il y ait une image (j'imagine j'ai jamais essaye), a mon avis avec le DOM tu pourrais remplacer la source de cette image (genre txtintree.setAttribute("src","nouvelleimage.png")). si ca marche fait moi signe.

Pour ce qui est de rendre les tree cliquable, je crois qu'ils le sont par defaut mais c'est vrai que l'aspect du curseur ne change pas (ca peut etre deroutant). en tous cas chez moi, le clic sur tree fonctionne avec le code que je t'ai donne plus haut sans que j'ai eu besoin du cycler="true" (je sais meme pas ce que c'est d'ailleurs...). Peut etre qu'avec les CSS on pourrait changer l'aspect du pointeur de la souris (avec style="cursor:pointer;" sur l'attribut <treecell> ???) A essayer aussi.

@+ David

Hello et merci de ta réponse... Le problème c'est que getCellText renvoie une chaine de caractère (d'après la ref XulPlanet ) et non "l'objet" cellule ! Donc, je peux récupérer le texte mais pas le modifier. Il en est de même avec la méthode getImageSrc qui retourne le chemin vers l'image.

Pour modifier le texte, il y a setCellText qui, à priori, marche (pas essayé). Mais il n'y a pas de fonction setImageSrc...

Bon, de toute manière, je pense créer un fichier RDF local qui stockera les couches géographiques choisies pour former la carte. A moi les tutos sur XPCOM RDF...

Pour ma culture personnelle :

Que peut-on avoir d'autre comme info lors d'un clic sur un tree en flags="dont-build-content" ? Parce qu'avec différents essais, je n'ai trouvé que getCellText, et j'aurais bien aimé trouver les attributs du tag de l'item cliqué... (Pour faire passer des infos sans les afficher en fait...)

salut,

j'ai essayé l'attribut 'checkbox' dans un treecol et ca ne fonctionne pas non plus avec ma version de firefox ... du coup je l'ai fait a la main avec des images :

@@

 function onAttendanceSelect(event) {
   var row = {}, colID = {}, childElt = {};
   var tree = window.document.getElementById("attendances");
   tree.treeBoxObject.getCellAt(event.clientX, event.clientY, row, colID, childElt);
   if (row.value == -1 || row.value > tree.view.rowCount-1 || event.originalTarget.localName != "treechildren") {
     if (event.originalTarget.localName == "treecol") { 
       event.preventBubble();
     }
     return;
   }
   if (colID.value == "attendances_confirmation") {
     var row = tree.getElementsByTagName("treerow").item(row.value);
     selectedAttendance = findSelectedAttendance();
if(selectedAttendance.confirm == false){
         selectedAttendance.confirm = true;
       }
else{
  selectedAttendance.confirm = false;
}
       var col6Cell = row.getElementsByTagName("treecell").item(6);
if(selectedAttendance.confirm)
         col6Cell.setAttribute("src", "images/checked.gif");
       else
         col6Cell.setAttribute("src", "images/unchecked.gif");
   }

} @@

A+

F.

Hello,

ton code est OK et fonctionne à merveille! Comme quoi le DOM fait pas mal de travail...

Bon ,à priori, cela ne marche que sur des arbres "de base" non genérés par un template RDF.

De plus, je viens de me rendre compte qu'il faut bien gérer l'évènement, sinon, le temps de click suffit à faire croire qu'on clique plusieurs fois d'affilé.

En gros, si je mets des alert dans la fonction, tout marche correctement. Dès qu'il n'y a plus d'alert, un click sur l'image (ou sur la zone de la largeur de la colonne) ne déclenche plus de changement d'image.

Voici le code:

function onVisibleClick(event)
{
   
   // On ne prend en compte que les clicks droits !
   //if (event.button != 0)
   //  return;

// start
  var row = {}, colID = {}, childElt = {};

  var tree = window.document.getElementById('visible_layer_tree');
  tree.treeBoxObject.getCellAt(event.clientX, event.clientY, row, colID, childElt);
     
  if (row.value == -1 || row.value > tree.view.rowCount-1 || event.originalTarget.localName != "treechildren") {
    if (event.originalTarget.localName == "treecol") { 
      event.preventBubble();
    }
    return;
  }
  
  // si on est sur la bonne colonne:
  if (colID.value == "visible") {
    
    // on récupère l'objet row avec la bonne valeur
    var row = tree.getElementsByTagName("treerow").item(row.value);
    
    // ensuite, il faut récupérer la bonne cellule de la ligne:
    var col6Cell = row.getElementsByTagName("treecell").item(1);
    
    alert ("Valeur de la cellule");

    if(col6Cell.getAttribute("src")=="chrome://global/skin/checkbox/cbox.gif")
        // checked
        col6Cell.setAttribute("src", "chrome://global/skin/checkbox/cbox-check.gif");
      else
        // unchecked
        col6Cell.setAttribute("src", "chrome://global/skin/checkbox/cbox.gif");
  }
}

Je ne vois pas ce qui cloche ! Si je mets la ligne alert("Valeur de la cellule") en commentaire, ça ne marche plus. D'où mon idée d'un problème de timing ou de rafraichissement...

Qu'en pensez-vous ?

ReHello,

toujours rien sur ce code mais je me suis rendu compte qu'en fait, le changement se fait bien au niveau de l'attribut src mais pas en visuel: l'image ne change pas si il n'y a pas un alert dans le code !

Je sais que je suis Newbie mais là, je ne comprends pas...

RereHello,

toujours plus loin: le problème vient du focus ! Si je clique sur l'image, le changement se fait au niveau de l'attribut. Le rafraîchissement de l'image se fait dès le changement de focus (sur n'importe quoi d'autre que la colonne avec les images)...

A vot bon coeur pour trouver une soluce...

Hello,

j'ai trouvé une parade simple au problème de focus. En fait, il suffit juste de sélectionner la ligne qui contient la cellule sur laquelle on a cliqué. Je pense que ce n'est pas très propre mais ça fonctionne et ça ne nécéssite qu'une seule ligne de code en plus.

Voici le code modifié:

function onVisibleClick(event)
{
   
  var row = {}, colID = {}, childElt = {};

  var tree = window.document.getElementById('visible_layer_tree');
  tree.treeBoxObject.getCellAt(event.clientX, event.clientY, row,  colID, childElt);

  // les cas où on ne clique pas au bon endroit.
  if (row.value == -1 || row.value > tree.view.rowCount-1 || event.originalTarget.localName != "treechildren") {
    //if (event.originalTarget.localName == "treecol") { 
    //  event.preventBubble();
    //}
    return;
  }
   
  // si on est sur la bonne colonne:
  if (colID.value == "visible") {
    
    // ensuite, on sélectionne la ligne pour y mettre le focus:
    tree.view.selection.select(row.value);

    // on récupère l'objet row avec la bonne valeur
    var row = tree.getElementsByTagName("treerow").item(row.value);
    
    // ensuite, on sélectionne la ligne pour y mettre le focus:
    tree.view.selection.select(row.value);
   
    // ensuite, il faut récupérer la bonne cellule de la ligne:
    var col6Cell = row.getElementsByTagName("treecell").item(1);
    
     var state=col6Cell.getAttribute("src");

if(state=="chrome://global/skin/checkbox/cbox.gif") {
        // checked
        
        col6Cell.setAttribute("src", "chrome://global/skin/checkbox/cbox-check.gif");
        col6Cell.setAttribute("valeur","0");
       }
      else {
        // unchecked
        col6Cell.setAttribute("src", "chrome://global/skin/checkbox/cbox.gif");
        col6Cell.setAttribute("valeur","1");          
     }
   }
}

Mon problème est donc réglé...