Forums : Xul, Xbl, JS...

Je n'ai pas la réponse, mais c'est le genre de chose que j'aimerais ajouter sur le site de xulfr.org comme exemple utile (et il l'est vu ta question :) )

Précise bien la question, car les arbres ont plusieurs structures de création qui peuvent influer sur la manipulation des opérations drag&drop. Avec une "vue personnalisée", il faudra certainement implémenter les fonctions nécessaires au drag&drop.

j'ai deux arbres générés par un template dont la source est distante (php/mysql) comme suit:

  Toto          Titi
  |             |
  |__A          |__C
  |             |
  |__B          |__D

A,B,C,D sont des lignes avec plusieurs champs

Je veux déposer A dans C

  Titi
  |
  |__C
  |  |__A
  |
  |__D

Et donc ce que je voudrais faire, c'est que quand je dépose A dans C j'XMLHTTPREQUESTise un script php qui me met Titi à jour. Ce que je n'arrive pas à faire c'est la partie gestion de l'evenement (detection) quand je lache A sur C en gros, la gestion du "drop" quoi.

Merci de votre aide,

Fabrice

Donc après moult relectures du tuto et une exploration en profondeur des sources de Thunderbird voici comment j'ai solutionné mon problème grace à getCellAt :

// affectation du Tree source
function GetNomenclatureBeTree()
{
   var gNomenclatureBeTree = document.getElementById("nomenclatureBE");
   return gNomenclatureBeTree;
}

// affectation du Tree destinataire
function GetNomenclatureClapTree()
{
   var gNomenclatureClapTree = document.getElementById("nomenclatureCLAP");
   return gNomenclatureClapTree;
}

// Observateur pour la source (ondraggesture="nsDragAndDrop.startDrag(event,nomenclatureBeObserver)")
var nomenclatureBeObserver = {
onDragStart: function (evt,transferData,action){

   var tree  = GetNomenclatureBeTree();
   var ref = tree.view.getCellText(tree.currentIndex,"ref");

   transferData.data=new TransferData();
   transferData.data.addDataForFlavour("text/unicode",ref);
 }
}; 
// Observateur pour le destinataire (ondragover="nsDragAndDrop.dragOver(event,nomenclatureClapObserver)" et ondragdrop="nsDragAndDrop.drop(event,nomenclatureClapObserver)")
var nomenclatureClapObserver = {
 getSupportedFlavours : function () {
    var flavours = new FlavourSet();
    flavours.appendFlavour("text/unicode");
    return flavours;
  },
  onDragOver: function (evt,flavour,session){

  // c'est juste pour avoir une réaction de l'interface lors du survole
  // on récupere l'index de la ligne du tree survolé
  var clapTree = GetNomenclatureClapTree();
  var row = {};
  var col = {};
  var elt = {};
  clapTree.treeBoxObject.getCellAt(evt.clientX, evt.clientY, row, col, elt);

    if (row.value == -1)
      return false;

  // on selectionne la ligne dont l'index à été récupéré plus haut
  clapTree.view.selection.select(row.value);

  },
  onDrop: function (evt,dropdata,session){
    if (dropdata.data!=""){

  // on récupere l'index de la ligne du tree ou on à laché le bouton de la souris
  var clapTree = GetNomenclatureClapTree();
  var row = {};
  var col = {};
  var elt = {};
  clapTree.treeBoxObject.getCellAt(evt.clientX, evt.clientY, row, col, elt);

    if (row.value == -1)
      return false;

  // on selectionne la ligne dont l'index à été récupéré plus haut
  clapTree.view.selection.select(row.value);

  // on recupere la valeur du champs "ref" (ceci va me servir comme argument pour passer ma requete XMLHTTPREQUEST)
  var  ref = clapTree.view.getCellText(clapTree.currentIndex,"ref");

  // on fait quelque chose avec "dropdata.data" et "ref" (dans mon cas une requete au serveur pour insertion de "dropdata.data" dans "ref")
  alert(dropdata.data + " dans " + ref);

    }
  }
};

Voila, si vous trouvez mon approche interessante je peux faire un tuto plus complet pour le wiki...

Fabrice

Fabrice a écrit:

Voila, si vous trouvez mon approche interessante je peux faire un tuto plus complet pour le wiki...

Là, je ne peux que dire OUI bien volontier :) Je trouve que l'exemple que tu présentes est intéressant pour appréhender la notion d'arbre, de manipulation des items d'un arbre, et du glisser-deposer.

Si tu as un compte sur le wiki, crée toi une page sur ce sujet en la documentant au maximum. Si tu as besoin, je peux t'aider sur cette démarche, dans ce cas, utilise la liste de diffusion xulfr.redac chez lists.apinc.org pour me joindre (ou l'IRC).

Bon bah ok, j'm'y colle des qu'j'ai cinq minutes ;)

+1 pour une joli explication détaillé sur le wiki ;)

Salut, Il me semble que vous avez eu la solution finale. Donc, est ce que vous pouvez me partager les sources codes pour ce probleme de drap drop parce que j'ai besoin d'un example complete. Merci par avance, Amicalement,

ngaymoi24 : <humour>et tu veux pas 100 balles et un mars en plus ?</humour> ;-)

Plus serieusement : ça m'a l'air complet cet exemple. À moins que tu ne maitrise pas bien les treeview, et ni le drag and drop en général. Dans ce cas, il est préférable que tu apprenne d'abord tout ça (cf tuto) plutôt que de repomper en bloc.

Toutefois, pour l'exemple complet, tu en a un beau, sous licence libre : tu le trouveras dans Thunderbird.

Bon je sais j'ai pas encore mis mon tuto dans le Wiki... mais j'y travail. Seulement je voudrais ajouter une fonction dans mes TREE. En fait je voudrais pouvoir déplacer une ligne dans l'un d'eux (DnD dans le même TREE). Et là, je suis dessus depuis deux jours et je commence à être usé...

voici mon JS:

/* inclusion */
var jComposant = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].createInstance();
var jInterface = jComposant.QueryInterface(Components.interfaces.mozIJSSubScriptLoader);
jInterface.loadSubScript("chrome://global/content/nsDragAndDrop.js");
jInterface.loadSubScript("chrome://global/content/nsTransferable.js");

function getTree (evt)
{
	var treeId  = evt.target.parentNode.id;
	var tree    = document.getElementById(treeId);
	return tree;
}

var clapObserver = {

	getSupportedFlavours : function () 
	{
		var flavours = new FlavourSet();
		flavours.appendFlavour("text/unicode");
		return flavours;
	},

	onDragStart: function (evt,transferData,action)
	{
		try
		{
			var tree    = getTree(evt);
	
			if ( tree.id == "nomenclatureBE" )
			{
				var clef    = tree.view.getCellText( tree.currentIndex, tree.columns["nomenclatureChapitre"] );
				var ref     = tree.view.getCellText( tree.currentIndex, tree.columns["nomenclatureRef"] );
				var etatRef = tree.view.getCellText( tree.currentIndex, tree.columns["nomenclatureEtatRef"] );
				if( clef || etatRef == "2" )
					return false;
			}
	
			if ( tree.id == "nomenclatureCLAP" )
			{
				var ref     = tree.view.getCellText( tree.currentIndex, tree.columns["clapReference"] );
				var type    = tree.view.getCellText( tree.currentIndex, tree.columns["type"] );
				if( type == "1" )
					return false;
			}
			log("Déplacement de : " + ref);
			transferData.data=new TransferData();
			 transferData.data.addDataForFlavour("text/unicode",ref);
		}
		catch(e)
		{
			log(e);
		}
  	},

	onDragOver: function (evt,flavour,session)
	{
		try
		{
			var tree = getTree(evt);
			var row  = {};
			var col  = {};
			var elt  = {};
			tree.treeBoxObject.getCellAt(evt.clientX, evt.clientY, row, col, elt);
	
			if (row.value == -1)
				return false;
	
			tree.view.selection.select(row.value);
		}
		catch(e)
		{
			log('onDragOver: ' + e);
		}
	},

	onDrop: function (evt,dropdata,session)
	{
		try
		{
			if (dropdata.data!="")
			{
				var tree = getTree(evt)
				var row  = {};
				var col  = {};
				var elt  = {};
				 tree.treeBoxObject.getCellAt(evt.clientX, evt.clientY, row, col, elt);
		
				if (row.value == -1)
					return false;
		
				// on selectionne la ligne dont l'index plus haut
				tree.view.selection.select(row.value);
			
				// on recupere la valeur du champs "ref" (ceci va me servir comme argument pour passer ma requete XMLHTTPREQUEST)
				var container_name = tree.view.getCellText( tree.currentIndex, tree.columns["clapReference"] );
				var clap_type      = tree.view.getCellText( tree.currentIndex, tree.columns["type"] );
				var container_uri  = tree.view.getCellText( tree.currentIndex, tree.columns["uri"] );
		
				if ( clap_type != "1" ) // si c'est une piece on arrete
					return false;
		
				var id             = tree.view.getCellText( tree.currentIndex, tree.columns["id"] );
				var name           = document.getElementById("nomClap").value ;
				var ref            = dropdata.data ;
	
				if ( clap_type != "1" ){ // si c'est une piece on arrete
					return false;
				}else{
					 window.openDialog('claperReference.xul','newUser','chrome,centerscreen,alwaysRaised',container_name,clap_type,id,name,ref,container_uri);
				}
			}
		}
		catch(e)
		{
			log(e);
		}
	}

};

Voici mes deux TREE (juste les entêtes):

<tree id="nomenclatureBE"
      flex="1"
      seltype="single"
      onselect="setDetail('nomenclatureBE')"
      flags="dont-build-content"
      ondraggesture="nsDragAndDrop.startDrag(event,clapObserver)"
      datasources="rdf:null"
      ref="http://clap/all">

// c'est dans celui-ci que je voudrais pouvoir deplacer une ligne
<tree id="nomenclatureCLAP"
      flex="1" 
      context="clipmenu"
      seltype="single"
      flags="dont-build-content"
      onselect="setDetail('nomenclatureCLAP')"
      onmousemove="adjustCoords(event);"
      ondraggesture="nsDragAndDrop.startDrag(event,clapObserver)"
      ondragover="nsDragAndDrop.dragOver(event,clapObserver)"
      ondragdrop="nsDragAndDrop.drop(event,clapObserver)"
      datasources="rdf:null"
      ref="http://clap/all">

Je précise que le DnD fonctionne très bien du premier vers le deuxième. Au niveau des symptômes, il semble que le onDrop ne soit même pas appelé...

Si vous avez une solution à mon problème, merci d'avance, sinon merci quand même ;)

Fabrice

C'est les vacances ou mon dernier post n'interesse personne...? :(

Fabrice

Si tu as trouvé comment faire, je veux bien la solution : j'ai le même problème et je suis coincée.

Merci d'avance.

Non toujours pas de solution :( le premier qui trouve informe l'autre ;)

J'ai trouvé une "solution" : vas voir cet exemple : http://www.captain.at/howto-xul-drag-drop-tree.php#dem

Merci je vais eplucher ça ;)