WebViewer est un programme Java qui permet d'explorer un site Web, de visualiser les fichiers (html,images,...) de ce site et de les rappatrier.
Sommaire
L'interface graphique
Le Parser
Représenter l'arborescence d'un site
Les Plugins de visualisation
Télécharger WebViewer
Cliquer sur les
pour naviguer entre les différentes sections
L'interface
Notre application se présente sous cette forme:
Pour réaliser cette interface, nous avons choisi d'utiliser Swing qui offre
plus de fonctionnalités que AWT et permet de produire des interfaces plus riches
et plus conviviales.
Un modèle de cette interface a d'abord été réalisé grâce à Visual Age d'IBM.
Cependant, le code généré par ce dernier était complexe et peu clair.
De plus, tous les élements graphiques étaient regroupés dans la même classe, alors que
nous avions clairement défini de séparer les différents composants de l'interface.
Nous avonc donc modifier légerement ce code, puis nous l'avons "éclaté" en plusieurs classes,
chacune étant responsable d'un composant graphique. Les différents classes sont donc :
MyMenuComponent
Cet élément représente les menus de l'application
. Le menu Fichier propose de quitter l'application.
. Le menu Affichage devait permettre de choisir entre une représentation avec des icônes ou une plus détaillée sous forme de liste.
Nous n'avons implémenté,pour l'instant, que le premier choix.
. Le menu Aide, propose une aide basique, la consultation de cette page web et un About.
MyButtonsComponent

Cet élément est une barre de boutons détachable.
Le premier bouton permet de remonter d'un niveau dans l'arbre.
Les deux autres devaient permettrent de choisir rapidement entre le mode d'affichage par icônes ou par listes détaillées.
MyAdressComponent

Ce composant gère une barre d'adresse qui garde l'historique des urls des sites visités
Il contient une combo-box éditable et permet donc d'entrer directement l'url d'un nouveau site ou bien de choisir une url dans la liste des sites déjà visités.
MyTreeComponent

Ce composant gère la structure arborescente du site et les primitives pour insérer de nouvelles url dans l'arbre.
Nous avons décidé d'afficher dans l'arbre, les répertoires et les pages html
(cf. représenter l'arborescence du site)
FilePanel

Ce composant permet de représenter, de façon graphique, les fichiers et répertoires auxquels la page web sélectionnée dans l'arbre fait référence.
Si l'on clique sur un fichier avec la bouton gauche de la souris, on lance un plugin qui permet la visualisation ce fichier.
Si il s'agit d'un répertoire, on lance le parser pour explorer ce répertoire et on rajoute le résultat dans l'arborescence
Enfin, un click avec le bouton droit de la souris permet de rappatrier les fichiers.
Interface
C'est cette classe qui dispose les différents éléments mentionnés ci-dessus.
Elle gère également la façon dont interagissent les différents composants de l'interface.
Par exemple, un changement de sélection dans l'arbre conditionne un appel au parser, un changement possible dans l'arbre
et aussi un autre affichage le filePanel ...
le Parser
Le principe de WebViewer est de parser les pages web à la recherche des liens que contient une page web ou un répertoire.
Du fait de la complexité de HTML, ceci n'est pas une chose aisée
et le parser que nous avons implémenté ne traite pas tous les cas possibles
Il recherche les balises A HREF=adresse et IMG SRC=adresse, puis renvoie la liste des adresses touvées dans un Vector d'url
afin qu'elles soient insérées dans l'arbre et le filePanel.
L'arbre
L'idée la plus naturelle pour représenter un site est, sans doute, de suivre la structure arborescente des répertoires.
Cependant, cela peut poser quelques problèmes. Dans l'exemple ci-après, la structure du répertoire rep2 ne peux pas
être deviné car l'url rep2/ renvoie sur la page rep2/index.html.
rep1/
page1-1.html -> liens vers page2-1.html et vers page2-3.html
rep2/
index.html
page2-1.html
page2-2.html
page2-3.html
rep3/
page3-1.html -> liens vers page2-2.html et vers page2-3.html
|
Ainsi, la page page2-1.html ne sera connue qu'après avoir parsé page1-1.html.
De même, page2-2.html ne sera connue qu'après avoir parsé page3-1.html.
Une solution est donc de rajouter les fichiers de rep2/ que l'on trouve, au fur et à mesure que
l'utilisateur explore d'autres répertoires. Cette solution est acceptable mais il peut être
déroutant d'ajouter des fichiers dans rep2/ lorsque l'utilisateur sélectionne rep1/ par exemple.
Dans ce cas, il faut de plus bien veiller à ce que l'utilisateur voit le résultat du parsing de rep1/, mais aussi qu'il soit visuellement informé du changement dans rep2/
Pour connaitre toute la structure du repertoire, on peut être aussi être tenter de scanner le site entier,
ce qui peut évidemment s'avérer très long si la connexion n'est pas rapide. Si le parser est ne tourne pas en
parallèle, l'utilisateur n'a plus la main, ce qui la solution inacceptable, sinon, on doit malgré
tout faire face au même désagrément que précedemment.
Nous avons envisager de représenter le site d'une autre manière, sans mettre en avant la
structure de répertoires. Cette solution consiste à afficher les pages html ou répertoires (qui sont aussi lus
comme des pages web) dans l'arbre. Les fils d'une page étant les pages référencées par celle-ci.
Cette solution est peu être moins naturelle, mais plus proche et aussi un peu plus facile à mettre en oeuvre.
L'exemple ci dessus, nous donnerait alors un arbre comme celui-ci :
rep1/page1-1.html
rep2/page2-1.html
rep2/page2-3.html
rep3/page3-1.html
rep2/page2-2.html
rep2/page2-3.html
|
Avec cette solution, on voit que rep2/page2-3.html est référencé deux fois. Cela est génant (i.e. encombrant dans l'arbre)
si cette page a de nombreux liens ou s'il possède un lien vers page1-1.html ou page3-1.html par exemple.
C'est pourquoi, nous avons donc décider de ne mettre qu'une seule fois chaque url dans l'arbre (cela revient à faire
parcours au moment de l'insertion), même si l'arbre devient alors dépendant de la façon dont l'utilisateur
explore le site.
On parse page1-1.html d'abord
|
On parse page3-1.html d'abord
|
rep1/page1-1.html
rep2/page2-1.html
rep2/page2-3.html
rep3/page3-1.html
rep2/page2-2.html
|
rep1/page1-1.html
rep2/page2-1.html
rep3/page3-1.html
rep2/page2-2.html
rep2/page2-3.html
|
Les Plugins
la visualisation des fichiers que l'on clique se fait par l'intermediaire de plugins
de visualisation.
Les plugins se présentent sous la forme d'une classe java compilé (.class)
Pour qu'une classe java soit un plugin, il est nécessaire de respecter quelques conventions :
- elle doit s'appeler Plugin_ + nom_extension
- elle doit posséder un constructeur sans paramètres
- elle doit implémenter l'interface PluginInterface.
Cette interface impose l'implémentation de la méthode void show(URL url)
C'est cette méthode qui sera appelé pour la visualisation.
En respectant ces quelques règles, on voit qu'il est tres facile de créer de nouveaux plugins car
il suffit alors de placer le plugin dans le repertoire courant et il sera automatiquement reconnu par WebViewer.
Si, il n'y a pas de plugin pour le type de fichier que l'on veut lire, c'est le plugin unknown qui sera appelé
Avec WebViewer, nous livrons quelques plugins de visualisation:
- des plugins pour les images de type gif ou jpg ...
- un plugin pour visualiser des pages html
- un plugin pour lire des documents texte
- un plugin pour lire des films mpg !!
 |
 |
 |
 |
plugin image |
plugin html |
plugin texte |
plugin mpeg |
Note:
Le plugin mpg, a été écrit en grâce à un programme sous license GNU, que nous avons récupéré sur Internet puis transformé en plugin.
Ce plugin est lent, peu robuste et grand consommateur de mémoire.
Téléchargement
Pour faire tourner WebViewer, vous devez :
télécharger et décompresser l'archive qui contient les classes.
lancer WebViewer à l'aide de la commande: java Interface
Vous pouvez également télécharger les sources et consulter la documentation générée par javadoc
Note: à partir du jdk 1.2, la bibliothèque graphique Swing est intégré avec le jdk.
Ainsi, il faut mieux remplacer les import com.sun.swing... par des import javax.swing...
Sommaire |
Interface |
Parser |
Arbre |
Plugins |
Télécharger