WebViewer Home Page | Mes Projets

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:

L'interface SWING (sous Solaris)

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 : 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:

    plugin image plugin html plugin texte plugin vidéo
    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