Forums : Xul, Xbl, JS...

Aller à la discussion : Plus récente Plus ancienne

# Comment utiliser nsIFilePicker |RESOLU]

Envoyé par : fredmj

Date : 30/10/2010 18:48

Bonsoir à tous,

Je débute avec XUL.

J'aimerais implémenter l'ouverture de la boite de dialogue firefox 'File Picker' (choisir un répertoire) dans une page web. J'ai créé un fichier .jar et l'installé dans mon répertoire chrome, avec son fichier manifest. Cela me permet d'y accéder via l'adresse chrome://trouverep/content. Par contre, je n'arrive pas à appeler ou même instancier correctement une classe nsIFilePicker au sein d'une page web, via javascript ou bien un lien html. Je crois avoir lu qu'il était possible de le faire via XBL, mais je n'ai toujours pas compris comment.

Si une bonne ame (charitable) voulait bien m'aider, je lui en serait reconnaissant eternellement (ou presque).

Fred.

# Re: Comment utiliser nsIFilePicker

Envoyé par : thx1138

Date : 30/10/2010 23:31

Tu as la documentation sur le site MDC :

https://developer.mozilla.org/en/NsIFile(..)

# Re: Comment utiliser nsIFilePicker

Envoyé par : fredmj

Date : 31/10/2010 13:23

Bonjour THX1138,

Merci pour ta réponse.

J'avais déjà essayé ce petit bout de code, mais sans succès. Voici mon exemple, cela sera peut-être plus parlant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script language="javascript">
<!--
//-->
</script>
<title>Test xul over http</title>
</head>


 <body>
     <a href="chrome://trouverep/content/trouverep.xul">Chrome</a>
     <br>
     <a href="trouverep.xul">XUL</a>
     <br>
     <a href="javascript:PickUP();">javascript</a><BR>

<script type="text/javascript">
     <!--

document.write('Load the function ...');
function ImHere() {
alert('I am HERE');
}
function PickUP() {
document.write('OK ici');
const nsIFilePicker = Components.interfaces.nsIFilePicker;
var fp =  Components.classes['@mozilla.org/filepicker;1'].createInstance(nsIFilePicker);

document.write('KO la');


fp.init(window, 'Dialog Title', nsIFilePicker.modeOpen);

fp.appendFilters(nsIFilePicker.filterAll | nsIFilePicker.filterText);

var rv = fp.show();
if (rv == nsIFilePicker.returnOK || rv == nsIFilePicker.returnReplace) {
 var file = fp.file;
 // Get the path as string. Note that you usually won't 
 // need to work with the string paths.
 var path = fp.file.path;
 // work with returned nsILocalFile...
 }
}
document.write('Done');

     //-->
</script>
</body>
</html>

'trouverep.xul' est le fichier xul placé dans le répertoire chrome et à la racine de cette page de test. Lorsque je clique sur le lien 'Chrome' ou le lien 'javascript' rien ne se passe, et si je clique sur le lien 'XUL', le bouton du fichier trouverep.xul s'affiche mais ne produit aucun résultat.

Par contre si je tappe 'chrome://trouverep/content/' dans la barre d'adresse, tout se déroule correctement.

Je teste sur une slackware13, firefox 3.6 et apache 2.2.15

# Re: Comment utiliser nsIFilePicker

Envoyé par : thx1138

Date : 31/10/2010 16:39

Voici un exemple complet qui fonctionne :

le fichier .xul doit être dans le chrome !!!

<?xml version="1.0"?>
<!DOCTYPE window PUBLIC "-//MOZILLA//DTD XUL V1.0//EN" "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 
<window id="YourApplication_window"
       windowtype="YourApplication"
       title="Files"
       xmlns:html="http://www.w3.org/1999/xhtml"
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       >

<script type="application/x-javascript">
 const Cc = Components.classes;
 const Ci = Components.interfaces;

function $(Id)
{
return document.getElementById(Id);
}

function folder(texte, dossier)
{
var nsIFilePicker = Ci.nsIFilePicker;
var fp = Cc["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker);

fp.init(window, texte, nsIFilePicker.modeGetFolder);

/*dossier par defaut*/
var folder =Cc["@mozilla.org/file/directory_service;1"].getService(Ci.nsIProperties).get("PrefD", Ci.nsILocalFile);
folder.initWithPath(dossier);

fp.displayDirectory =folder;
/*/dossier par defaut*/

var res = fp.show();

if (res == nsIFilePicker.returnOK)
{
	return fp.file.path;
}		
else
if (res == nsIFilePicker.returnCancel)
{
	return false;
}
}

function test()
{
var f=null;
if (f=folder('Dossier de travail', 'D:\\'))
{
	$('z1').value=f;
}
}

</script>


<textbox id="z1" />
<button label="Parcourir" oncommand="test()" />
</window>

# Re: Comment utiliser nsIFilePicker

Envoyé par : fredmj

Date : 31/10/2010 18:04

Merci pour cet exemple thx1138, je vais le regarder de plus prés.

Mais lorsque tu dis <<"dans le chrome"?!>> Je ne sais pas trop à quoi cela correspond. J'ai placé le fichier .xul dans une archive .jar qui à la structure suivante :

[xul]> tree trouverep
trouverep
|-- content
|   `-- trouverep
|       `-- trouverep.xul
|-- locale
|-- skin

Ensuite j'ai placé l'archive 'trouverep.jar' et un fichier 'trouverep.manifest' dans le répertoire d'installation de firefox :

[xul]> ls /usr/lib/firefox-3.6.3/chrome/ | grep trouverep
trouverep.jar
trouverep.manifest

Mon fichier xul est le suivant :

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

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

<dialog id="trouverep" title="Chercher le répertoire"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        buttons="accept,cancel"
        ondialogaccept="return trouverep();"
        ondialogcancel="return doCancel();"> 

<script>
function trouverep(){
var nsIFilePicker = Components.interfaces.nsIFilePicker;
var fp =  Components.classes["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker);
fp.init(window, "Sélectionnez un fichier", nsIFilePicker.modeGetFolder); 

var res = fp.show();
if (res == nsIFilePicker.returnOK){
 var thefile = fp.file;
alert('fichier='+thefile);

return true;
} 

}
function doOK()
{
alert('Vous avez appuyez sur OK!');
  return true;
}

function doCancel()
{
  alert("Vous avez appuyé sur Annuler !");
  return true;
}
</script>

<description value="Veuillez selectionner un répertoire."/>

Mais les liens contenus dans ma page web 'test.html' ne me permettent pas d'y accéder. Où est mon erreur?

# Re: Comment utiliser nsIFilePicker

Envoyé par : thx1138

Date : 01/11/2010 01:56

C'est un peu long à expliquer et cela l'a déjà été plusieurs fois sur ce forum.

Pour plus de facilité, regarde mon post du 13/10/2010 http://xulfr.org/forums/read.php?1,12956

Tu pourras y télécharger un exemple complet qui démarre avec XulRunner.

Tu peux également l'installer comme extension Firefox pour pouvoir le modifier directement (sans devoir à chaque fois redémarrer l'appli) (c'est ce que je fais pour développer).

Pour l'installer comme extension, télécharge et décompresse le fichier n'importe ou sur ton ordinateur.

Ensuite, tu dois créer un fichier xulocontacts@canevas.xul (c'est le nom qui se trouve dans le fichier install.rdf). Dans ce fichier, tu dois indiquer uniquement le chemin absolu de ton appli. Donc, en partant de mon appli, que tu as par exemple décompressé sur D:. Sous Windows, dans ton fichier xulocontacts@canevas.xul tu mets :

D:\XuloContacts\chrome\

Maintenant, tu dois mettre le fichier xulocontacts@canevas.xul dans le répertoire extensions de Firefox :

C:\Users\XXX\AppData\Roaming\Mozilla\Firefox\Profiles\xxx.default\extensions

Modifier la variable dbPath du fichier content\js\global.js pour lui indiqué ou est la bd (je l'ai mise dans le dossier content\datas)

voilà, une fois Firefox redémarré, tu devrais pouvoir accéder à l'appli via le lien suivant :

chrome://xulocontacts/content/index.xul

# Re: Comment utiliser nsIFilePicker

Envoyé par : fredmj

Date : 01/11/2010 11:58

Merci THX1138, j'avais fait quelques recherches sur le forum autour du mot 'nsIFilePicker', mais je n'étais pas tombé sur ton post. L'application me semble sacrément intéressante : générique et portable je vais m'y attarder un peu. Cela m'aidera pour la réalisation du projet final. De mon côté, je n'avais pas touché au fichier 'install.rdf', et c'est là peut-être mon erreur. Je tacherai de poster le résultat de mes tests directement sur ton post.

A bientôt.

# Re: Comment utiliser nsIFilePicker

Envoyé par : fredmj

Date : 26/11/2010 23:59

Je reviens avec ma question initiale, car mes essais sont pour le moment infructeux. J'ai donc "installé" mon extenssion en m'inspirant des conseils de THX1138, et j'arrive à ouvrir et finallement faire fonctionner mon fichier .xul en tappant son adresse chrome dans la barre d'adresse. Mais je n'arrive pas à y parvenir par l'intermédiaire d'un lien html. J'aimerais qu'un

<a href="chrome://mon_prog/content/mon_prog.xul">Chrome</a>
//ou bien
<SCRIPT SRC=...>

me renvoi vers mon application xul par exemple (ou bien peut-être dans une fenêtre externe via un

window.open(chrome://...)

Faut-il que je signe cette page web, et que je l'intègre dans mon .jar? Si quelqu'un a un avis, je suis preneur.

Fred.

# Re: Comment utiliser nsIFilePicker

Envoyé par : fredmj

Date : 28/11/2010 18:57

OK! La réponse à mon problème était:

netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")

Je me questionne sur l'opportunnité d'écrire un tutoriel sur mon blog. J'ai le sentiment que l'utilisation du nsIFilePicker n'est pas claire pour tout le monde.

Fred.

EDIT : Pas besoin de tuto, il y a Using_files_from_web_applications

EDIT 2 : Ici mon code final pour ceux que cela pourrait intéresser.

test.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script language="javascript">
<!--

/*
* fredmj - 2010 October - Quimper
* OK! After  some weeks of researches, I finaly succed in this (trivial) exercice :
* List the files placed under a directory, and there sub-directories
*
* All I needed was on this page : 
* https://developer.mozilla.org/En/Firefox_addons_developer_guide/Using_XPCOM%E2%80%94Implementing_advanced_processes#Calling_XPCOM_from_XPConnect
*
* So I didn't explain that again.
* this portion of code call the nsIFilePicker to choose a top-level directory
* Then, use recursiveley a ListDir(dir) function -which show the files under the directory- foreach directory 
* encountered.
* Care! it could be _VERY_ heavy for your box ressources if you do that from the root (/) or from an heavy dir.
* Even if all my tests was pretty fast at home : listed a 2Go directory in 4 seconds (Phenom II X4, 8Gb RAM, SSD 80Go)
* The code has been tested under firefox 3.*,4.*,4b8 on slackware 13.1 x86.
* A remote window$ browser will be offended about the var Newdir = dir+'/'+child.leafName;
* TODO : Permit a windows client connections, by forking them to another Newdir variable.
*
*
*/


function ShowMeTheList() { 
// Pick a Folder and gimme all his files trough the  file system tree.
 var directory = PickaFolder();
 ListDir(directory);
}

function PickaFolder() {
     // Allow me to use the XPConnect wrapper
     netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
     //Show me the nsIFilePicker
     var nsIFilePicker = Components.interfaces.nsIFilePicker;
     var fp =   Components.classes["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker);
     fp.init(window, "Selectionnez un repertoire", nsIFilePicker.modeGetFolder);

     var res = fp.show();
     if (res == nsIFilePicker.returnOK){
var Fp = fp.file;
var path = fp.file.path;
  //Here the top-level directory
  document.write('Fp='+Fp+'<br>');
  document.write('path='+path+'<br>');
   }
   return path;
}

function ListDir(dir) {
     // Allow me to use the XPConnect wrapper
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
// I wana use the sequential acces of all files under this nsILocalFile
// with the directoryEntries method
var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);  
file.initWithPath(dir);
var children = file.directoryEntries;
list = [];
while (children.hasMoreElements()) {
  var child =  children.getNext().QueryInterface(Components.interfaces.nsILocalFile);
  if (child.isDirectory()) {
  //This a directory again, so I have to list him too
  var Newdir = dir+'/'+child.leafName;
  ListDir(Newdir);
  }
  else {
  list.push(child.leafName);
  document.write(dir+'/'+child.leafName+'<br>');
}
   }
}

//-->
</script >
<title>Get the list of file under a directory - XPConnect to XPCOM components</title>
</head>


<body>
     <a href="javascript:ShowMeTheList();">javascript - ShowMeTheList</a><BR>
</body>
</html>

Il n'est plus possible de poster des messages dans ce forum.