FMIN 312 Projet Flex Sérendipité

Transcription

1 Université Montpellier II UFR des Sciences FMIN 312 Projet Flex Sérendipité Réalisé par : EL ASRI Mohamed PAUL Arnaud KAHN Trsitan

2 Sommaire 1 )Présentation )Sujet : )Description : )Nos Choix )Structure interne )Le package «struct» )Le package «util» )Le package «tree» )Extraction des liens )Affichage et navigation )Alternativa3D )Le package «display3d» )Les classes «LinkBox» et «DomainBox» )Les classes «TextureLoaderEnv» et «Environment» )La classe «Navigator» )ScreenShots )Compilation )Exécution )Utilisation /2011 2

3 1 ) Présentation 1.1 ) Sujet : Ajouter de la sérendipité (de l'inattendu) dans la navigation grâce au Flash 1.2 ) Description : La navigation, dans les sites web ou dans les logiciels riches, est assez linéaire, souvent guidée par le modèle de conception du développeur. Il est d'autant plus vrai par l'organisation en menus et sous- menus que chaque page affichée ne peut l'être que si l'utilisateur décide d'y aller. Le but recherché est de trouver une solution pour ajouter un côté flexible à une navigation figée par menu. Il n'est pas forcément nécessaire, pour ce faire, d'implémenter les algorithmes de prédiction de navigation (comme chez Google), mais de penser différemment la visualisation de la navigation pour que l'utilisateur puisse aller visiter des pages non prévues par avance. 1.3 ) Nos Choix Nous avons choisis de faire une application air capable de naviguer sur le plus grand ensemble possible de site web. Pour cela nous avons due nous affranchir du menu (trop spécifique à chaque site) et traiter toute la page. A chaque chargement d'une page, on analyse (parse) cette dernière pour récupérer tout ses liens, que l'on affiche dans un environnement 3D. 2010/2011 3

4 2 ) Structure interne Trois packages sont au cœur de fonctionnement de l application : struct, util et tree 2.1 ) Le package «struct» Ce package est le noyau permettant de structurer les données (liens) extraites de la page ouverte dans fexbrowser. Chaque instance de la classe URLNode représente un nœud à parcourir pour accéder à la ressource (page) vers laquelle pointe un lien. Comme exemple, l URL se compose de 5 nœuds : : le nœud racine (host) adobe flex air index.php : le nœud feuille (page) Le nœud racine n a pas de nœud parent et tous les autres nœuds sont hiérarchisés à partir de ce nœud host. La classe LinkNode représente un lien vers un nœud (page), et comme on peut rencontrer le même lien plusieurs fois dans la page, l attribut number compte le nombre d occurrences de lien et l attribut labels mémorise le label de chaque occurrence. 2010/2011 4

5 2.2 ) Le package «util» Dans les classes de ce package est implémenté tout le mécanisme d extraction des liens, la manipulation des adresses URL et la structuration nœuds/liens. 2010/2011 5

6 2.3 ) Le package «tree» Pour afficher les liens sous-format arborescente, ce package offre les classes et la structure (design pattern composite) exploitable via le composant Flex «Tree». 2010/2011 6

7 2.4 ) Extraction des liens L extraction des liens passe par plusieurs étapes, le schéma ci-dessous vous présente les plus importantes. Vu que la majorité des sites ne sont pas conforme au XHTML, le passage par XML pour extraire les liens n est pas garantit. Pour contourner ce problème, le processus permet alors de suivre deux chemins, «e4x» si le site est au format XHTML, «text» sinon. 2010/2011 7

8 3 ) Affichage et navigation Nous avons décider de faire un affichage original en 3D. La navigation s'effectue à l'aide du clavier et de la souris. Le principe est simple nous avons un environnement qui contiendra des plaques représentants les différents domaines. Sur ces dernières des cubes représenterons les différents liens pointant vers une page de leur domaine. L'affichage des plaques et des cubes exploite directement le packages «tree». Un arbre style explorateur est présent dans notre bandeau de navigation. La sérendipité s'exprime dans notre affichage 3D par le fait que l'utilisateur peut naviguer à travers de véritable constructions de formes et de couleurs au grès de ses envies. 3.1 ) Alternativa3D Nous utilisons la librairies alternativa3d. Nous avons utilisé cette librairies d'abord car nous avons déjà pu expérimenter son utilisation dans d'autre projet. De plus la gestion de la collision et la navigation avec la caméra sont aisées et apporte une grande maniabilité pour l'utilisateur. 3.2 ) Le package «display3d» Le package display3d contient toutes les classes de notre affichage 3D ) Les classes «LinkBox» et «DomainBox» Ces deux classes comme leurs noms l'indique sont des classes étendues de la classe Box fournie par alternativa3d. DomainBox représente les plaques qui contiendront les liens et LinkBox représente les liens ) Les classes «TextureLoaderEnv» et «Environment» Ces deux classes permettent de créer un environnement et de mapper des images sur les faces de cette environnement. Dans notre application les l'environnement est un cube sur lequels on a mapper des photo d'étoiles. Ceci donne l'impression d'être dans l'espace ) La classe «Navigator» La classe navigator est celle qui contrôle l'affichage3d et relie toutes les autres classes entre elles. Elle met en place l'environnement et lorsque le site affiché change, elle met à jour les plaques et les liens. Cette classe possède les fonctions qui permettent le calcul des tailles des plaques, de leur positionnement dans l'environnement ainsi que le placement des cubes sur une plaques. Cette plaque possède une référence vers l'objet HTML créée dans le mxml avec lequel nous pouvons lors d'un click sur un cube affiché le site correspondant au lien du cube. 2010/2011 8

9 3.3 ) ScreenShots Ici nous chargeons le site et nous voyons que cette page contient des liens vers 4 domaines différents. Voilà un cube représentant un liens. 2010/2011 9

10 Voici le site qui possède un building de liens. 2010/

11 4 ) Compilation Pour compiler notre projet, il faut mettre à jour le SDK de air (une archive à dezipper dans le dossier de flash builder 4) 5 ) Exécution Comme notre projet est une application air, il suffit de double cliquer sur le fichier.air 6 ) Utilisation Le programme fonctionne comme un navigateur web simplifié. Il possède une barre d'adresse (que l'on peut valider grâce à la touche entrée ou le bouton OK) Le centre est réservé à l'affichage du site web. Le bas est réservé à notre menu de navigation en 3D, on peu se déplacer dans le menu grâce aux touches Z : Avancer S : Reculer Q : Aller à gauche D : Aller à droite Souris : Orientation Shift enfoncé : Permet d'accélérer le mouvement Cliquer sur cube : Accéder au lien Le clic sur un cube du menu permet l'ouverture de la page associée. 2010/