Firefox comme IHM

Version imprimable

02/05/2010, 17h38
cassignol

Firefox comme IHM

Bonjour

L'idée m'est venu d'utiliser Firefox comme IHM a la place de TK ou GTK. Je pense pas être le premier, si quelqu'un a des exemples de scripts ou de modules en perl, ça m'intéresse.

En attendant j'ai écrit sur ce principe un FrontEnd pour PerlDoc et une visionneuse d'images.

Cette solution a l'avantage, d'être portable, simple, et d'avoir le look du navigateur.

Merci d'avance.
02/05/2010, 18h45
djibril

Faire un IHM avec firefox revient à faire du web en ce sens que tu ne pourras pas avoir tous les avantages d'une interface graphique, c'est à dire jouer avec l'interface, boite de dialogue, menus, interaction avec l'interface, widget, etc etc.
Concernant la mocheté de Tk (lu sur ton site), je te dirais que c'est à toi de l'habiller pour le rendre plus beau. Et puis de toute façon, un widget Tk ouvert sur Windows 7, vista, XP est beaucoup plus beau que sur WinNT ou vielle version de Windows ou Linux :aie:.
02/05/2010, 21h53
cassignol

I like TK and John Ousterhout
Bonsoir.

Je vous pris de pardonner ma remarque stupide sur le look de TK.
Si cela peut vous rassurer, sachez que je ne suis pas informaticien mais
paysan, et ma culture se limite aux clips de Virgin17 et à la lecture de mangas.
C'est dire si je n'ai aucune légitmité pour porter des jugements techniques
et esthétiques en informatique.

Je n'ai pas l'ambition d'écrire de gros programmes, juste de petits utilitaires,
je pense que l'affichage d'un navigateur est largement suffisant pour
mes besoins.

J'ai écrit plusieurs versions de ma visionneuse d'images:
- tkview.tcl Avec tcl/tk et TkMagick.
- tkvision.tcl Avec tcl/tk et Img.
- imgview01.pl Avec perl GTK2 et Imagemagick.
- imgview.pl Avec perl et Firefox.
Et c'est cette derniére que je préfére, le code le plus simple et le plus court.
Pas de widgets à écrire puisque c'est le navigateur qui se charge de l'affichage.
Il suffit de lui envoyer des pages HTML, et avec perl CGI la page HTML
se fait automatiquement avec quelques fonctions.

J'ai utilisé HTTP::Server::Simple::CGI, mais je suis sur que quelqu'un sais
comment faire mieux ou plus simple ou avec un autre module.
04/05/2010, 15h33
djibril

Voici un petit module passant par firefox. C'est encore du béta test mais bon : XUL::GUI

Test de XUL::Gui

Merci pour le lien vers XUL::Gui.

Jamais entendu parlé de XUL, j'ai trouvé un trés bon tutoriel à xulfr.org/ .

En gros, j'ai compris que pour créer une application XUL pour Firefox il faut:

Un fichier XUL, du XML qui décrit les widgets de l'interface.

Un fichier CCS pour le look.

Du code JavaScript pour le fonctionnement du tout.

Si on veut accéder au systéme d'exploitation on utilise des objects XPCOM au travers d'appels en JavaScript.
Par exemple pour copier un fichier:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
function copyFile(sourcefile,destdir)
  {
  // récupérer un composant pour le fichier à copier
  var aFile = Components.classes["@mozilla.org/file/local;1"]
    .createInstance(Components.interfaces.nsILocalFile);
  if (!aFile) return false;
 
  // récupérer un composant pour le répertoire où la copie va s'effectuer.
  var aDir = Components.classes["@mozilla.org/file/local;1"]
    .createInstance(Components.interfaces.nsILocalFile);
  if (!aDir) return false;
 
  // ensuite, on initialise les chemins
  aFile.initWithPath(sourcefile);
  aDir.initWithPath(destdir);
 
  // Au final, on copie le fichier sans le renommer
  aFile.copyTo(aDir,null);
}
 
copyFile("/mozilla/testfile.txt","/etc");

C'est pas une blague c'est copié tel quel du tutoriel.

Pour finir, si on a des widgets tree ou list pour stocker les données, on utilise des fichiers RDF/XML.

Je commence déjà a regretter ce bon vieux TK.

Bon je me dit qu'avec le module Perl XUL::Gui tout cela doit ce faire automatiquement.
Pour ma visionneuse d'images j'écrit le code suivant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
#!/usr/bin/perl -w
 
use XUL::Gui;
use File::Find;
 
my @a ;
 
find ( sub { 
    if ( -f and /\.(jpg)|(gif)$/i ) { 
        push(@a, $File::Find::name); 
    }
}, 
    $ENV{HOME} 
);
 
@a or die "Images not found";
 
chdir "/";
my $n = 0;
 
display    
    port => 1234,                                                               
    Window title=>'my window',  
 
        H2('Image Viewer'),  
 
	Label( id=>"lbl", value=>"$a[$n]" ),                                                      
 
        Button(  
	    id    => "img",
	    image => "$a[$n]",                                                             
            oncommand => sub {                                                  
                my ($self, $event) = @_;                   
                $n = $n + 1;	
		$ID{lbl}->value = "$a[$n]"; 
 
		####      Ne marche pas ????    ####
		#
		# $self->image = "$a[$n]";
		# ou
		# $ID{img}->image = "$a[$n]"; # Ne marche pas		                          
            }                                                                   
        )

Et là, impossible de changer d'image, le navigateur se bloque à l'appuit sur le bouton. Seule la premiere image s'affiche.
J'ai essayé avec Firefox 3 et Lenny pareil.

Si je regarde le code source de la page dans le navigateur:

Code:

1
2
3
4
5
6
7
8
9
10
 
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
        xmlns:html="http://www.w3.org/1999/xhtml" 
	onunload="return xul_gui.shutdown();" 
	onclose="return xul_gui.shutdown();" id="xul_2" 
	title="my window" >
	<script src="http://localhost:1234/client.js" id="xul_3" />
</window>

Le fichier ne contient aucun code XML pour décrire l'interface. En fait tout ce trouve à la fin du fichier JavaScript client.js .

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
...
...
...
xul_gui.root = ID.xul_2 = document.getElementById('xul_2');
ID.xul_1 = document.createElementNS('http://www.w3.org/1999/xhtml', 'html:h2');
ID.xul_1.appendChild( document.createTextNode('Image Viewer') );
ID.xul_1.setAttribute('id','xul_1');
ID.xul_2.appendChild(ID.xul_1);;
ID.lbl = document.createElement('label');
ID.lbl.setAttribute('value','/home/dede/capture1.gif');
ID.lbl.setAttribute('id','lbl');
ID.xul_2.appendChild(ID.lbl);;
ID.img = document.createElement('button');
ID.img.setAttribute('oncommand','EVT(event, \'img\');');
ID.img.setAttribute('id','img');
ID.img.setAttribute('image','/home/dede/capture1.gif');
ID.xul_2.appendChild(ID.img);

Si je regarde le flux HTTP avec Ethereal. J'ai oublié de préciser que XUL::Gui démarre un serveur HTTP sur lequel ce connecte le navigateur.
Au démarrage on a:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
GET / HTTP/1.1
Host: localhost:1234
User-Agent: Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.7) Gecko/20060830 Firefox/1.5.0.7 (Debian-1.5.dfsg+1.5.0.7-2)
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
 
HTTP/1.1 200 OK
Expires: -1
Keep-Alive: 300
Connection: Keep-Alive
Content-type: application/vnd.mozilla.xul+xml
Content-length: 399
 
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global
...
...
...

Ensuite toute les 10ms le navigateur appelle le serveur. Jusque ici tout va bien.
J'appuie sur le bouton il envoie la requête suivante:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
POST /event HTTP/1.1
Host: localhost:1234
User-Agent: Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.7) Gecko/20060830 Firefox/1.5.0.7 (Debian-1.5.dfsg+1.5.0.7-2)
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Content-Length: 24
Content-Type: application/xml
Pragma: no-cache
Cache-Control: no-cache
 
EVT img command xul_js_0
 
HTTP/1.1 200 OK
Expires: -1
Keep-Alive: 300
Connection: Keep-Alive
Content-type: text/plain
Content-length: 100
 
SET(ID.lbl, 'value', '/home/dede/capture2.gif');
SET(ID.img, 'image', '/home/dede/capture2.gif');
 
GET /home/dede/capture2.gif HTTP/1.1
Host: localhost:1234
User-Agent: Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.7) Gecko/20060830 Firefox/1.5.0.7 (Debian-1.5.dfsg+1.5.0.7-2)
Accept: image/png,*/*;q=0.5
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://localhost:1234/
 
HTTP/1.1 200 OK
Expires: -1
Keep-Alive: 300
Connection: Keep-Alive
Content-type: text/plain
Content-length: 23655
 
GIF89a.....................................................................

Et là ça bloque pendant le transfers du fichier image ????

En conclusion j'abandonne. Si XUL est sans doute trés bien pour écrire des plugins pour Firefox, pour moi c'est trop compliqué.
De plus j'ai remarqué qu'avec XUL on n'a plus automatiquement les barres de défilement, ni d'historique dans le navigateur.

12/05/2010, 16h07
Snoogy

Effectivement le développement dans Firefox peut paraître déroutant au début et surtout mal documenté... :(

Néanmoins, à force de persévérance on trouve ce qu'on cherche.
Voici quelques pointeurs qui pourraient s'avérer utiles.

Déjà, il faut savoir que l'API globale a considérablement évolué depuis Firefox 3.0 et que le tutoriel xulfr.org est quelque peu dépassé.

La doc la plus complète et la plus à jour est sur le site officiel : https://developer.mozilla.org/en/XUL
Sinon pour commencer il y a le pôle développeurs du site addons.mozilla.org : https://addons.mozilla.org/fr/developers

Pour approfondir un peu ce qui est dit plus haut, il semblerait que Mozilla ait plus ou moins laissé tomber les datasources RDF au profit de XML et SQLite. Il est donc possible de créer des templates pour mapper des composants d'interface à des expressions XPath ou à des requêtes SQL.
Voir : https://developer.mozilla.org/en/XUL/Template_Guide

Certaines datasources particulières (bookmarks, tags, annotations, historique) sont directement accessibles dans XUL via une API particulière, ce sont les "Places".
Voir : https://developer.mozilla.org/en/Places

Afin de faciliter considérablement le travail du développeur, il existe depuis peu, des modules javascript (les fichiers *.jsm) qui ressemblent beaucoup aux modules PERL. Ces modules sont accessibles via le protocole "resource:".
Pour voir les modules qui pré-existent dans Firefox tapez : resource://gre/modules.

Il en existe justement un qui permet de faire de la copie de fichier à distance.
resource://gre/modules/NetUtil.jsm

Plus d'info :
https://developer.mozilla.org/en/JavaScript_code_modules

Mozilla a également mis à disposition des développeurs certains librairies qui simplifient l'interaction avec la plate-forme :
FUEL et Jetpack